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

Cont

act

slideshare.net/chrisdavidmillschrisdavidmills@gmail.com@chrisdavidmills

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

Thanks!

chrisdavidmills@gmail.com@cmills@mozilla.com

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