Experimental code ahead. The following code doesn’t exist…yet.

/* Style for summer */
@media (time: from(2013-06-21) to(2013-09-21)) {
    html {
        background: radial-gradient(yellow, white);
    }
}

/* Style for a birthday */
@media (time: 2013-09-12) {
    html {
        background: url(confetti.gif);
    }
}

/* Style for the evening */
@media (time: from(17:00:00) to(21:00:00)) {
    html {
        background: darkblue;
    }
}

In my “hue bump” experiment, I used a @for loop in Sass along with the nth-of-type CSS pseudo class to bump up the hue of each word.

$hue-bump: 15;

@for $n from 2 through 6 {
    h1:nth-of-type(#{$n}) {
        color: hsl($n * $hue-bump, 100%, 50%);
    }
}

I looped from the second header (h1:nth-of-type(2)) to the sixth header (h1:nth-of-type(6)) adding 15 (or the $hue-bump amount) more to the hue number in each header’s hsl value.

Check out this Pen!

Here is a way to set matching icons to your labels all without leaving your HTML.

Just create a new data-icon attribute on your tag that contains your label and set it equal to the icon you would like to use.

<li data-icon=★>Favorites</li>

And then set your CSS to display the data-icon attribute before the label.

li:before {
    content: attr( data-icon );
}

On a side note: attr() works in IE8+.

That’s it. Happy holidays.

Just having some fun with CSS animations and generated content.

Happy hump day!

Currently only images are aloud in our CSS. In many cases video and audio require controls and are a core part of the page content. Sometimes, though, they are strictly used as background decoration and do not require controls.

Let’s say you want an infinitely-looping full screen video as your homepage background (like this one: marisapassos.com). Your only option is to include it in your HTML. That works, but if the video is essentially decoration or serves as a supporting style for the real content (in the HTML), then I say it belongs in the presentational layer (the CSS).

Take this site as another example: thecassette.fr. Their video of the dancing shoes is clearly used for decoration. It sits in the background and loops creating a nice effect, making the page much more visually pleasing and adding to their branding.

Their video doesn’t belong in the meat of the page as it is not content, but truly belongs in the CSS with all the other styling. The developers of this site even used a clever fallback image of the shoes for the browsers that didn’t support their video (which happens to be an .swf file in this case, but could be any type of web video format).

Experimental code ahead. The following code doesn’t exist…yet.

I would rewrite their background video in CSS something like this:

.page {
    background: url(images/dots-grid.png),
                url(video/dancing-shoes.webm),

                /* Video fallback */
                url(video/dancing-shoes.mp4),

                /* Image fallback */
                url(images/dancing-shoes.jpg);
    background-size: cover;
    background-play-state: running;
    background-iteration-count: infinite;
}

On this site (aboutblank.cz), again, video is used to paint the page, but is not true content, and therefore does not belong in the HTML, but rather the CSS. When I disable all CSS styles on the page, I still see the video looping.

As for audio, I feel the same way, that if the audio is not content (like album tracks on a band’s site) and belongs in the background, we should be able to send it to the CSS.

Chris Coyier wrote an interesting article in 2011 describing how to play sound on :hover. This method works, but wouldn’t it be nice to be able to make this work purely with CSS without HTML or JS?

I think this would be quite awesome:

.btn:hover {
    background-audio: src(audio/bloop.webm),

                      /* Audio fallback */
                      src(audio/bloop.mp3);
}
btn:active {
    background-audio: src(audio/tick.webm),

                      /* Audio fallback */
                      src(audio/tick.mp3);
}

Presentational elements belong in the CSS. If audio or video, like images and colors, are used as presentational elements, then they should be put in the CSS.

HAML

.natural-curves
    .natural-curves-inner
        …

Let your bordered outer div determine the background¹ and its border-radius² will put a natural curve on the inner div.

If you set the background of the inner div, you will also need to set its border-radius³ and you will lose your natural curves.

CSS

.natural-curves {
    border: 0.5em solid;
    border-radius: 1.5em; /* 2 */
    background: lightblue; /* 1 */
    …
}
.natural-curves-inner {
    overflow: hidden;

/* 3 */
/*
    border-radius: 1em;
    background: burlywood;

*/
}

As a fun little task for myself, I marked up my initials (CBPN) in a list and styled them around an ×. The main thing to take away from this example is that everything is em-based, so that changing the html font-size will perfectly scale the entire project.

I encourage you to play around in my code and come up with your own variations.

Touch is the simplest and one of the most powerful forms of communication.

In this article, I will take a look into the possible future of CSS, the presentation layer of the web. I will be exploring touchable textures and how they could be applied in CSS to texture-enabled devices. By textures, I’m referring to the feeling of three dimensional surfaces like, smooth or bumpy, applied to a two dimensional surface of a device (or future 3D surfaces). Though this type of technology may not be readily available today, it’s certainly fun to imagine how texture styles may be implemented.

Experimental code ahead. The following code doesn’t exist…yet.

My (rather crude) proposal is for a texture property in CSS:

.surface {
    texture: smooth;
}

Of course, we would need to include our browser specific versions:

.surface {
    -webkit-texture: smooth;
     -khtml-texture: smooth;
       -moz-texture: smooth;
        -ms-texture: smooth;
         -o-texture: smooth;
            texture: smooth;
}

Properties

Possible texture properties (most ranging from 0 to 1, similar to opacity):

.surface {
    texture-temperature: cool | warm | 77°F | 25°C;
    texture-adhesion: 0.15;
    texture-hardness: 1;
    texture-roughness: 0.3;
    texture-malleability: 0.6;
    texture-viscosity: 0.75;
    texture-density: 0.3;
}

In shorthand, you’d only include the properties that are necessary (similar to transform values):

.surface {
    texture: temperature(25°C) adhesion(0.75) roughness(0.4);
}

And store your custom texture for reuse (similar to @keyframes):

@texture grippy {
    texture: adhesion(1) roughness(0.5);
}

::-webkit-resizer {
    texture: grippy;
}

Pre-defined values

The texture values would have standard, pre-defined value names as strings the same way we already have color values like cadetblue and transition values like ease-in-out.

texture: smooth | course | grainy | sharp | raised | bumpy | sticky | fabric | glass | metallic | rubbery | depressed | detect* | inherit;

*detect would choose the best texture based on the look of the element.

Browsers may handle these defaults differently, so I assume we could end up with vendor-prefixed values like -webkit-smooth as well.

The ability to build out the 3D surfaces of your textures would be possible through the use of technologies like WebGL*, svg3d, and possibly matrix3d (similar to how the CSS transform property works).

*Texture could be implemented with WebGL something like this.
[Credit goes to Małgorzata Jatczyk for this awesome experiment].

Enhance

These styles would work perfectly when designing with progressive enhancement in mind because browsers that couldn’t read the texture property, would simply ignore it (just like rgba colors or opacity). The texture property could be feature-detected in JavaScript with something like Modernizr to check if the device is able to apply textures. Apps that depend on touchable textures may need to offer other ways of handling functionality on non-texture-enabled devices.

if (!Modernizr.textures) {
    // Non-texture-based solution here
}

.no-textures {
    /* Non-texture-based CSS solution here */
}

Putting texture to use

These textures may start off being implemented in a rather dull way at first or considered more novelty than practical, but over time devices would most assuredly be able to render complex 3D textures. Here are some ways developers could use textures.

Accessibility

Touchable textures would open up a whole new level of accessibility. Everyday smartphones and tablets could become much more powerful assistive devices.

We could bring Braille to mobile devices:

.assistive-touch-device {
    texture: smooth;
}
.assistive-touch-device-text {
    font-family: Braille;
    texture: raised*;
}

*raised would represent a two dimensional texture that is raised slightly off the page like an embossed business card.

Typing on your on-screen tablet keyboard:

.key {
    …
    texture: smooth;
}
.key:active {
    texture: pressed;
}
.f-key:after,
.j-key:after {
    content: "·";
    …
    texture: raised;
}

Gaming

Touchable textures in games would be pretty crazy.

Think about a game where the player rubs a metallic, somewhat adhesive surface until it reveals a smooth plastic texture that unveils a graphic or number, similar to how someone would scratch a lottery ticket to see if they’d won.

Or how riding on a sidewalk in a skateboarding game might be written:

@texture concrete {
    texture: temperature(85°F) hardness(1) roughness(1);
}
@keyframes riding-on-a-sidewalk-square {
    0%,
    89%,
    91%,
    99% { texture: concrete; };
    90%,
    100% { texture: bumpy; }
}

.riding .sidewalk-square {
    animation: riding-on-a-sidewalk-square 1s;
}

Usability

You could engage on a deeper emotional level with your users through the textures of your buttons:

.btn-success {
    texture: temperature(warm) roughness(0);
}
.btn-danger {
    texture: temperature(cold) roughness(1);
}

Onward!

My examples are simple implementations of my proposed texture property. My hope is by this point you’ve thought of many new ways CSS textures could be used and maybe better ways it could be implemented.

The advancement of the web lies in our hands, but more importantly in our imagination.

EDIT: Looks like touchable texture technology is on its way!

Hexadecimal codes, like #2faced, are interpreted as colors. For a long time now, I’ve wanted the ability to further shorten hexcodes.

Take for example the hexcode for the color black. It can be written as #000000 or #000. I think we should also be able to write #0 to represent black.

To take this a step further, we know #f16 is the shorthand for #ff1166, so why can’t #16 be the shorthand for #161616?

In my ideal world:
#3 would be equivalent to #333333,
#7 would be equivalent to #777777,
#b4 would be equivalent to #b4b4b4,
#5d would be equivalent to #5d5d5d,
et cetera, et cetera.

This technique seems like an appropriate short(er)hand for hexcodes and would save a tiny bit of time and bytes.

So, to apply box-sizing:border-box to everthing, use:

/* Base styles
   ------------------------------ */

*,
:before,
:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* ☃
   ------------------------------ */

.☃ {
    margin: 0 auto;
    padding: 8px;
    font-size: 2em;
    text-align: center;
    color: indianred;
    background: lightblue;
}
.☃:before,
.☃:after {
    content: "☃";
    width: 100%;
    border: 8px solid;
    padding: 8px;
    display: block;
    background: seashell;
}

EDIT:
I see now that this technique has been mentioned before a few times.

However, for the sake of brevity and saving a couple bytes, my suggestion is writing out :before and :after rather than *:before and *:after shown in the other examples.