Wouldn’t it be fun to be able to target our designs based on what season, day, or hour it is using CSS media queries?
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);
}
}
Sass has a set of powerful control directives that I find fascinating: @if, @for, @while, and @each.
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.
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).
.natural-curves
.natural-curves-inner
…
Let your bordered outer div determine the background1 and its border-radius2 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-radius3 and you will lose your natural curves.
.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.
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;
}
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.
Ever since I found out about the hidden gem box-sizing:border-box, I’ve used it on most all my projects. While fiddling around with border-box, I learned the * universal selector box-sizing declaration didn’t apply to my pseudo elements.
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;
}