• Home
  • Archive
  • Privacy Policy
  • Sitemap
  • Site Authors
  • Contact us
  • Disclaimer

iPro

iPro
  • Home
  • Apple
    • iPad
    • iPhone
    • iPod Touch
  • Apps
    • App Store
    • Cydia Apps
  • How To
  • Lists
  • News
  • Web
    • Misc
      • Comics
      • Twitter Backs
    • Review
    • Tips
    • Uncategorized

Tutorial: CSS Background use to Spice up Blog Posts

  • Web

    Written by Imran on March 24th, 2009


    Author Twitter Profile

    0 views


    Tweet

    Related Posts


    Here is little tutorial to help you spice up your blog posts inpost heading with a little icon, first of all you would need to define a CSS Class in your style.css as below as we try to show little icon (computer LCD) before the Heading Text See Demo here

    .demo {
    background:#F3F3F3 url(images/demo.png) no-repeat scroll 15px 50%;
    border:1px solid #D3D7CF;
    margin:5px 0;
    padding:15px 20px 10px 60px;
    text-align:left;
    }

    And in your html wrap the  Text heading with below Div class

    <div class="demo">
    Heading see demo here</div>

    As you can see in the image below, You can define as many classes as you need with different icons for different purposes following the same rule as above

    css-tutorial

    You can see live Demo here

    Share
    Tweet

    Other Posts

    • Bubble-Translate: Translation Extension for Google Chrome!
    • Joomla is the worst CMS for Blogging !
    • iPod Touch 4 – Leaked Picture
    • Mono Theme for Nokia E71, E66, Nokia 5800 !
    • Awesome Windows Media Player 12
    • Download Thunderbird 3 Beta 4 !
    • How to Rank higher in Google SERP.
    • Download I’m a PC Windows Live Messenger Theme Pack !
    • Jailbreak iPod Touch with Redsn0w (RedsnOw) on iOS 3.0 – 3.1.2 [ How To ]
    • What is Shared Hosting account ? !
    This entry was posted on Tuesday, March 24th, 2009 at 4:18 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed. - You can Also Follow us on Facebook or Twitter.
    1. Adam
      Mar 27th
      Reply

      Hmm! Thanks for sharing this tutorial :)

  • Leave a Reply

    Let us know what you thought. Click here to cancel reply.

  • Name (required):

    Email (required):

    Website:

    Message:

  • Recent Posts
    • Apple Announces new iPod Shuffle, Nano, Touch
    • Gmail Priority Inbox. What an Idea!
    • Easiest Way to Jailbreak iPhone 4 – iPhone 3GS
    • Popular iPhone Jailbreak Apps for iPhone and iPod Touch
    • Setup Push Hotmail on iPhone using ActiveSync
    • Downgrade iOS 4.0.2 to 4.0.1 – 4.0 without SHSH Blobs Saved [How-To]
    • Angry Birds updated to Version 1.4.1
    • Auto3G – Turn On & off 3G Automatically

Copyright © 2009 iPro - Content Licensed under Creative Commons. Which requires a linkback to the articles which are quoted on other sites.
iPhone - iPod Touch - iPad - iMac and iOS are registered Trademarks of Apple Inc. Proudly Hosted by DreamHost