Reader Rob Young sent in a cool effect seen on Newsweek.com: Show The text fades out at the bottom and has a “More…” link. Text fade out is nothing new around here. I’ve had a demo up for that for ages, which uses a transparent PNG file placed overtop the text. But since this is a slightly different idea and the times-are-a-changin’ and we can get a bit more progressive with this idea. Let’s assume these small boxes of text are used in a sidebar, so our HTML markup will be a div with class of
The box will be limited in height by the appropriate property
Which gives us: The “Reveal” with jQueryThe simplest way to make this work would be to remove the max-height CSS from the sidebar box on a click. That would let it instantly expand down to the natural height of all contained paragraphs. Theoretically you could do this with CSS3 and :target, but that’s temporary and would cause page jump-downs. We can make it more elegant by using JavaScript and the easy animations of jQuery.
So in Plain English, when a button is clicked inside of a sidebar-box, find all the related players involved (parent elements and such), measure a new ideal height, animate to that new height, and remove the button. View Demo Download Files Quick note about Transparency & GradientsI had some head-scratchers going on trying to figure out a weird problem using CSS3 gradients and fading from “transparent” to a regular hex color. It seemed like the color was multiplying onto the background. What is actually happening is that the word “transparent” is actually just mapped to “rgba(0, 0, 0, 0)” which means “fully transparent black.” So when the gradient is built, the intermediary colors are mixed with not-quite-totally transparent black. To fix this, you’ll need to use RGBa colors in both the start and fade to color, even if it’s fully transparent. For example, for red to fade from red to transparent:
And don’t forget all the other gradient syntaxes. CSS3 Please! is a great resource for getting quick up-to-date CSS3 syntaxes. Thanks to @foodgoesinmouth, @sebnitu, @maddesigns and others… How do I fade text color in CSS?Specify the margin and padding of the text. Choose the font size and font via the font-size and font-family properties. Set the color of your text and also style it with the text-transform property. Use the transition-duration property to specify how long the transition animation of the text should take.
What is fade out effect?The Fade In/Fade Out behavior lets you dissolve into and out of any object by ramping the opacity of the object from 0 percent to 100 percent at the start, and then back to 0 percent at the end. You can eliminate the fade-in or fade-out effect by setting the duration of the Fade In Time or Fade Out Time to 0 frames.
|