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:

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.

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

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.
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.
Category: Tutorials
Download ALL of Our Premium Resources
Signup for a MediaLoot subscription today and get tons of premium resources to use commercially and even in web apps. At subscriptions starting at just $9, you can't lose...
Comments
Hi! Thank you for tutorial! Very useful_)))
Wow! I search Form Elements, I love your site. Thanks alot.
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!
it’s really useful…..
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
This look fantastic! I should use them in next projects to minimize using of images.
The idea of your blog is totally fresh, I am sure that the readers who
will read your blogs surely like your content
and opinions.
cheap ray ban sunglasses dvsvdsvsdv
Nice! They are “must-have” CSS3 snippets. Not only a replacement for images but a guaranty of a more semantic HTML code!
i have read the comments very nice i like comment thankyou
www.mobilesolison.blogger.com
They are really easy to use and implement in my current websites.
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.
http://www.gps-blogger.de/suunto-stellt-neue-gps-uhr-ambit-vor
For people who’re considering about generating songs component of your functioning life, there are attention-grabbing work opportunities
thanks for content.better relationship tips
Very nice tutorials. It’s a reason why I’ve subscribed your blog.
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.
liked those posts really .great!
High PR Link Directory is a pure SEO friendly web directory. This web directory provides useful resources and promotes the international exchanges on all topics by connecting visitors to all resources in this directory High PR Link Directory is arranged in a simply hierarchical structure to help users find the categories they’re looking for easily.
paid directory
Green Power International was established in early 2002 in close cooperation with MWM GmbH (formerly Deutz Power System GmbH).
Thanks, i use CSS3 and this is very usefull,
thank you
thanks for this awesome css3 tutorial. it’s very helpful
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
I just stumbled upon your informative blog and wanted to say that I have really enjoyed reading your very well written blog posts.
Thank you for the tutorial! It’s really great!
Thanks, i use CSS3 and this is very usefull,
thank you
thanks for this awesome css3 tutorial. it’s very helpful