We’ll be discussing CSS positions and floats as well as what the differences are and when it’s best to use them. Both floats and positions deal with the relationship of elements between each other. Without these, padding and margins would be ineffectual…
Archive for March, 2010
-
CSS in Depth: Floats and Positions
Posted: 2 years ago in Tutorials
Read More: CSS in Depth: Floats and Positions
-
Meet the Pseudo Class Selectors
Posted: 2 years ago in Tutorials
Pseudo class selectors CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover. They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2, it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support of them. The link-related ones work but not much else. Let’s take a brief look at each one of them. Don’t worry, there aren’t that many…
Read More: Meet the Pseudo Class Selectors
-
Curtis CSS Typeface
Posted: 2 years ago in Articles
Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14. This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning…
Read More: Curtis CSS Typeface
-
Easier print CSS coding using Firebug and Web Developer Toolbar
Posted: 2 years ago in Tutorials
Print stylesheets are an aspect of front-end engineering that rarely get any love, and they’ll often be ignored until the last possible moment before launching a site. Sometimes they might even be forgotten altogether, but you should always make time to write at least a basic stylesheet that formats things neatly, and reveals any elements that only make sense on paper while hiding things like interactive controls that will be useless when printed. Here’s a useful tutorial to speed up the CSS print stylesheet process…
Read More: Easier print CSS coding using Firebug and Web Developer Toolbar
-
47 CSS Tips & Tricks To Take Your Site To The Next Level
Posted: 2 years ago in Code
Here are 47 CSS Tips, Tricks, and Techniques to add to your CSS toolbox. Some you may be familiar with while others may be new to you. The tips below span from beginner to more advanced CSS code. Hopefully you’ll find a few techniques that will be both new and useful to you and perhaps some will find their way into your next project…
Read More: 47 CSS Tips & Tricks To Take Your Site To The Next Level
-
Get to Grips with CSS Pseudo-Elements
Posted: 2 years ago in Tutorials
Pseudo elements include :first-line, :first-letter, :before and :after. In the CSS specification, W3C define pseudo-elements like this:
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document…
Mmm, now I don’t know about you but that description makes my head hurt. Let’s take a closer look at pseudo-elements and see how we can use them in our own projects.
-
Understanding CSS Style Precedence
Posted: 2 years ago in Tutorials
Have you ever run into the situation where you’re trying to apply a css style to an element, but it won’t take? Your page it seems to be ignoring your CSS, but you can’t figure out why. Maybe you found yourself using !important or adding an inline style as a last resort. There’s a good chance the problem you encountered was one of CSS precedence.
A better understanding of which CSS styles take precedence can lead to less frustration with css, cleaner code, and more organized css so let’s look at three things that control which css rule applies to a given html element…
Read More: Understanding CSS Style Precedence
-
Online CSS3 Generator
Posted: 2 years ago in Tools
Online CSS3 generator app. Pick an option like rounded corners, text shadow, box shadow, RGBa etc and you’ll get the rules for the CSS. Very handy…
Read More: Online CSS3 Generator
-
Opera Logo with CSS
Posted: 2 years ago in Articles
The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers…
Read More: Opera Logo with CSS
-
Understanding CSS Attribute Selectors
Posted: 2 years ago in Tutorials
CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. But did you know you can select an element based on the rel attribute as well? That is known as an attribute selector. There is a lot more to attribute selectors so let’s look closer at all the different options and try to cover some “real world” scenarios on when they might be useful…
Read More: Understanding CSS Attribute Selectors