Thursday, August 11, 2011

CSS: Fading Clipped Text

CSS has a feature, "text-overflow: ellipsis;", that works really well when you want to clip a piece of text and replace it with "...". However, it only works for a single line of text. It doesn't work when you have a paragraph of text, and you want to clip all the text below a certain point.

This is a problem I've struggled with a couple times. I've always wanted to figure out how to have the text fade out at the bottom of the box. Before now, I've aways just clipped the text at the bottom of the box; that looks ugly since most of the time, the text is vertically clipped in the middle of a sentence.

During a recent HTLM5 Hackathon at Google, I learned about gradients and masks. After about 45 minutes worth of futzing around, I finally achieved the effect I was looking for. Here's the code. It basically puts a mask over the text with a gradient that makes the text fade out.
<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fading Text</title>
<style type="text/css">
.box {
list-style: none;
padding: 5px;
background-color: #F5F5F5;
border: 1px solid #DCDCDC;

.video-list {
padding-left: 0;

.video-list {
width: 400px;
height: 125px;
margin-bottom: 5px;
overflow: hidden;
position: relative;

.video-title {
font-weight: bold;

.video-duration {
padding-bottom: 1em;
font-style: italic;
font-size: 75%;

.video-description {
font-size: 75%;

.video-description-fade {
position: absolute;
bottom: 0;
left: 5px;
height: 2em;
background-color: #F5F5F5;
-webkit-mask-image: -webkit-gradient(
linear, left top, left bottom,
from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));

.video-description-fade {
width: 272px;
<ul class="video-list">
<li class="box playlist-item">
<div class="video-title">Google I/O 2011: HTML5 Showcase for Web Developers: The Wow and the How</div>
<div class="video-duration">60:23</div>
<div class="video-description">
Eric Bidelman, Arne Roomann-Kurrik

We'll share the strengths and extents of HTML5, showing magnificent
demos of bleeding-edge features in Google Chrome. Digging into
high-fidelity graphics, performance, and system integration, we'll
break each demo down on the big screen to show how it was
constructed. Then we'll show you how to use Chrome to its full
potential in your own projects.
<div class="video-description-fade"></div>

<li class="box playlist-item">
<div class="video-title">Chicken Monkey Duck</div>
<div class="video-duration">1:20</div>
<div class="video-description">
Get it on iTunes:


Monkey chicken chicken,
Monkey Chicken, duck duck,
Chicken monkey monkey, Chicken Monkey,
chicken chicken monkey duck.
Monkey duck,
Chicken duck,
Monkey monkey duck duck,
Chicken Monkey, chicken chicken monkey,
"Chicken Monkey Duck."

Chicken chicken monkey duck,
Chicken Monkey, duck duck,
Chicken chicken monkey,
Chicken monkey,
Chicken duck.
Chicken duck duck,
Chicken monkey monkey duck,
"Chicken Monkey Duck?"
Chicken duck.
Monkey duck duck:
Chicken chicken, monkey,
Chicken, monkey monkey, Chicken Monkey.
Chicken chicken monkey?
Chicken, monkey monkey,
"Chicken Monkey Duck."

Chicken chicken, monkey,
"Chicken Monkey Duck."
Chicken chicken, duck.
Chicken Monkey, monkey,
Chicken Monkey—chicken duck.

Duck, Chicken Monkey
Chicken chicken monkey, chicken.
Duck duck,
Chicken chicken, duck.
Chicken, monkey monkey...

Duck duck, Chicken Monkey,
Chicken chicken, monkey.
Chicken Chicken (monkey monkey),
Chicken monkey,
"Chicken Monkey Duck."

Chicken chicken chicken,
Monkey monkey,
Chicken Monkey:
Duck duck duck duck duck duck duck duck,

The Album:
iTunes —

Bandcamp —
<div class="video-description-fade"></div>

1 comment:

Michael Mell said...