Articles Tagged

pseudo elements

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it’s just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines …

Note the double-colon ::before versus the single-colon :before. Which one is correct?

Technically, the correct answer is ::before. But that doesn’t mean you should automatically use it.…

Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.

What I mean by “CSS images” is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen …

Did you know that you can animate the content property of pseudo elements? According the list of animatable properties in the spec, you shouldn’t be able to, but in the latest version of desktop Chrome you can. The demo below …

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.…

This will do you fine these days (IE 8 and up):

.group:after {
  content: "";
  display: table;
  clear: both;
}

Apply it to any parent element in which you need to clear the floats. For example:

<div class="group">
  <div class="is-floated"></div>
  

…