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
![Page 1: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/1.jpg)
Getting rid of images with CSS
CSS Summit 2013 // Chris Mills, Mozilla
Tuesday, 23 July 13
![Page 2: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/2.jpg)
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
![Page 4: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/4.jpg)
Images bad?
Tuesday, 23 July 13
![Page 5: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/5.jpg)
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
![Page 6: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/6.jpg)
Corn
ers! Flexible rounded corners are a pain
Tuesday, 23 July 13
![Page 7: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/7.jpg)
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
![Page 8: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/8.jpg)
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
![Page 9: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/9.jpg)
no fo
nts
Lack of fontsMeant using image replacement techniquesSiFR, Cufon, etc.Text not selectable...
Tuesday, 23 July 13
![Page 10: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/10.jpg)
No fo
nts
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; background-image: url(text-graphic.png);}
Tuesday, 23 July 13
![Page 11: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/11.jpg)
shad
ows Background images, lots of CSS/HTML
Tuesday, 23 July 13
![Page 12: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/12.jpg)
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
![Page 13: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/13.jpg)
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
![Page 14: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/14.jpg)
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
![Page 15: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/15.jpg)
grad
ients Flexible to a certain degree with images,
depending on direction.
Tuesday, 23 July 13
![Page 16: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/16.jpg)
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
![Page 17: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/17.jpg)
grad
ients
.grad { background: #000 url(gradient.png) 0% 0% repeat-x; color: #ffffff; padding: 5px;}
Tuesday, 23 July 13
![Page 18: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/18.jpg)
OK, I think you get the point...
Tuesday, 23 July 13
![Page 19: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/19.jpg)
New toys
Tuesday, 23 July 13
![Page 20: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/20.jpg)
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
![Page 21: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/21.jpg)
Transparent colours
Tuesday, 23 July 13
![Page 22: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/22.jpg)
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
![Page 23: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/23.jpg)
Web fonts
Tuesday, 23 July 13
![Page 24: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/24.jpg)
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
![Page 25: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/25.jpg)
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
![Page 26: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/26.jpg)
web f
onts
Great for iconsInsert using generated content for maximum code cleanliness
Tuesday, 23 July 13
![Page 27: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/27.jpg)
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
![Page 28: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/28.jpg)
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
![Page 29: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/29.jpg)
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
![Page 30: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/30.jpg)
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
![Page 31: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/31.jpg)
border-radius
Tuesday, 23 July 13
![Page 32: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/32.jpg)
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
![Page 33: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/33.jpg)
Tuesday, 23 July 13
![Page 34: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/34.jpg)
New backgrounds
Tuesday, 23 July 13
![Page 35: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/35.jpg)
back
grnd
GradientsMultiple backgroundsborder-image
Tuesday, 23 July 13
![Page 36: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/36.jpg)
grad
ients
Programmatic gradients rock!So much more flexible than imagesLinear and radial in IE10+; conical gradients planned
Tuesday, 23 July 13
![Page 37: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/37.jpg)
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
![Page 38: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/38.jpg)
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
![Page 39: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/39.jpg)
radi
alradial-gradient(circle at 50% 50%,rgb(75, 75, 200),rgb(0, 0, 75));
Tuesday, 23 July 13
![Page 40: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/40.jpg)
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
![Page 41: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/41.jpg)
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
![Page 42: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/42.jpg)
grad
ients
You can do some awesome creative stuff with gradientsCSS3 patterns galleryhttp://lea.verou.me/css3patterns/
Tuesday, 23 July 13
![Page 43: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/43.jpg)
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
![Page 44: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/44.jpg)
Tuesday, 23 July 13
![Page 45: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/45.jpg)
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
![Page 46: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/46.jpg)
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
![Page 47: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/47.jpg)
bord
er Border images are really interestingIE10 + other browsers support it
Tuesday, 23 July 13
![Page 48: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/48.jpg)
bord
er article { width: 50%; height: 300px; border: 30px solid black; border-image:url(border.png) 30 fill round;}
Tuesday, 23 July 13
![Page 49: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/49.jpg)
Tuesday, 23 July 13
![Page 50: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/50.jpg)
Shadows
Tuesday, 23 July 13
![Page 51: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/51.jpg)
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
![Page 52: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/52.jpg)
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
![Page 53: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/53.jpg)
Tuesday, 23 July 13
![Page 54: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/54.jpg)
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
![Page 55: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/55.jpg)
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
![Page 56: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/56.jpg)
Tuesday, 23 July 13
![Page 57: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/57.jpg)
SVG
Tuesday, 23 July 13
![Page 58: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/58.jpg)
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
![Page 59: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/59.jpg)
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
![Page 60: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/60.jpg)
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
![Page 61: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/61.jpg)
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
![Page 62: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/62.jpg)
SVG ...but you can’t directly mess with the
individual elements using CSS this way!
Tuesday, 23 July 13
![Page 63: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/63.jpg)
<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
![Page 64: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/64.jpg)
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
![Page 65: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/65.jpg)
Canvas
Tuesday, 23 July 13
![Page 66: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/66.jpg)
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
![Page 67: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/67.jpg)
Tuesday, 23 July 13
![Page 68: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/68.jpg)
Tuesday, 23 July 13
![Page 69: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/69.jpg)
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
![Page 70: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/70.jpg)
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
![Page 71: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/71.jpg)
Tuesday, 23 July 13
![Page 72: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/72.jpg)
Tuesday, 23 July 13
![Page 73: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/73.jpg)
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
![Page 74: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/74.jpg)
Future echoes
Tuesday, 23 July 13
![Page 75: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/75.jpg)
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
![Page 76: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/76.jpg)
frag
ment
sbackground-image: image('image.png#xywh=15,30,150,120');
Tuesday, 23 July 13
![Page 77: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/77.jpg)
obje
ct-f
itimg { width: 300px; height: 300px; … object-fit: contain;}
Tuesday, 23 July 13
![Page 78: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/78.jpg)
obje
ct-f
it
Tuesday, 23 July 13
![Page 79: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/79.jpg)
filte
rs filter: blur(10px);
filter: drop-shadow(.05em .05em .3em rgba(0,0,0,.6));
Tuesday, 23 July 13
![Page 80: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/80.jpg)
Lea Verou:http://dabblet.com/gist/5831451
Tuesday, 23 July 13
![Page 81: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/81.jpg)
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
![Page 82: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/82.jpg)
blen
ding mix-blend-mode: multiply;
Tuesday, 23 July 13
![Page 83: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/83.jpg)
blen
ding background-image: linear-gradient(to right,
#000000 0%,#ffffff 100%), url('ducky.png');background-blend-mode: difference, normal;
Tuesday, 23 July 13
![Page 84: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/84.jpg)
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
![Page 85: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/85.jpg)
mask
smask-image: url(mouse.png);mask-repeat: no-repeat;mask-position: center;mask-clip: border-box;etc.
Tuesday, 23 July 13
![Page 86: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/86.jpg)
Tuesday, 23 July 13
![Page 87: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/87.jpg)
I see dead browsers
Tuesday, 23 July 13
![Page 88: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/88.jpg)
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
![Page 89: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/89.jpg)
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
![Page 91: Getting rid of images with CSS](https://reader031.vdocuments.mx/reader031/viewer/2022012918/54c7c4854a795904038b4576/html5/thumbnails/91.jpg)
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