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) … Continue reading
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 … Continue reading
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 … Continue reading
Just having some fun with CSS animations and generated content. Happy hump day!
Video, audio, and images are all types of multimedia. 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 … Continue reading
HAML .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 … Continue reading
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 … Continue reading
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 … Continue reading
[class^="color"] { margin: 1px 0; border-radius: 2px; padding: 0 6px; display: inline-block; color: white; background: #2faced; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } .color2 { background: black; } .color3 { background: #ff1166; } .color4 { background: #161616; … Continue reading
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 … Continue reading