KEMBAR78
Getting rid of images with CSS | PDF
Getting rid of
images with CSS
CSS Summit 2013 // Chris Mills, Mozilla
Tuesday, 23 July 13
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
Contact
slideshare.net/chrisdavidmills
chrisdavidmills@gmail.com
@chrisdavidmills
Tuesday, 23 July 13
Images bad?
Tuesday, 23 July 13
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
Corners!Flexible rounded corners are a pain
Tuesday, 23 July 13
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
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
nofonts Lack of fonts
Meant using image replacement
techniques
SiFR, Cufon, etc.
Text not selectable...
Tuesday, 23 July 13
Nofonts.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url(text-graphic.png);
}
Tuesday, 23 July 13
shadowsBackground images, lots of CSS/HTML
Tuesday, 23 July 13
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
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
Shadows.innerbox {
position: relative;
left: -8px;
top: -8px;
}
.shadowbox img {
border: 10px solid rgb(255, 255, 255);
vertical-align: bottom;
}
Tuesday, 23 July 13
gradientsFlexible to a certain degree with images,
depending on direction.
Tuesday, 23 July 13
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
gradients.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
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
Transparent colours
Tuesday, 23 July 13
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
Web fonts
Tuesday, 23 July 13
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
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
webfonts
Great for icons
Insert using generated content for
maximum code cleanliness
Tuesday, 23 July 13
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
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
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
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
border-radius
Tuesday, 23 July 13
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
Tuesday, 23 July 13
New backgrounds
Tuesday, 23 July 13
backgrnd
Gradients
Multiple backgrounds
border-image
Tuesday, 23 July 13
gradients Programmatic gradients rock!
So much more flexible than images
Linear and radial in IE10+; conical
gradients planned
Tuesday, 23 July 13
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
linearbackground-image: repeating-linear-
gradient(70deg,
rgb(255,0,0),
rgb(100,0,0) 20px,
rgb(255,0,0) 40px);
Tuesday, 23 July 13
radialradial-gradient(circle at 50% 50%,
rgb(75, 75, 200),
rgb(0, 0, 75));
Tuesday, 23 July 13
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
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
gradients You can do some awesome creative
stuff with gradients
CSS3 patterns gallery
http://lea.verou.me/css3patterns/
Tuesday, 23 July 13
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
Tuesday, 23 July 13
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
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
border
Border images are really interesting
IE10 + other browsers support it
Tuesday, 23 July 13
borderarticle {
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
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
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
Tuesday, 23 July 13
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
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
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 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
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
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
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
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
Tuesday, 23 July 13
Tuesday, 23 July 13
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
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
Tuesday, 23 July 13
Tuesday, 23 July 13
Canvas 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
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
fragmentsbackground-image:
image('image.png#xywh=15,30,150,120');
Tuesday, 23 July 13
object-fitimg {
width: 300px;
height: 300px;
…
object-fit: contain;
}
Tuesday, 23 July 13
object-fit
Tuesday, 23 July 13
filters
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
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
blendingmix-blend-mode: multiply;
Tuesday, 23 July 13
blendingbackground-image: linear-gradient(to right,
#000000 0%,#ffffff 100%), url('ducky.png');
background-blend-mode: difference, normal;
Tuesday, 23 July 13
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
masks
mask-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 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
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
Thanks!
chrisdavidmills@gmail.com
@cmills@mozilla.com
Tuesday, 23 July 13
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

Getting rid of images with CSS