Impressive CSS Demo could be used instead of graphical images

HTML & CSS
1

I stumbled across this site today and was highly impressed:

My son also used CSS to replace his website logo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo div {
    position: absolute; 
    width : 100px;
    height: 100px;
    border-style:solid;
    border-color:grey;
    border-width:20px;
}
.d { 
    border-top-right-radius: 100% ;
    border-bottom-right-radius: 100% ;
}
.a {
    left: 50px;  
    border-radius:100%;
    border-bottom-right-radius:0;  
}
</style>
<title>CSS Image Logo Replacement</title>
</head>
<body>

  <div class='logo'>
    <div class='d'>
    </div>

    <div class='a'>
    </div>
  </div>

</body>
</html>

[B]

Has any other forum members managed to use CSS to replace their image logos? [/B]

2

That Simpsons demo is a great example of what css can do if you have the patience:). It must have taken ages to do.

As you say logos are a prime example of when to put some effort into creating something with css rather than an image. With hat thought in mind I had a quick go with [URL=“http://www.pmob.co.uk/pob/images/logo-new.jpg”]my logo but as it’s mostly text anyway it wasn’t too taxing :slight_smile:

3

I would consider this more of a proof of concept than anything really useful. While it can be argued that CSS is intended for presentation, there doesn’t seem to be any significant savings in terms of the number of bytes compared to a PNG. In either case, an SVG would be more appropriate for embedded graphics.

4

It is not the size that counts it the fact that there is a reduction in file requests.

Try viewing a site using "http://tools.pingdom.com/" and notice the times to download files related to their file-sizes.

Usually at the latter end of the file list downloaded there is a dramatic increase in time to download a very small file-size.

Reducing the number of files is highly recommended to decrease page download times.

5

This is true if the specific page exists in a vacuum. If the logo file is cached on the first visit, the HTTP request will not be sent when viewing subsequent pages featuring the logo. This is of course true for the CSS as well (assuming an external CSS file), however, if all the graphics on the website, not all of which is likely to be present on each page, are created using CSS, the user will have to download a much larger CSS-file on the first visit. A solution could of course be made in which the CSS-file served is generated based on which graphics are going to be displayed on each specific page, with subsequent CSS files being served with additional CSS if additional pages require more CSS graphics, on a session-basis, but I would consider this slightly overkill.

As mentioned, if you really want to get rid of the HTTP request, an SVG image loaded as part of the page code would be a much more straight-forward approach.

Another alternative could be to use sprites for the graphics, but that’s another matter entirely.

6

Interesting exercise but I don’t quite understand the practical use of such a technique unless the end goal includes animation. I don’t believe the cost is justifiable either in comparison to simply saving an image. Also, search engines won’t be able to discern that as an “image”. As far as saving bandwidth goes I think that will nearly equal out considering the mountain of none semantic mark-up and styles. Neat idea but unless there is animation involved waste of time. I believe though the could achieve the same type of dynamic effects using svg. So perhaps it is a waste of time all around from a practical stand-point.

7

The eyes in the examples linked to blink for me using Firefox 30.