An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths…
Articles in the ‘Tutorials’ Category
-
Controlling width with CSS3 box-sizing
Posted: 10 months ago in Tutorials
Read More: Controlling width with CSS3 box-sizing
-
How To Use CSS3 Pseudo-Classes
Posted: 10 months ago in Tutorials
We can use pseudo-classes to style content dynamically. CSS pseudo-classes come in four groups: structural pseudo-classes, pseudo-classes for the states of UI elements, a target pseudo-class and a negation pseudo-class. This in-depth article explains how and where to use them effectively…
Read More: How To Use CSS3 Pseudo-Classes
-
iPad Orientation CSS (Revised)
Posted: 10 months ago in Tutorials
Alternative to Cloud Four’s demonstration on how to serve up iPad stylesheets based on device orientation…
Read More: iPad Orientation CSS (Revised)
-
CSS3 linear gradients
Posted: 11 months ago in Tutorials
An in-depth article on CSS3 gradients that explains how to use linear and repeated linear gradients for all modern browsers…
Read More: CSS3 linear gradients
-
Flexible height vertical centering with CSS, beyond IE7
Posted: 11 months ago in Tutorials
How to center something both horizontally and vertically with modern browsers (apart from IE7 and older). The technique uses display:table but there is one thing to be aware of before implementing…
Read More: Flexible height vertical centering with CSS, beyond IE7
-
CSS Typography: The Basics
Posted: 11 months ago in Tutorials
Good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing. There are also font styles to consider. How can we use CSS for great typography in our web designs? This is a question we’ll try to answer…
Read More: CSS Typography: The Basics
-
Nonintrusive CSS Text Gradients
Posted: 11 months ago in Tutorials
Though not completely cross browser compatible, there are ways to nonintrusively create pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes…
Read More: Nonintrusive CSS Text Gradients
-
CSS Floats 101
Posted: 11 months ago in Tutorials
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it…
Read More: CSS Floats 101
-
My New Best Friend: CSS Generated Content
Posted: 11 months ago in Tutorials
I’ve become obsessed with generated content lately. In an effort to use fewer and fewer images, I’ve started to use generated content more since more browsers support it IE8+, FF3+, Safari 4+, Chrome 4+. The following are a couple of examples I have built for a project to streamline my pages…
Read More: My New Best Friend: CSS Generated Content
-
The Font-Face Rule and Useful Web Font Tricks
Posted: 11 months ago in Tutorials
The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article…