Nowadays, typography is extremely popular in web design. There are many things that fall under the category “typography”, and today, we’ll be exploring one of those things: CSS drop caps. These can add some flair to a site, and can improve usability if used correctly.
Well, I’m releasing an amazing new grid system today. It’s based on what I call the “rubber layout” system. There are 4 different layout types, and each one is optimized for different displays. There are also some starter styles. Check out the project page for more info.
Have you ever been to a site where there are links pointing to different parts of the same page? Well, as you’ll find out in this post, there are some problems with this.
Today, we are going to make a CSS3 lightbox. They can be a great tool, but please, don’t overuse them. I hate those sites where a lightbox pops up asking you to register, or buy one of their products. It can turn a perfectly fine site into a really annoying experience.
Today, I will explain to you how to make another CSS3 version of a popular javascript widget. In this case, an accordion. You know, those things that unfold when when you click on a link. Follow along, and you will learn how to make a CSS3 accordion.
Today, I’m going to show you how to replicate something that is normally done with javascript: A tooltip. Every browser out there takes the title tag of an element and displays this, but sometimes, the default browser “tooltip” just isn’t enough. That’s the reason for this CSS snippet. If you want the “tooltip” text to […]
The CSS3 text column module allows web developers to make text have multiple columns, like in a newspaper. It can be useful when there are long lines of text, and you wish to make the text more legible. It is only supported by firefox and webkit-based browsers such as chrome. Internet Explorer doesn’t support it. […]
CSS3 media queries are extremely useful for adaptive layouts. Depending on the visitor’s screen size, aspect ratio, and many other things, you can serve different layouts. For example, if I wanted to target browser viewport sizes that are between 400px and 700px, I could write this in my stylesheet. You will probably use the “min-width” […]
In this post, we will learn to create a functional tabs interface with only css (and html). Not using javascript is extremely useful because if the user has an old browser that doesn’t support javascript, these tabs would still work. This also makes it an excellent fallback solution for a more advanced javascript-powered tabs plugin. […]
For the past few days, I’ve been toiling over a project of mine – CSSWork. The aim of this project was to create a simple CSS foundation for building websites. It includes a css reset, some simple styles, and a 12-column grid system with media queries to make it more dynamic. Link: CSSWork