Equal Height Column Layouts with Borders and Negative Margins in CSS - Smashing Magazine. Advertisement “What? Another “Equal Height Columns” article? Enough already!” If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. 1. This layout will be built without a wrapper div: The basics We use the background of body and the border of one of the columns to create background colors that vertically fill the “row”. The markup <div id="header"><h2><a href="#">Header</a></h2><p>Lorem ipsum... Tip: always include links within your dummy text to spot stacking context issues.
About using body as a wrapper: always style html with a background to prevent the background of body from extending beyond its boundaries and be painted across the viewport.never style html with height: 100% or the background of body will be painted no taller than the viewport. The CSS What do these rules do exactly? So to prevent any float and margin collapsing issues we make all the main boxes block formatting contexts. and then added these rules: 2. 3. CSS3 presentation. Why is it a problem?
Maintenance hell Consumes more bandwidth More http requests ⇒ slower Style harder to understand Users get to see the page without them 1x1 png background images, if needed as a background background: url('/colors/black-0.75.png'); 1x1 png background images + extra markup, if needed for a solid border No known workarounds for many other cases RGBA and HSLA Can be used just like any other color, anywhere RGBA = RGB + Alpha, HSLA = HSL + Alpha Alpha = How transparent? (0-1) HSL is a more intuitive way to describe RGB And this is some text Firefox Fullsupport Google Chrome Opera Apple Safari Internet Explorer * Assumes latest beta 3 extra container elements 4 background images, one for each corner, or one huge image border-radius: 20px border-radius: 40px / 20px border-radius: 40px 10px border-radius: 40px 50% 0 border-radius: 40px 50% 0 10px Note: There are also individual properties for that, e.g. border-top-left-radius.
The Skinny on CSS Attribute Selectors. CSS has the ability to target HTML elements based on any one of their attributes.
You probably already know about classes and IDs. Check out this bit of HTML: <h2 id="title" class="magic" rel="friend">David Walsh</h2> This single element has three attributes: ID, class, and rel. To select the element in CSS, you could use an ID selector (#first-title) or a class selector (.magical). h2[rel="friend"] { } There is a lot more to attribute selectors though, so let's look closer at all the different options and try to cover some "real world" scenarios on when they might be useful. Attribute Exactly Equals Certain Value In the example we used above, the attribute of the h2 element was "friend". <h1 rel="external">Attribute Equals</h1> A great real world example of this is styling a blogroll. Quick Guide to Typography: Learn and Be Inspired. So you want to learn typography.
You’re in good company! Typophile culture is booming on the Internet. The font revolution is a digital phenomenon, and its players all converge on the web. Image credit. Thanks to the Internet, there has never been a better time to learn typography. More typography related posts we previously published: Start Here (And Stop Back Frequently) When you’re just getting your feet wet in the sea of type, these sites will act as your water wings: Myfonts One of the biggest typeface sites on the Internet, Myfonts curates an unparalleled catalog of well-organized fonts.
Counterspace This elegant site provides a classical foundation in typeface, from letter anatomy to type history. Thinking with Type The web companion to Ellen Lupton’s seminal book on typography as a design feature, this website has a high density of useful information about the history, present, and future of type. Making Your First Fonts Typeworkshop.com Elements of Typographic Style Applied to the Web.