• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Getting rid of images with CSS
 

Getting rid of images with CSS

on

  • 1,524 views

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

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.

Statistics

Views

Total Views
1,524
Views on SlideShare
1,524
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Getting rid of images with CSS Getting rid of images with CSS Presentation Transcript

    • 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