CSS Lab

Rounded Corners CSS3 and Old CSS Method

CSS3 Method

Life got easier with border-radius in CSS3. No extra markup. Simply set the border-radius to 6px. Box can be changed to any color and sit on any BG color.

CSS2 Method

Adjustable (width & height) Rounded Corner Box

This method uses an image of a gray box. You can adjust the width of box to a certain point, then it breaks. The image would need to be enlarged accordingly. Also, to change the box color you would need to update the image. Fortunately, this version allows you to change the BG color the box sits on without having to update the image.

Fluid Rounded Corner Box

This method uses an image that is a transparent square with rounded corners on a white background. It is extremely difficult to create rounded corners on a transparent BG so you have the ability to change the background color. In this version, it is necessary to update the BG color the image to match the BG color the box sits on.

---

CSS3 Flex Box

Reference: Flex-Box Explained

I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

• Floats? Where we're going, we don't need floats.
• Layouts that were challenging before are more sensible.
• We can create true flexible layouts, and the browser will do the calculations for us.

---

CSS2 vs CSS3 Box Model

Reference: Box Model Wiki

In Firefox and Webkit, this box will grow to include the border, margin and padding in addition to the set width of the box. Set to width 400px box, this box is now 462px wide. (400px + 20px + 20px + 10px + 10px 1px +1px)

In older versions of IE, it does not count the margin and the content shrinks in width so the box remains 400px. In IE6+, it has been changed as in other browsers.

CSS3 Box-Sizing
(box-sizing:content-box) sets the behavior of width and height as specified by CSS2.1. The padding and border of the element are laid out and drawn outside the specified width and height.

(box-sizing:border-box) sets the content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties

---

IE Conditional Comments

Reference: CSS Specific for Internet Explorer

IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). Below are some sample code to target different versions of Internet Explorer:

            	
                    <!--[if IE 8]>
                    <style type="text/css">
                        /* css for IE 8 */
                    </style>
                    <![endif]-->
                    
                    <!--[if lt IE 8]>
                        <link href="ie7.css" rel="stylesheet" type="text/css" />
                <![endif]-->
                
            

---

Equal Heights Pure CSS

Equal Column Heights

This is an example of CSS equal height columns.

---

CSS Selectors List

Reference: W3schools.com CSS Selectors List

In CSS, selectors are patterns used to select the element(s) you want to style such as P, STRONG, EM etc. Here is a list of CSS selectors.

---

Link with text centered vertically and horizontally

Faux Button Link

---

CSS Inheritance: Font Size

Font size is 2em not .5em. The class .robot is overridden because the id zombie specifically tells p tags to get 2em font size.

            	
                    #zombie p {font-size:2em;}
                    div p.robot {font-size:.5em;}
                    
                    <div id="zombie">
                        <p class="robot">Font size is 2em not .5em</p>
                    </div>