word-break: break-all; word-wrap: break-word;
Category Archives: 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 […]
Resolution and media queries
You can actually query the resolution of a device via a media query. @media resolution. Here are more details about it: http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/
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 […]
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 […]
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 […]
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: […]
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: […]
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 […]
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.