getting rid of images with css
DESCRIPTION
For years when designing web sites we'e had to use a lot of of image files--a lot!--for anything and everything. And I’m moving beyond content images here, thinking more about background images for textures, gradients, interesting borders, rounded corners, transparency, drop shadows, interesting fonts, and more. This contributed to the whole experience being complicated, inflexible, and inefficient, with loads of assets and HTTP requests to deal with. Fast forward to the modern day, and the good news is that CSS now provides us with a lot of new tools for programmatically creating images for many common uses, making things a whole lot easier to handle. In this talk Chris Mills will touch upon a number of more widely supported featured such as gradients, border-radius, border-image, and box-shadow, before moving on to what we can expect a bit further down the line with more nascent features like shaders, filters and masks. In addition, he will also briefly discuss what can be done about older browsers that do not support such features.TRANSCRIPT
Getting rid of images with CSS
CSS Summit 2013 // Chris Mills, Mozilla
Tuesday, 23 July 13
Who a
m I? Senior tech writer @
Formerly tech writer & evangelist @ HTML, CSS, JS and Mobile enthusiastAccessibility whingebagEducation agitatorHeavy metal geek dad
Tuesday, 23 July 13
Images bad?
Tuesday, 23 July 13
Img b
ad?
Images are our friends!But they are bloaty/HTTP heavy (especially with RWD & hi-res devices)InflexibleAnd result in spaghetti markup/CSS
Tuesday, 23 July 13
Corn
ers! Flexible rounded corners are a pain
Tuesday, 23 July 13
Corn
ers!
<div class="roundedBox" id="type4"> <p>My content.</p> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div></div>
Tuesday, 23 July 13
Corn
ers! .roundedBox {position:relative; padding:17px;
margin:10px 0;}.corner {position:absolute; width:17px; height:17px;}#type4 {background-color:#CCACAE; border:1px solid #AD9396;}#type4 .corner {background-image:url(../images/corners-type4.gif);}#type4 .topLeft {top:-1px;left:-1px;}#type4 .topRight {top:-1px; right:-1px;}#type4 .bottomLeft {bottom:-1px; left:-1px;}#type4 .bottomRight {bottom:-1px; right:-1px;}
Tuesday, 23 July 13
no fo
nts
Lack of fontsMeant using image replacement techniquesSiFR, Cufon, etc.Text not selectable...
Tuesday, 23 July 13
No fo
nts
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; background-image: url(text-graphic.png);}
Tuesday, 23 July 13
shad
ows Background images, lots of CSS/HTML
Tuesday, 23 July 13
Shad
ows
<div class="outerpair2"> <div class="shadowbox"> <div class="innerbox"> <img width="400px" height="315px" alt="" src="kitty.jpg"> </div> </div></div>
Tuesday, 23 July 13
Shad
ows .outerpair2 {
background: url("lowerleftfade.png") no-repeat scroll left bottom transparent; padding-top: 8px; padding-left: 8px;}
.shadowbox { background: url("shadow.png") repeat scroll right bottom transparent;}
Tuesday, 23 July 13
Shad
ows .innerbox {
position: relative; left: -8px; top: -8px;}
.shadowbox img { border: 10px solid rgb(255, 255, 255); vertical-align: bottom;}
Tuesday, 23 July 13
grad
ients Flexible to a certain degree with images,
depending on direction.
Tuesday, 23 July 13
grad
ients
<div class="grad"> <h2>Image gradient example</h2> <p>Applying an image background gradient</p> <p>This is kinda cool</p></div>
Tuesday, 23 July 13
grad
ients
.grad { background: #000 url(gradient.png) 0% 0% repeat-x; color: #ffffff; padding: 5px;}
Tuesday, 23 July 13
OK, I think you get the point...
Tuesday, 23 July 13
New toys
Tuesday, 23 July 13
CSS3
etc.
Maybe this talk shoulda been called “Getting rid of images with CSS, SVG and some other cool shit”New features that make our lives easier
Tuesday, 23 July 13
Transparent colours
Tuesday, 23 July 13
opac
ity Programmatic transparent colours, via RGBa, HSLa, opacityBut not in IE < 9Specify a solid fallback colourOr try a polyfill, like CSS3PIE
Tuesday, 23 July 13
Web fonts
Tuesday, 23 July 13
web f
onts Include whatever fonts you want
Great cross browser support, even back to IE5.5Use the bulletproof @font-face syntaxUse a hosted service, or generate it via fontsquirrel.com
Tuesday, 23 July 13
web f
onts @font-face {
font-family: 'exoticamedium';
src: url('fonts/exotica-webfont.eot');
src: url('fonts/exotica-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/exotica-webfont.woff') format('woff'),
url('fonts/exotica-webfont.ttf') format('truetype'),
url('fonts/exotica-webfont.svg#exoticamedium') format('svg');
font-weight: normal;
font-style: normal;
}
Tuesday, 23 July 13
web f
onts
Great for iconsInsert using generated content for maximum code cleanliness
Tuesday, 23 July 13
web f
onts
<ul> <li><a href="#" data-icon="H">Home</a></li> <li><a href="#" data-icon="E">Inbox</a></li> <li><a href="#" data-icon="r">Games</a></li> <li><a href="#" data-icon="b">Chat</a></li> </ul>
Tuesday, 23 July 13
web f
onts ul a:before {
font-family: 'heydings_iconsregular'; content: attr(data-icon); position: absolute; top: 0px; left: 60px; font-size: 2rem; color: black; text-shadow: 2px 2px 1px rgba(0,0,0,0.5);}
Tuesday, 23 July 13
web f
onts File size can still be problematic
Create font subset using fontforgeOr use unicode-range to limit the characters downloadedhttp://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/
Tuesday, 23 July 13
web f
onts
@font-face { font-family: myFont; src: local(myFont), url(/fonts/myFont.otf); unicode-range: U+000-49F, U+2000-27FF;}
Tuesday, 23 July 13
border-radius
Tuesday, 23 July 13
Corn
ers The basics are very simple
Although you can actually do quite a lot with ithttp://lea.verou.me/humble-border-radius/Works in IE9+; polyfill with CSS3PIE
Tuesday, 23 July 13
Tuesday, 23 July 13
New backgrounds
Tuesday, 23 July 13
back
grnd
GradientsMultiple backgroundsborder-image
Tuesday, 23 July 13
grad
ients
Programmatic gradients rock!So much more flexible than imagesLinear and radial in IE10+; conical gradients planned
Tuesday, 23 July 13
linea
r background-image: linear-gradient(to bottom right, rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));
Tuesday, 23 July 13
linea
r background-image: repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px,rgb(255,0,0) 40px);
Tuesday, 23 July 13
radi
alradial-gradient(circle at 50% 50%,rgb(75, 75, 200),rgb(0, 0, 75));
Tuesday, 23 July 13
radi
alrepeating-radial-gradient(circle at 50% 50%, rgb(0, 0, 153), rgb(0, 0, 250) 15px, rgb(0, 0, 153) 30px);
Tuesday, 23 July 13
grad
ients Provide solid colour fallback; Polyfill
with CSS3PIEhttp://dev.opera.com/articles/view/css3-linear-gradients/http://dev.opera.com/articles/view/css3-radial-gradients/
Tuesday, 23 July 13
grad
ients
You can do some awesome creative stuff with gradientsCSS3 patterns galleryhttp://lea.verou.me/css3patterns/
Tuesday, 23 July 13
grad
ients background-image:
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);background-size: 110px 110px;background-color: #C8D3A7;background-position: 0 0, 55px 55px;
Tuesday, 23 July 13
Tuesday, 23 July 13
mult
iple Multiple backgrounds go a long way
towards eradicating markup cruftSeparate background values via commasWorks in IE9+, provide fallback declaration for older browsersMix gradients and images happily
Tuesday, 23 July 13
Mult
iple
body {background: url(../images/castle.png) top left no-repeat;
background: url(../images/castle.png) top left no-repeat, url(../images/clouds.png) top right no-repeat, linear-gradient(top right, #3B6498, #C1CDDB);}
Tuesday, 23 July 13
bord
er Border images are really interestingIE10 + other browsers support it
Tuesday, 23 July 13
bord
er article { width: 50%; height: 300px; border: 30px solid black; border-image:url(border.png) 30 fill round;}
Tuesday, 23 July 13
Tuesday, 23 July 13
Shadows
Tuesday, 23 July 13
shad
ows Nice, flexible programmatic shadows -
yum!box-shadow IE9+, text-shadow IE10+Multiple shadows possibleExtruded, embossed, outlined, glowing, neon, 3D, vintage, etc.
Tuesday, 23 July 13
text
shdw
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
Tuesday, 23 July 13
Tuesday, 23 July 13
box s
hdw
box-shadows also have options available for inset shadows, and wider spreadUseful for many things, particularly buttons that press in on :hover/:active!
Tuesday, 23 July 13
box s
hdw background: linear-gradient(to bottom, #7B72D8,
#2618B1);color: white;text-shadow: 1px 1px 1px black;border: 1px solid rgba(0,0,0,0.1);box-shadow: 0px 5px 5px rgba(0,0,0,0.4), inset 0px 7px 3px rgba(255,255,255,0.2), inset 0px -7px 3px rgba(0,0,0,0.2);
Tuesday, 23 July 13
Tuesday, 23 July 13
SVG
Tuesday, 23 July 13
SVG SVG comparatively unknown amongst
web designers(IE historically refusing to support it is a large part of it)But it is awesome, in so many ways
Tuesday, 23 July 13
SVG
Create vector images using markupScales well, therefore great for RWD issuesEmbed directly into HTML, so cut down on HTTP requestsCan manipulate using CSS and JavaScript
Tuesday, 23 July 13
SVG
IE<9 doesn’t support it, but this can be polyfilled, e.g. with Raphaël or SVG WebModern browsers have pretty good support.You can do some really interesting stuff, like filters and masks
Tuesday, 23 July 13
SVG
You needn’t be an expert to use it!Export to SVG using Illustrator or InkscapeThen grab the code and put it in your HTMLYou can also embed it using <object>, <img>, background-image ...
Tuesday, 23 July 13
SVG ...but you can’t directly mess with the
individual elements using CSS this way!
Tuesday, 23 July 13
<div id="sun"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="240px" height="240px" viewBox="0 0 460.832 460.8" enable-background="new 0 0 460.832 460.8" xml:space="preserve"> <g> <path fill-rule="evenodd" clip-rule="evenodd" d="M230.432,8.64c9.772,0.757,13.702,10.06,12.96,17.28 etc.....</div>
SVG
Tuesday, 23 July 13
svg path { fill: #000000; transition: 1s all;}
svg:hover path:nth-of-type(even) { fill: #ff0000;}
svg:hover path:nth-of-type(odd) { fill: #a60000;}
SVG
Tuesday, 23 July 13
Canvas
Tuesday, 23 July 13
Canv
as<canvas> gets an honourable mentionYes, umm, it’s an imageBut it’s generated by JavaScriptYou can draw + animate stuff, just like with SVG/CSSAnd you can polyfill, e.g. with ExCanvas
Tuesday, 23 July 13
Tuesday, 23 July 13
Tuesday, 23 July 13
Canv
as But <canvas> isn’t the best for this kind of stuffEasier to use SVG/CSSAnd <canvas> text is inaccessible
Tuesday, 23 July 13
Canv
as<canvas> is much better for data analysis and visualisationAnd other things that require logic, such as gamesAlso good for on-the-fly image processing via drawImage() and toDataURL()
Tuesday, 23 July 13
Tuesday, 23 July 13
Tuesday, 23 July 13
Canv
as http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/http://codepo8.github.io/canvas-masking/
Tuesday, 23 July 13
Future echoes
Tuesday, 23 July 13
CSS3
etc. Neat stuff on the way from the CSS
WG / FXTFSome SVG stuff being brought over to CSSNew ways to deal with images as well as create visuals
Tuesday, 23 July 13
frag
ment
sbackground-image: image('image.png#xywh=15,30,150,120');
Tuesday, 23 July 13
obje
ct-f
itimg { width: 300px; height: 300px; … object-fit: contain;}
Tuesday, 23 July 13
obje
ct-f
it
Tuesday, 23 July 13
filte
rs filter: blur(10px);
filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
Tuesday, 23 July 13
Lea Verou:http://dabblet.com/gist/5831451
Tuesday, 23 July 13
blen
ding Blend modes also on the way
Like you’ve abused in Photoshophttp://maxvujovic.blogspot.co.uk/2013/04/all-blend-modes-for-css-custom-filters.html
Tuesday, 23 July 13
blen
ding mix-blend-mode: multiply;
Tuesday, 23 July 13
blen
ding background-image: linear-gradient(to right,
#000000 0%,#ffffff 100%), url('ducky.png');background-blend-mode: difference, normal;
Tuesday, 23 July 13
mask
s CSS masks were a proprietary WebKit feature for quite a whileNow on their way in the W3Chttp://thenittygritty.co/css-masking
Tuesday, 23 July 13
mask
smask-image: url(mouse.png);mask-repeat: no-repeat;mask-position: center;mask-clip: border-box;etc.
Tuesday, 23 July 13
Tuesday, 23 July 13
I see dead browsers
Tuesday, 23 July 13
dead
!!! I’ve already looked at polyfills and fallbacks for old browsersIn general you need to do what is best, project by projectIs client happy with a different look in older browsers?
Tuesday, 23 July 13
mode
rnizr Modernizr is often a good option
Feature detect support for your experimental featuresThen provide different CSS/JS where support is lackingFor a more tailored experience
Tuesday, 23 July 13
Cred
itsBackground grunge image: themescompany.comFonts: Carbon type, Bebas Neue, Dakota, Andale monoThanks to all the amazing people whose work I’ve referenced
Tuesday, 23 July 13