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.

1. Getting rid of
images with CSS
CSS Summit 2013 // Chris Mills, Mozilla
Tuesday, 23 July 13

2. WhoamI? Senior tech writer @
Formerly tech writer & evangelist @
HTML, CSS, JS and Mobile enthusiast
Accessibility whingebag
Education agitator
Heavy metal geek dad
Tuesday, 23 July 13

3. Contact
slideshare.net/chrisdavidmills
chrisdavidmills@gmail.com
@chrisdavidmills
Tuesday, 23 July 13

4. Images bad?
Tuesday, 23 July 13

5. Imgbad? Images are our friends!
But they are bloaty/HTTP heavy
(especially with RWD & hi-res devices)
Inflexible
And result in spaghetti markup/CSS
Tuesday, 23 July 13

6. Corners!Flexible rounded corners are a pain
Tuesday, 23 July 13

7. Corners!<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

8. Corners!.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

9. nofonts Lack of fonts
Meant using image replacement
techniques
SiFR, Cufon, etc.
Text not selectable...
Tuesday, 23 July 13

10. Nofonts.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url(text-graphic.png);
}
Tuesday, 23 July 13

11. shadowsBackground images, lots of CSS/HTML
Tuesday, 23 July 13

12. Shadows<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

13. Shadows.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

14. Shadows.innerbox {
position: relative;
left: -8px;
top: -8px;
}
.shadowbox img {
border: 10px solid rgb(255, 255, 255);
vertical-align: bottom;
}
Tuesday, 23 July 13

15. gradientsFlexible to a certain degree with images,
depending on direction.
Tuesday, 23 July 13

16. gradients<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

17. gradients.grad {
background: #000 url(gradient.png) 0% 0%
repeat-x;
color: #ffffff;
padding: 5px;
}
Tuesday, 23 July 13

18. OK, I think you get the point...
Tuesday, 23 July 13

19. New toys
Tuesday, 23 July 13

20. CSS3etc. 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

21. Transparent colours
Tuesday, 23 July 13

22. opacity Programmatic transparent colours, via
RGBa, HSLa, opacity
But not in IE < 9
Specify a solid fallback colour
Or try a polyfill, like CSS3PIE
Tuesday, 23 July 13

23. Web fonts
Tuesday, 23 July 13

24. webfonts Include whatever fonts you want
Great cross browser support, even
back to IE5.5
Use the bulletproof @font-face syntax
Use a hosted service, or generate it via
fontsquirrel.com
Tuesday, 23 July 13

25. webfonts@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

26. webfonts
Great for icons
Insert using generated content for
maximum code cleanliness
Tuesday, 23 July 13

27. webfonts<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

28. webfontsul 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

29. webfonts File size can still be problematic
Create font subset using fontforge
Or use unicode-range to limit the
characters downloaded
http://24ways.org/2011/creating-
custom-font-stacks-with-unicode-
range/
Tuesday, 23 July 13

30. webfonts
@font-face {
font-family: myFont;
src: local(myFont), url(/fonts/myFont.otf);
unicode-range: U+000-49F, U+2000-27FF;
}
Tuesday, 23 July 13

31. border-radius
Tuesday, 23 July 13

32. Corners The basics are very simple
Although you can actually do quite a
lot with it
http://lea.verou.me/humble-border-
radius/
Works in IE9+; polyfill with CSS3PIE
Tuesday, 23 July 13

33. Tuesday, 23 July 13

34. New backgrounds
Tuesday, 23 July 13

35. backgrnd
Gradients
Multiple backgrounds
border-image
Tuesday, 23 July 13

36. gradients Programmatic gradients rock!
So much more flexible than images
Linear and radial in IE10+; conical
gradients planned
Tuesday, 23 July 13

37. linearbackground-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

38. linearbackground-image: repeating-linear-
gradient(70deg,
rgb(255,0,0),
rgb(100,0,0) 20px,
rgb(255,0,0) 40px);
Tuesday, 23 July 13

39. radialradial-gradient(circle at 50% 50%,
rgb(75, 75, 200),
rgb(0, 0, 75));
Tuesday, 23 July 13

40. radialrepeating-radial-gradient(circle at 50% 50%,
rgb(0, 0, 153),
rgb(0, 0, 250) 15px,
rgb(0, 0, 153) 30px);
Tuesday, 23 July 13

41. gradients Provide solid colour fallback; Polyfill
with CSS3PIE
http://dev.opera.com/articles/view/
css3-linear-gradients/
http://dev.opera.com/articles/view/
css3-radial-gradients/
Tuesday, 23 July 13

42. gradients You can do some awesome creative
stuff with gradients
CSS3 patterns gallery
http://lea.verou.me/css3patterns/
Tuesday, 23 July 13

43. gradientsbackground-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

44. Tuesday, 23 July 13

45. multiple Multiple backgrounds go a long way
towards eradicating markup cruft
Separate background values via commas
Works in IE9+, provide fallback
declaration for older browsers
Mix gradients and images happily
Tuesday, 23 July 13

46. Multiplebody {
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

47. border
Border images are really interesting
IE10 + other browsers support it
Tuesday, 23 July 13

48. borderarticle {
width: 50%;
height: 300px;
border: 30px solid black;
border-image:url(border.png) 30 fill round;
}
Tuesday, 23 July 13

49. Tuesday, 23 July 13

50. Shadows
Tuesday, 23 July 13

51. shadows Nice, flexible programmatic shadows -
yum!
box-shadow IE9+, text-shadow IE10+
Multiple shadows possible
Extruded, embossed, outlined, glowing,
neon, 3D, vintage, etc.
Tuesday, 23 July 13

52. textshdw
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

53. Tuesday, 23 July 13

54. boxshdw box-shadows also have options
available for inset shadows, and wider
spread
Useful for many things, particularly
buttons that press in on :hover/:active!
Tuesday, 23 July 13

55. boxshdwbackground: 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

56. Tuesday, 23 July 13

57. SVG
Tuesday, 23 July 13

58. 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

59. SVG Create vector images using markup
Scales well, therefore great for RWD
issues
Embed directly into HTML, so cut
down on HTTP requests
Can manipulate using CSS and
JavaScript
Tuesday, 23 July 13

60. SVG IE<9 doesn’t support it, but this can
be polyfilled, e.g. with Raphaël or SVG
Web
Modern browsers have pretty good
support.
You can do some really interesting
stuff, like filters and masks
Tuesday, 23 July 13

61. SVG You needn’t be an expert to use it!
Export to SVG using Illustrator or
Inkscape
Then grab the code and put it in your
HTML
You can also embed it using <object>,
<img>, background-image ...
Tuesday, 23 July 13

62. SVG
...but you can’t directly mess with the
individual elements using CSS this way!
Tuesday, 23 July 13

63. <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

64. 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

65. Canvas
Tuesday, 23 July 13

66. Canvas <canvas> gets an honourable mention
Yes, umm, it’s an image
But it’s generated by JavaScript
You can draw + animate stuff, just like
with SVG/CSS
And you can polyfill, e.g. with ExCanvas
Tuesday, 23 July 13

67. Tuesday, 23 July 13

68. Tuesday, 23 July 13

69. Canvas But <canvas> isn’t the best for this
kind of stuff
Easier to use SVG/CSS
And <canvas> text is inaccessible
Tuesday, 23 July 13

70. Canvas <canvas> is much better for data
analysis and visualisation
And other things that require logic,
such as games
Also good for on-the-fly image
processing via drawImage() and
toDataURL()
Tuesday, 23 July 13

71. Tuesday, 23 July 13

72. Tuesday, 23 July 13

73. Canvas http://dev.opera.com/articles/view/
svg-or-canvas-choosing-between-the-
two/
http://codepo8.github.io/canvas-
masking/
Tuesday, 23 July 13

74. Future echoes
Tuesday, 23 July 13

75. CSS3etc. Neat stuff on the way from the CSS
WG / FXTF
Some SVG stuff being brought over to
CSS
New ways to deal with images as well
as create visuals
Tuesday, 23 July 13

76. fragmentsbackground-image:
image('image.png#xywh=15,30,150,120');
Tuesday, 23 July 13

77. object-fitimg {
width: 300px;
height: 300px;
…
object-fit: contain;
}
Tuesday, 23 July 13

78. object-fit
Tuesday, 23 July 13

79. filters
filter: blur(10px);
filter: drop-shadow(.05em .05em .3em
rgba(0,0,0,.6));
Tuesday, 23 July 13

80. Lea Verou:
http://dabblet.com/gist/5831451
Tuesday, 23 July 13

81. blending Blend modes also on the way
Like you’ve abused in Photoshop
http://maxvujovic.blogspot.co.uk/
2013/04/all-blend-modes-for-css-
custom-filters.html
Tuesday, 23 July 13

82. blendingmix-blend-mode: multiply;
Tuesday, 23 July 13

83. blendingbackground-image: linear-gradient(to right,
#000000 0%,#ffffff 100%), url('ducky.png');
background-blend-mode: difference, normal;
Tuesday, 23 July 13

84. masks CSS masks were a proprietary WebKit
feature for quite a while
Now on their way in the W3C
http://thenittygritty.co/css-masking
Tuesday, 23 July 13

85. masks
mask-image: url(mouse.png);
mask-repeat: no-repeat;
mask-position: center;
mask-clip: border-box;
etc.
Tuesday, 23 July 13

86. Tuesday, 23 July 13

87. I see dead browsers
Tuesday, 23 July 13

88. dead!!! I’ve already looked at polyfills and
fallbacks for old browsers
In general you need to do what is best,
project by project
Is client happy with a different look in
older browsers?
Tuesday, 23 July 13

89. modernizr Modernizr is often a good option
Feature detect support for your
experimental features
Then provide different CSS/JS where
support is lacking
For a more tailored experience
Tuesday, 23 July 13

90. Thanks!
chrisdavidmills@gmail.com
@cmills@mozilla.com
Tuesday, 23 July 13

91. Credits Background grunge image:
themescompany.com
Fonts: Carbon type, Bebas Neue, Dakota,
Andale mono
Thanks to all the amazing people whose
work I’ve referenced
Tuesday, 23 July 13