Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | lennart-schoors |
View: | 106 times |
Download: | 0 times |
Look ma,NO IMAGES!
Lennart Schoors
Me
.web designer at Massive Mediahttp://massivemedia.eu
. personal site at http://lensco.be
.@lensco
Somewhere last year, all the craze began...
http://desandro.com/articles/opera-logo-css
http://nicolasgallagher.com/pure-css-social-media-icons/
http://cordobo.com/1630-internet-explorer-pure-css-logo
http://graphicpeel.com/cssiosicons
http://lensco.be/2010/04/04/css-world-clocks
Nice gimmick to show off your 1337 skillz !!1!
But there's some real value here as well...
Why use CSS to make visuals?
1. Performance
. smaller overal filesize (but not always, mind you!)
. the iOS icons example:56K (not g-zipped)
. fewer HTTP requests
2. Maintainability
.everything in one place
.no need to open an editor and resave a file just to tweak a color or shape
3. Resolution independence
. full page zooming
.blurry images vs crisp HTML + CSS
Examples from bricss.net
How to: Shapes
Rectangles
I assume you already know how to do this, right?
Circles/ellipses/rounded rects
-webkit-border-radius -moz-border-radius border-radius
Example: Bricss logo
Example: Bricss logo
Triangles
border-bottom: 20px solid yellow;border-left: 10px solid transparent;border-right: 10px solid transparent;
Triangles
border-top: 20px solid yellow;border-right: 20px solid transparent;
Beware of bad anti-aliasing!
Triangles: using gradients
background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.5,transparent), color-stop(.5, yellow)),-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.5,transparent), color-stop(.5, yellow)),-webkit-gradient(linear, 0 0, 100% 0, from(yellow), to(yellow));
background: -moz-linear-gradient(-45deg, transparent 50%, yellow 50%),-moz-linear-gradient(45deg, transparent 50%, yellow 50%),-moz-linear-gradient(yellow, yellow);
background-position: 0 0, 0 100%, 10px 0;
background-size: 10px 50%, 10px 50%, 100% 100%;
Better anti-aliasing, but verbose & cumbersome!
How to: Generating
HTML elements
.div, span, p, a, ... whatever suits best
. try to avoid extra/empty/unnecessary elements
Generated content
. :before & :after pseudo-selectors
div:after {content: "";position: absolute;/* other styles */}
Example: date ribbon
.date { background: #fc0; position: relative; } .date:before, .date:after { content: " "; position: absolute; border-top: 5px solid #fc0; border-left: 15px solid transparent; bottom: -5px; right: 0; } .date:after { border-left: none; border-right: 15px solid transparent; right: auto; left: 0; }
How to: Manipulating
Masks
square mask: container element with overflow: hidden
Transforms
. translate/translateX/translateY
. rotate
rotate(-45deg) = +
How to: Effects
CSS3 FTW
.gradients
.box-shadow
.box-reflect
. ...
http://matthamm.com/box-shadow-curl.html
http://nicolasgallagher.com/css-drop-shadows-without-images/
Browser support?
Your good friend Internet Explorer.
.Various levels of supporttriangles: IE6, border-radius: IE9, ...
. If you only aim for IE9+ support, go nuts.
.Google dropping support for IE7 this summer.
.Do websites have to look the same in every browser?
.My motto: If it works, it works.™
That’s all folks!
Read on at http://lensco.be & http://bricss.net
Questions?