Skip to main content

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>


<html>
<head>
<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 li.box {
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,
.video-description-fade {
width: 272px;
}
</style>
</head>
<body>
<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>
<div class="video-description-fade"></div>
</li>

<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:
http://itunes.apple.com/us/album/the-very-last-songs-i-will/id379861243

LYRICS

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...
Chicken!

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,
"Goose."

The Album:
iTunes — http://itunes.apple.com/us/album/the-very-last-songs-i-will/id379861243

Bandcamp — http://music.mikephirman.com
</div>
<div class="video-description-fade"></div>
</li>
</ul>
</body>
</html>

Comments

Unknown said…
beautiful!

Popular posts from this blog

Ubuntu 20.04 on a 2015 15" MacBook Pro

I decided to give Ubuntu 20.04 a try on my 2015 15" MacBook Pro. I didn't actually install it; I just live booted from a USB thumb drive which was enough to try out everything I wanted. In summary, it's not perfect, and issues with my camera would prevent me from switching, but given the right hardware, I think it's a really viable option. The first thing I wanted to try was what would happen if I plugged in a non-HiDPI screen given that my laptop has a HiDPI screen. Without sub-pixel scaling, whatever scale rate I picked for one screen would apply to the other. However, once I turned on sub-pixel scaling, I was able to pick different scale rates for the internal and external displays. That looked ok. I tried plugging in and unplugging multiple times, and it didn't crash. I doubt it'd work with my Thunderbolt display at work, but it worked fine for my HDMI displays at home. I even plugged it into my TV, and it stuck to the 100% scaling I picked for the othe

ERNOS: Erlang Networked Operating System

I've been reading Dreaming in Code lately, and I really like it. If you're not a dreamer, you may safely skip the rest of this post ;) In Chapter 10, "Engineers and Artists", Alan Kay, John Backus, and Jaron Lanier really got me thinking. I've also been thinking a lot about Minix 3 , Erlang , and the original Lisp machine . The ideas are beginning to synthesize into something cohesive--more than just the sum of their parts. Now, I'm sure that many of these ideas have already been envisioned within Tunes.org , LLVM , Microsoft's Singularity project, or in some other place that I haven't managed to discover or fully read, but I'm going to blog them anyway. Rather than wax philosophical, let me just dump out some ideas: Start with Minix 3. It's a new microkernel, and it's meant for real use, unlike the original Minix. "This new OS is extremely small, with the part that runs in kernel mode under 4000 lines of executable code.&quo

Haskell or Erlang?

I've coded in both Erlang and Haskell. Erlang is practical, efficient, and useful. It's got a wonderful niche in the distributed world, and it has some real success stories such as CouchDB and jabber.org. Haskell is elegant and beautiful. It's been successful in various programming language competitions. I have some experience in both, but I'm thinking it's time to really commit to learning one of them on a professional level. They both have good books out now, and it's probably time I read one of those books cover to cover. My question is which? Back in 2000, Perl had established a real niche for systems administration, CGI, and text processing. The syntax wasn't exactly beautiful (unless you're into that sort of thing), but it was popular and mature. Python hadn't really become popular, nor did it really have a strong niche (at least as far as I could see). I went with Python because of its elegance, but since then, I've coded both p