Category: CSS3

CSS3: box-sizing property

A bit of background history.

1) IE5 and below, when you specify padding / border  in a div box, the content inside the box was shrinking to accommodate the extra space of those values. If you had a 200px box, with a 10px border and 10px margin, the content shrank to 180px.

2) IE6 and above, padding / border was pushing the box in the example above to 220px instead (the content reminds 200px, the rest is taken from outside the box, and push all the other elements around to make space for it.

3) Sometimes that doesn’t work well with fluid layout, and those extra pixels push stuff out of place, it would be ideal to tell DOM boxes to behave like IE5, pushing for extra pixels inwards instead of outwards their box limit.

4) Meet box-sizing property, since IE8 onwards you can do that:

box-sizing: content-box|border-box|inherit:

content-box is the default behavior (it pushes stuff out to make space for padding and borders)

border-box: in pushes stuff inside the DOM element, reducing its internal size, to accommodate padding and border. You can use it to make sure your fluid elements won’t push stuff out of place

Note: the default behavior for DOM elements is content-box, except when you don’t explicitly specify the width of an element, or if the element is set to be 100% width, tables and table elements are also using this “substractive behavior” by default.

 

CSS: Utilities

/* _____ UTILITIES _____ */
.oldSchool{width:750px;}
.gs960{width:960px;}
.liquid{width:auto;margin:0;}
.sidebar{width: 300px}
.clear{clear:both;}/* Layouts */
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:” x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x “;}
.line{*zoom:1;}/* Container of the grid, examples of use at https://github.com/stubbornella/oocss/wiki/Grids */
.unit{float:left;} /* Examples: class=”unit size1of2″ produce a cell 50% of the container size */
.unit-right{float: right} /* class=”unit size2of5 lastUnit” produce a cell 2/5 the size of the container, last in the row */
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}/* Grids */
.pn{padding: 0}
.ps{padding: 5px}
.pm{padding: 10px}
.pl{padding: 20px}
.mn{padding: 0}
.ms{padding: 5px}
.mm{padding: 10px}
.ml{padding: 20px}
.pts{padding-top:5px}
.ptm{padding-top:10px}
.ptl{padding-top:20px}
.prs{padding-right:5px}
.prm{padding-right:10px}
.prl{padding-right:20px}
.pbs{padding-bottom:5px}
.pbm{padding-bottom:10px}
.pbl{padding-bottom:20px}
.pls{padding-left:5px}
.plm{padding-left:10px}
.pll{padding-left:20px}
.mts{margin-top:5px}
.mtm{margin-top:10px}
.mtl{margin-top:20px}
.mrs{margin-right:5px}
.mrm{margin-right:10px}
.mrl{margin-right:20px}
.mbs{margin-bottom:5px}
.mbm{margin-bottom:10px}
.mbl{margin-bottom:20px}
.mls{margin-left:5px}
.mlm{margin-left:10px}
.mll{margin-left:20px}/* Spacing */
.bold{font-weight: bold;}
.nonbold{font-weight: normal;}
.font-24{font-size: 24px;}
.font-22{font-size: 22px;}
.font-20{font-size: 20px;}
.font-18{font-size: 18px;}
.font-16{font-size: 16px;}
.font-14{font-size: 14px;}
.font-12{font-size: 12px;}
.font-10{font-size: 10px;}
.white{color: #FFFFFF;}
.black{color:#000000;}
.seo-hide{text-indent: -9999px;}/* fonts */
.hidden {display: none;}
.invisible{visibility:hidden;} /* General tricks */
.rounded-corners-3 {-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;}
.rounded-corners-5 {-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 3px;border-radius: 3px;}
.rounded-top-corners-3{-moz-border-radius-topright: 3px;-webkit-border-top-right-radius: 3px;-khtml-border-top-right-radius: 3px;border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-webkit-border-top-left-radius: 3px;-khtml-border-top-left-radius: 3px;border-top-left-radius: 3px;}
.rounded-top-corners-5{-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;-khtml-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;-khtml-border-top-left-radius: 5px;border-top-left-radius: 5px;}
.rounded-bottom-corners-3{-moz-border-radius-bottomright: 3px;-webkit-border-bottom-right-radius: 3px;-khtml-border-bottom-right-radius: 3px;border-bottom-right-radius: 3px;-moz-border-radius-bottomleft: 3px;-webkit-border-bottom-left-radius: 3px;-khtml-border-bottom-left-radius: 3px;border-bottom-left-radius: 3px;}
.rounded-bottom-corners-5{-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-khtml-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-khtml-border-bottom-left-radius:
5px;border-bottom-left-radius: 5px;} /* rounded corners */
ul.vertical-tabs{margin: 0;padding-left: 0;list-style: none;}
ul.vertical-tabs li{float: left;} /* vertical tabs */

CSS3: Background gradients

The best way to produce your background gradients is using generators:
http://www.colorzilla.com/gradient-editor/
background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
The first argument (90 deg) indicates the direction of the gradient. By default is from top to bottom.
The second is the starting color, and the third (0%) is where the starting color start changing and diluting itself.
The second argument after the comma is the end color. The 50% indicates where in the container the color will end up being this #e4e4e4 color. In this case 50% because we have a third argument.
A third argument means we will have three colors in the background.
You can also get radial gradients:
background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
center indicates where the radial effect epicenter will be, you can also specify something like 25px 25px for example, to start 25px from the top, and 25px from the left
You can also specify repeating lines in the background, like:
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
This will produce radial lines every 5 px.
Here's an amazing gallery with some of the amazing background effects that can be accomplished with CSS:
http://lea.verou.me/css3patterns/

CSS3: box-shadow property

-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;

First setting is horizontal offset, second is vertical offset, third is blur, and fourth is color.

And actually, there is an optional argument, spread, between blur and color. It is used to control how long the shadow will spread.

If you want to create an extra border, you can use this one as follows: set blur to 0px, and spread to 1px (or the number of pixels you want your border to be.

If what you want to accomplish is inset shadows (shadows inside the box), use the following:

box-shadow:inset 0 0 40px #000000;

Notice the “inset” keyword, and 0 0 for horizontal and vertical offset.

You can use multiple shadows too:

box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1);

Notice how we are using Hue Saturation Lightness colors, as well as alpha for the last example.

CSS3: Multi-columns based on CSS

Given the following HTML:

<div id=”main” role=”main”>
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// LOTS MORE TEXT //
</p>
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// LOTS MORE TEXT //
</p>
</div>

#main {
column-width: 12em; /* Will produce several columns the size of 12em, automatically adjusting the number of columns as the viewport adjust */

column-gap: 2em;

column-rule: thin dotted #999;
}

or

#main {
column-count:  3; /* You will get 3 columns */
}

When you have long strings, sometimes your columns will break, in order to wrap the string content into two or more lines, you want to use:

word-wrap: break-word;

CSS3: Rounded corners

.round{
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}

This is the whole enchilada with yet more browsers support:

.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}

note that border radius don’t have to be circular, and you can modify the circumference of it: https://jsfiddle.net/ramiror/Lkvsar8o/1/

so this kind of definition is actually right and supported:

border-radius: 15px 45px 20px 20px / 15px 45px 20px 20px;

CSS: About Responsive Design and creating fluid layouts

What is it?

1) Fluid images

img
{
   max-width: 100%;
   height: auto;
}

2) Fluid grids

3) Media queries

Steps:

1) Code the site with pixels, as usual, to match the current comp or design provided.
2) Use a #wrapper envelop for the entire content, so you can set that as your anchor.
3) Once your page looks pixel perfect according to the design, change the width of #wrapper to any number between 90% and 100%, whatever looks good. You can also use the max-width at this point to avoid the content growing after a certain point where things gets distorted.
4) Now, start calculating the percentages of the elements inside #wrapper, using the formula: target ÷ context = result.
For example: if #wrapper width was 960px before converted to percentages, and .header element inside #wrapper was 940px:
width: 97.9166667%; /* 940 ÷ 960 it was width: 940px on a 960px container before */
5) You basically work your way in to all the elements. You don’t need to round the numbers! The more precision you give to the browser, the better.
6) For fonts: set thefont-size to 16px (it is the default anyways in most browsers), and then use the same formula to calculate the percentages everywhere else: target ÷ context = result
7) For images, all you need is to envelop them in containers that have percentages specified:
img,object,video,embed {
max-width: 100%;
}
So as the containers scale, so does the image. Notice that this can also be applied to video and embed tags. If a given image doesn’t look good after certain width, you can restrict the grow by setting max-width: [size where the image start getting distorted]

8) If any part or element in the page still looking distorted or bad, you can use media queries at this point to adjust either font sizes or spaces, to be able to get things back into place. An example below of how font sizes are adjusted in a nav menu to make them look fine in different viewports:

@media screen and (min-width: 1001px) and (max-width: 1080px) { #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}

9) A nice addition to a responsive page, to avoid the elements to “snap” to their new settings, as the page change viewports, is:

* {
transition: all 1s;
}

This will ease elements to their new settings as they readjust themselved.

CSS3: background gradients

You don’t need no stinky images:

background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);

Where: The first entry is for old browsers (solid color).
In between parentesis are the starting and ending colors.