Using CSS without HTML

A few days ago, Chris tweeted:

If we could stack pseudo elements (e.g. ::after::after) we could build a whole website with no HTML other than . Probably good we can’t.

In response to this, I created this quick

Avatar of Mathias Bynens
Mathias Bynens on (Updated on )

CSS Transition Timing

Direct Link

Nice little article with visual demos on the different timing functions for CSS transitions. The progress bar is neat. Also notice the scaling transform on the table of contents. Not sure I love that exact implementation but I like the …

Avatar of Chris Coyier
Shared by Chris Coyier on

Page Curl Shadows

ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid 
Avatar of Chris Coyier
Chris Coyier on (Updated on )

The Fifth Position Value

Direct Link

Peter-Paul Koch:

If mobile browsers were to implement position: fixed exactly as the desktop browsers do, many sites with fixed elements would become unusable on mobile.

… I believe it’s time for position: device-fixed.

Avatar of Chris Coyier
Shared by Chris Coyier on

Text Fade Out / Read More Link

A section of text that fades into the nothingness. But wait, a beacon. A "read more" link shines through the darkness. Click upon it and all text is revealed! CSS3 gradients are used for the text fading and jQuery is used to handle the animated reveal.
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Three-Sided Border

There are many ways to skin a cat. Also, there are many ways to accomplish the same thing in CSS. The three sided border is one of those things, so we'll look at four different examples that all do it. I would think this kind of thing is a bit confusing as a beginner, so hopefully seeing these different bits of code isolated will make it clearer.
Avatar of Chris Coyier
Chris Coyier on

Shortcode for Action Button

For functions.php

 /* Shortcode to display an action button. */
add_shortcode( 'action-button', 'action_button_shortcode' );
function action_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'subtitle' => 'Subtitle',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="action-button 
Avatar of Chris Coyier
Chris Coyier on

You Must Learn JavaScript

Direct Link

It’s really unavoidable these days, and that’s good because it’s awesome. Here are some choice quotes from Kenny Meyers:

Not every company is a Ruby shop. Not every company is a .NET shop. It’s my belief that 99% of the

Avatar of Chris Coyier
Shared by Chris Coyier on