We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David DeSandro’s footer. However in that example, the “three dimesional” part is a solid color.
By alternating colors …
Fix a bug. Get a prize.
A site to incentivize helping out on open source JavaScript projects. Every single day there is a prize that someone earns through sheer number of bug fixes closed. Also weekly and monthly prizes on …
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Super simple, super nice effect, super practical jQuery plugin by Dave Rupert.
You need to …
Adobe has put together some pretty compelling demos of “CSS Regions.” Download the package and run the included “Mini Browser” to see them. You define shapes (kinda like an image map) in which content flows. If needed, you define how …
a {
position: relative;
padding-bottom: 2px;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
height: 1px;
width: 100%;
background: #444;
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
}See the Pen Gradient Underlines by Chris Coyier …
Simple and damn clever idea by Radu Chelariu. Use multiple columns and inline-block elements to create that “masonry” / staggered block layout that is hugely difficult to do otherwise.
This link is offline now, so I’m changing it to this …
Imagine a real-life tabbed folder. The tabs on those aren’t only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. …