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

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python. Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening.

The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for Bukkit s…

Apple: iPad and Emacs

Someone asked my boss's buddy Art Medlar if he was going to buy an iPad. He said, "I figure as soon as it runs Emacs, that will be the sign to buy." I think he was just trying to be funny, but his statement is actually fairly profound.

It's well known that submitting iPhone and iPad applications for sale on Apple's store is a huge pain--even if they're free and open source. Apple is acting as a gatekeeper for what is and isn't allowed on your device. I heard that Apple would never allow a scripting language to be installed on your iPad because it would allow end users to run code that they hadn't verified. (I don't have a reference for this, but if you do, please post it below.) Emacs is mostly written in Emacs Lisp. Per Apple's policy, I don't think it'll ever be possible to run Emacs on the iPad.

Emacs was written by Richard Stallman, and it practically defines the Free Software movement (in a manner of speaking at least). Stal…

Creating Windows 10 Boot Media for a Lenovo Thinkpad T410 Using Only a Mac and a Linux Machine

TL;DR: Giovanni and I struggled trying to get Windows 10 installed on the Lenovo Thinkpad T410. We struggled a lot trying to create the installation media because we only had a Mac and a Linux machine to work with. Everytime we tried to boot the USB thumb drive, it just showed us a blinking cursor. At the end, we finally realized that Windows 10 wasn't supported on this laptop :-/I've heard that it took Thomas Edison 100 tries to figure out the right material to use as a lightbulb filament. Well, I'm no Thomas Edison, but I thought it might be noteworthy to document our attempts at getting it to boot off a USB thumb drive:Download the ISO. Attempt 1: Use Etcher. Etcher says it doesn't work for Windows. Attempt 2: Use Boot Camp Assistant. It doesn't have that feature anymore. Attempt 3: Use Disk Utility on a Mac. Erase a USB thumb drive: Format: ExFAT Scheme: GUID Partition Map Mount the ISO. Copy everything from the I…