- This topic is empty.
-
AuthorPosts
-
June 3, 2014 at 2:10 pm #171703Henri HelveticaParticipant
Hmm that sounds like the challenge I’m having.
I’m trying to end up w/ something pretty much like this header.
I went to look @ the code but couldn’t find anything that looks like an animation/transition. I feel like I saw once and never paid it any mind, but can’t find it now. I read that gradients can’t be animated – which I find odd
Can anyone describe how that smooth gradient transition/animation is happening??
This started as I was tinkering w/ something quick like this:
span{ font-family: 'Advent Pro'; font-weight: 400; font-size: 10em; margin-left: 1em; text-transform: uppercase; background: -webkit-linear-gradient(-75deg, yellow, red 60%, rgb(0,255,555) 69%, blue 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: kaleidoscope 4s ease infinite; } @-webkit-keyframes kaleidoscope { 0%, 100% { background: -webkit-linear-gradient(-75deg, yellow, red 60%, rgb(0,255,555) 69%, blue 85%); } 25% { background: -webkit-linear-gradient(-75deg, blue, yellow 60%, red 69%, rgb(0,255,555) 85%); } 50% { background: -webkit-linear-gradient(-75deg, rgb(0,255,555), blue 60%, yellow 69%, red 85%); } 75% { background: -webkit-linear-gradient(-75deg, red, rgb(0,255,555) 60%, blue 69%, yellow 85%); } } </style> </head> <body> <span>HENRI</span> </body>
thanks a million ahead of time.
cheers.
June 3, 2014 at 3:25 pm #171708AtelierbramParticipantYou can see how it’s done in DevTools; within the style-block in head (under: <– Art Direction Styles –> ). It’s a very nifty
css-animation
on the background-position of a (zero height?) background-image within a zero height element with a large amount ofpadding-bottom
in percentages. (Title itself is an image too).BTW, try the
background-size
property for the faking of animations on gradients:- demo
- animating css3 gradients by Louis Lazaris
June 4, 2014 at 7:23 am #171826paulobParticipantHi,
If you use a long gradient and then manipulate the background-position you can create the effect you are after (more or less).
http://codepen.io/paulobrien/full/buqFg/
I’m not sure how useful it will be as it uses : after to add some content. You could use a span instead and avoid duplicating the text but then you would need to fix widths and heights.
I’m sure there’s a better solution in there somewhere.
June 4, 2014 at 8:25 am #171830Henri HelveticaParticipantThanks for that. I’m looking at the bg-size codepen now. I also looked @ LL’s option, but may have rushed through it. I’ll take a closer look again.
Oddly enough, I didn’t bother looking for more than a few style blocks in that one page, and there are a few. DUH. Thanks for the heads up there and yes… this looks quick like an interesting hack.
June 4, 2014 at 8:47 am #171834Henri HelveticaParticipant@Paulob This is absolutely the solution i had in mind thx! I had been thinking of something very like that but was playing around w/ ideas (in my head of course) on how to make that work.
Thanks a million for coding that up. I’ve been toying around and changed the direction (since I actually wanted a vertical motion).
major teachable moment.
cheers man!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.