A Call for ::nth-everything
With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it's siblings. :first-child:last-child:nth-child:nth-last-child :first-of-type:last-of-type:nth-of-type:nth-last-of-type :only-child:only-of-type We also get a couple of text-specific pseudo elements to help with our typography needs: ::first-letter::first-line That's a great start, but it really would be useful if we could extend the whole ":nth" concept to these typographic selectors. Please note that most of the code below is not valid. ::nth-line() / ::last-line / ::nth-last-line() We already have ::first-line, so to complete the set let's add ::nth-line(), ::last-line, and ::nth-last-line(). With these, we could select the first two lines of a poem to highlight. Or perhaps we could fade out the end of a passage. Relevant article by Adam Prescott. ::nth-letter() / ::last-letter() / ::nth-last-letter()
CSS1K
So What is This About? Back in 2003 (that's 9 years ago!) Dave Shea launched the CSS Zen Garden. It showcased what was possible with CSS-based designs, leading to an explosion in the use of CSS on the web. More recently, Peter van der Zee created JS1k, a competition to build cool applications with no more than 1 K of JavaScript. A lot has happened since the Zen Garden days, and today you can do almost anything with only CSS. Do we need that much? Participation Submissions must consist of only CSS Submissions may be up to 1 K (1024 bytes) minified Vendor prefixes are not counted to the total number of bytes – submit your code unprefixed and we will add necesssary prefixes Any external resources and images, including data URI's, @font-face and @import's, are forbidden The page does not have to look the same in every browser, but graceful degradation is encouraged The submitted code is licensed under the MIT License
CSS - Noupe
Total Recall #1: The Ultimate Collection of the Best Free Templates 2013 in PSD and HTML/CSS The past leaves its own mark, so it is very useful to look back early in the year, and put up a best-of-collection of remarkable things and resources. May be you have missed something valuable that might come in handy in the near future, probably something that will make your working process more efficient, time-saving and cost-effective. Read more
7 additional tips for CSS markup
1. Use a test page Make a test page that has: All of the common HTML elementsAll of your widgets and inline elements … on one page. Snippllr.com has a couple of test pages containing the major HTML elements: 2. Using a CSS reset helps because it eliminates the inconsistencies between browsers and forces you to specify all of the styles you want. 3.Order your rulesets into sections – generic to specific Use stylesheet rule order to define “base” and “special case” tags. For example, I have used the following sections: 4. Organize the rules into “base” widgets and “special case” if necessary. 5. Use indentation to organize the code – the first level of indentation is for sections, the second for widgets and the third for special cases of widgets or sub-widgets. For example: 6. 7.
float: center « Web Monkeys with Laserbeams
As a CSS enthusiast, one of the questions I have heard a lot over the past few years has been, “How do I float center?” To that, I have always replied simply, “you don’t,” and then I delve into what my colleague is actually trying to do. (Really, when was the last time you wanted content to flow around both sides of a block?) Today my answer has changed. Here are three block-display elements. There are no explicit widths set. Siblings have the same effective width and are centered. Alternatives First off, let’s not use a cannon to kill a mosquito. What if you do not have (or desire) explicit margins or an explicit width? The simple, three-step process Consider the following HTML fragment in this example. <div class="rowWrapper"><div class="row">Here are three block-display elements. For the sake of the example, I’ll give the wrapper a red border and the rows a blue border. 1. Wrap your blocks and float the wrapper. 2. 3. Naturally, you’ll want to remove any visible signs of the wrapper.
Live Demo
This page contains the markup of the 10 “templates” from the Rapid Prototyping page. You may want to use Firebug or another developer tool to alter the markup or content of these boxes, or even their container's width to see how each grid behaves. Simple row Module 2A Module 2 B Module 3A Module 3B Module 4A Module 4B Layout 1 .header. .content. .footer. Layout 2 Layout 3 For this demo, containers are styled as follow: In real life, border styling would not be set globally like this, so here we use CSS3 for “layout 1” to avoid polluting these demo boxes with extra hooks (in non CSS3 browsers, there is a 2px top/bottom border on the content box of “layout 1”).
