Regardless of where they appear, string values in CSS behave in a similar way. The most important thing to remember about them is that they are not HTML. This means, for instance, that inserting literal angle brackets without escaping them as HTML entity references (< and >) is perfectly legal…
Articles in the ‘Tutorials’ Category
-
Introduction to CSS Escape Sequences
Posted: 2 years ago in Tutorials
Read More: Introduction to CSS Escape Sequences
-
The New Clearfix Method
Posted: 2 years ago in Tutorials
Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method.
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats…
Read More: The New Clearfix Method
-
Styling HTML Lists with CSS: Techniques and Resources
Posted: 2 years ago in Tutorials
In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.If you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design…
Read More: Styling HTML Lists with CSS: Techniques and Resources
-
Smoother @font-face embedding in IE 7 & 8
Posted: 2 years ago in Tutorials
You could say I’ve become somewhat obsessed with @font-face embedding over the past few months. I’ve most certainly fell head over heels for the @font-face generator from fontsquirrel.com see the recap below.One thing however that has always bothered me is IE7 and IE8′s rendering of embedded fonts, so today with IE tester at hand and google ready to get wild I vowed to come up with a solution and I think I may just have…
Read More: Smoother @font-face embedding in IE 7 & 8
-
CSS Variables with PHP
Posted: 2 years ago in Tutorials
When people are asked about features they would like to CSS, “variables” always seems to come up. Whether or not this is a good idea is still something I personally haven’t decided on, but I’d lean toward yes. Regardless, using PHP, it is trivially easy to use variables in CSS. This is certainly not a new trick, but I’ve never specifically covered it so I thought I ought to…
Read More: CSS Variables with PHP
-
Z-Index And The CSS Stack: Which Element Displays First?
Posted: 2 years ago in Tutorials
Let’s start with a quick review. If you read the previous css positioning post you can probably skip to the next section.A web page is a two dimensional plane with width and height. z-index is the missing third dimension, depth, with an axis that moves in and out of your monitor. z-index allows us to break out of the plane of the page and stack elements on top of each other…
Read More: Z-Index And The CSS Stack: Which Element Displays First?
-
Create a Button with Hover and Active States using CSS Sprites
Posted: 2 years ago in Tutorials
Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design…
Read More: Create a Button with Hover and Active States using CSS Sprites
-
Pushing Your Buttons With Practical CSS3
Posted: 2 years ago in Tutorials
CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons…
Read More: Pushing Your Buttons With Practical CSS3
-
Radioactive Buttons with CSS Animations and RGBa
Posted: 2 years ago in Tutorials
Using CSS animations in Safari, we’re able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome. Don’t see the radioactive buttons? Be sure you’re in Safari before getting underway…
-
Working With RGBA Colour
Posted: 2 years ago in Tutorials
We’re all familiar with specifying colours in CSS using by defining the mix of red, green and blue light required to achieve our tone. This is fine and dandy, but whatever values we specify have one thing in common – the colours are all solid, flat, and well, a bit boring. CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop…
Read More: Working With RGBA Colour