Life's easy with Medialoot.

Unlimited access for only $14/mo.

5 Practical Ways to Replace Images with CSS3

5 Practical Ways to Replace Images with CSS3

Every web designer and developer should be aware of CSS3 and all of it's fantastic new properties that make life easier for web professionals. But we may not be truly making the most of the technology that is available to us.

For example a lot of designers and developers still rely very heavily on images for web elements, when they code their websites. This may be because it seems quick and easy, or it’s perhaps just the way that we are all used to doing things, afterall using images was once the only way to get gradients, shadows, rounded corners and other simple effects on the web.

But there are now very strong arguments to switch over to CSS3. For example reduced page load times, better scalability, and the flexibility to adjust dimensions and attributes without having to launch an image editor.

Browser compatibility with CSS3 is constantly improving, and more people are also starting to accept that if users have out-dated browsers, they simply aren’t going to be able to get the best experience on the web.

1. Buttons

Buttons are probably the most common of all web elements, and they usually consist of a rectanglular shape, with some label text on it. Common attributes for the base shape are rounded corners, and a linear gradient.

Here is an example of how we can use CSS3 properties to create a simple button:

replace images with css3

The code for the button:

background-image:linear-gradient(90deg,rgb(0,163,217) 0%,rgb(63,187,240) 100%);
width:250px;
height:60px;
border-radius:9px;
box-shadow:inset 0px 1px 4px rgba(11,110,166,0.65);

A nice and easy one, that should work in all modern browsers without any issues, just don’t forget that browser prefixes are still required for a lot of CSS3 elements at the moment.

2. Badges

An element that is very rarely created using CSS is the badge. Badges are usually used to attract your visitors attention to some sort of offer or deal, and they became very popular during the dreaded ‘Web 2.0’ phase. If used tastefully though, the badge can be a useful element to have on your page, and can be quite easily without the use of images.

replace images with css3

The code for the badge:

background-image:linear-gradient(90deg,rgb(84,169,13) 0%,rgb(179,235,102) 100%);
width:125px;
height:125px;
border-color:rgb(64,143,0);
border-width:2px;
border-radius:62px;
border-style:solid;
box-shadow:0px 1px 10px rgba(0,0,0,0.25) ,inset 0px 0px 4px rgba(223,255,191,0.65);

And for the text:

font-family:"Helvetica Neue";
font-size:32px;
font-weight:bold;
color: #ffffff;
text-align:center;
text-shadow:0px -1px 1px rgb(64,143,0);

3. Content Boxes

Content boxes, such as those that can be seen on the Apple homepage would be simple to replace with pure CSS versions, as demonstrated below:

replace images with css3

The code for the box:

background-image:linear-gradient(90deg,rgb(227,227,227) 0%,rgb(252,252,252) 100%);
width:280px;
height:150px;
border-radius:5px;
box-shadow:0px 1px 2px rgba(0,0,0,0.5) ,inset 0px 1px 1px rgb(255,255,255);

4. Form Elements

Form elements are perfect candidates for getting a CSS3 make-over. It used to be difficult to style form elements consistently between browsers, usually relying on images. But now that most browsers support CSS3 styling on form elements, we can achieve results like this completely hassle (and image) free.

replace images with css3

The code for the default state is:

background-color: #ffffff;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 4px 0px rgba(0,0,0,0.4);


And the code for the active state is:

background-color: #ffffff;
border-color:rgb(38,147,255);
border-width:1px;
border-style:solid;
box-shadow:0px 0px 5px 0px rgba(77,210,255,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 4px 0px rgba(0,0,0,0.4);

5. Loading Bars

Using CSS3 will create much more flexible progress bars than images would, and updating the progress is a simple as modifying the width attributes.

replace images with css3

The code for the container:

background-image:linear-gradient(90deg,rgb(255,255,255) 0%,rgb(231,231,231) 50%,rgb(255,255,255) 50%,rgb(255,255,255) 99%,rgb(255,255,255) 100%);
width:500px;
height:15px;
box-shadow:0px 1px 3px rgba(0,0,0,0.4);

And the code for the progess bar:

background-image:linear-gradient(-90deg,rgb(Infinity,Infinity,Infinity) 0%,rgb(157,184,207) 50%,rgb(109,134,160) 50%,rgb(-Infinity,-Infinity,-Infinity) 100%);
width:370px;
height:15px;
box-shadow:inset 0px 0px 2px rgb(46,50,61);

Just a Taster

These are just a few examples of what can be achieved with CSS3, it’s possibilities are truly endless. So, why not try out some of these techniques or create your own and use them in your next project. It will cut down on page load times, and make your designs much more flexible.

 


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Julia Agnes

    Julia Agnes

    Hi! Thank you for tutorial! Very useful

    Jun 7, 2012 at 4:49 am
  • Reply »
    BC

    BC

    The linear background coding is not working for me.  I use DW CS6.  Also, the text does not align correctly on the button or the circle graphic.  Am I missing something?  Thanks!

    Aug 9, 2012 at 10:58 am
  • Reply »
    suhel m mulla

    suhel m mulla

    it’s really useful…..

    Aug 13, 2012 at 1:11 am
  • Reply »
    Jan

    Jan

    Do you have some website you recommend which have more of these type of small code snippets? They are really easy to use and implement in my current websites :)

    Aug 23, 2012 at 4:33 pm
  • Reply »
    Peter - Mobilio

    Peter - Mobilio

    This look fantastic! I should use them in next projects to minimize using of images.

    Aug 26, 2012 at 7:27 pm
  • Reply »
    Analía Antenucci

    Analía Antenucci

    Nice! They are “must-have” CSS3 snippets. Not only a replacement for images but a guaranty of a more semantic HTML code!

    Sep 13, 2012 at 8:29 am
  • Reply »
    Reed

    Reed

    I found your website perfect for my needs. It contains wonderful and helpful posts. I have read most of them and got a lot from them. To me, you are doing the great work. The tips on replacing the images with Cs3 was so helpful for my students.

    Nov 6, 2012 at 6:26 am
  • Reply »
    Thủ thuật Wordpress

    Thủ thuật Wordpress

    Very nice tutorials. It’s a reason why I’ve subscribed your blog.

    Feb 17, 2013 at 6:39 pm
  • Reply »
    Nixon Parker

    Nixon Parker

    These are good tutorials for replacing the image with CSS. Nowadays, CSS is most important as inline style sheet is not used by many developers. Mostly developers are using CSS for any formatting or any task in HTML.

    Feb 20, 2013 at 1:09 am
  • Reply »
    marvin

    marvin

    thanks for this awesome css3 tutorial. it’s very helpful

    Mar 20, 2013 at 8:52 am
  • Reply »
    haris

    haris

    i want to learn this but i just missing some basic code. Do you have some website you recommend please where i can got simple example kindly

    Apr 16, 2013 at 4:38 pm
  • Reply »
    may in phun

    may in phun

    thank i am studying CSS 3 in thesis 2.0 . this is really great

    Jun 2, 2013 at 9:43 am
  • Reply »
    trẻ mồ côi

    trẻ mồ côi

    in my website, i used a lot of images. After read articles i hope that i would replace all .

    Aug 16, 2013 at 5:20 am
  • Reply »
    Phụ kiện đồng hồ

    Phụ kiện đồng hồ

    Thanks. I’m studying CSS 3 in Wordpress. This is really great!

    Aug 22, 2013 at 11:40 pm
  • Reply »
    Damian

    Damian

    CSS3 is a huge step forward in web development, and the fact that more and more browsers are supporting CSS3 is welcomed. There are a lot of techniques in CSS3 that can greatly improve the easiness of editing elements and the load times of websites.

    Sep 26, 2013 at 4:36 am
  • Reply »
    Site

    Site

    Since css5 has been released, won’t most updates stop for css3? This is still a great tutorial though.

    Jan 16, 2014 at 4:24 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi there, CSS3 is the most up to date version of CSS, and is still in progress.

      Jan 17, 2014 at 10:38 am
  • Reply »
    Lien khuc nhac dam cuoi

    Lien khuc nhac dam cuoi

    Hi, great too. With CSS everything is possible more amazing. I also want to apply some to my page.

    Dec 4, 2014 at 4:20 am
  • Reply »
    Thủ thuật máy tính

    Thủ thuật máy tính

    Thanks for share.  I’ve subscribed your blog.

    Dec 9, 2014 at 5:46 am
  • Reply »
    sarahair

    sarahair

    Thanks, your content is really useful to me :)

    Dec 17, 2014 at 3:15 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all