SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,833
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)

    Impressive CSS Demo could be used instead of graphical images

    I stumbled across this site today and was highly impressed:

    https://pattle.github.io/simpsons-in-css/


    My son also used CSS to replace his website logo:
    HTML Code:
    <!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>
    jb-css-image-logo-replacement.jpg


    Has any other forum members managed to use CSS to replace their image logos?
    Last edited by John_Betong; Jul 3, 2014 at 09:42. Reason: added screen dump
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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 my logo but as it's mostly text anyway it wasn't too taxing

  3. #3
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  4. #4
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,833
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    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.
    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.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    It is not the size that counts it the fact that there is a reduction in file requests.
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.
    The only code I hate more than my own is everyone else's.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    The eyes in the examples linked to blink for me using Firefox 30.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •