Best CSS Tricks and Tips

Best CSS Tricks and Tips

  1. CSS Conditional Comments for IE7 and Below

    As known to us that its difficult sometimes to overcome the IE browser styling issues. Instead of getting stuck after a long process of development try using these styling tips on your site to overcome those..
    Example:

    div { background: red; /* modern browsers */ *background: green; /* IE 7 and below */ _background: blue; /* IE6 exclusively */ }

    First styling will be taken by all modern browsers which is normal as you write, while the “ * ” and “ _ “ will be ignored by all browsers except IE7 and IE6 respectively.

  2. HTML Conditional Comments for IE7 and Below

    To overcome IE comparability issues we need to add few styles which may not be needed for other browsers, conditional comments are the unique method to solve that
    Example:

    <!--[if IE]> <link type="text/css" rel="stylesheet" href="ie-style.css" /> < ![endif]-->

    This will load the stylesheet only when page is loaded in Internet explorer.

    Condition for specific versions of IE browsers

    <!--[if IE 6]> - targets IE6 only --> <!--[if lt IE 6]> - targets IE5.5 and below --> <!--[if gte IE 6]> - targets IE6 and above --> <!--[if lte IE 6]> - targets IE6 and below --> <!--[if gt IE 6]> - targets IE7 and above -->
  3. Padding for Background Images

    Padding property cannot be used to “Background Images”, instead which we can use background-position property on the same background image.
    Example:

    background-position:10px 10px;

    The values can be in % or in px or other, in above I have created 10px padding space around the background image.

  4. Centre aligned Dynamic Menu with CSS

    To get the menus aligned centre of the website dynamically, we need to style the elements as mentioned below.
    Example:

    HTML: <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Our Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> CSS: .nav ul, .nav ul li { list-style: none; margin: 0; } .nav ul { display:block; font-size:0; text-align: center; width:100%; } .nav ul li { display: inline-block; margin-right: .75em; } .nav ul li a{ display:block; font-size:14px; padding: 10px 15px; text-decoration:none; }
  5. Usage of Nth-child in CSS

    This pseudo- selector will allow you to select the nth element in number of lists. Its also helpful for you to select alternate elements instead of adding separate classes dynamically which may save more time and shorten your code.

    Example:

    HTML: <ul> <li>Red Background Color</li> <li>Black Background Color</li> <li>Red Background Color</li> <li>Black Background Color</li> <li>Red Background Color</li> <li>Black Background Color</li> <ul> CSS: ul li{ background-color: red; color:#fff; font-size:14px; line-height:20px; }

    Above would get applied for all the list items, to make the alternate lists black..

    ul li:nth-child(even) { background-color: black; }

    Its supported for all modern browsers and unfortunately above IE 9.

  6. Create Triangle shapes in CSS

    You can replace pointing arrow images with CSS styling. Instead of having separate images for different color of pointing arrow images which will increase your file size and number of requests, you can do the same by writing CSS as written below..

    Example:

    HTML: <div class="arrow up-arrow"></div> <div class="arrow down -arrow"></div> <div class="arrow left -arrow"></div> <div class="arrow right -arrow"></div> CSS: .arrow{ height:0; width:0; } .up-arrow{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #111111; } .down-arrow{ border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #009ce5; } .right-arrow{ border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid #00d43c; } .left-arrow{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #f53e3e; }
  7. Parallax Effect purely with CSS

    Seemingly slow movement of background to the foreground is known as Parallax Effect, be surprised that this can be done using CSS and CSS3.

    Example:

    HTML: <div class="wrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit pulvinar urna id pharetra. Cras vitae velit lacus. Donec condimentum tincidunt metus, in pulvinar urna ullamcorper eu. Quisque et porttitor sem. Fusce dictum, magna ut lobortis convallis, arcu augue convallis lorem, nec scelerisque felis nunc id nunc. Nullam porttitor maximus mi, id sodales tortor varius sed. Curabitur dignissim lacus at quam fringilla feugiat vitae sit amet velit. Quisque pellentesque maximus ante. Sed quis eros a nisi venenatis aliquet. Praesent finibus vestibulum urna, at volutpat enim feugiat a. Vivamus ullamcorper imperdiet mi at convallis. </p> </div> CSS: p { width: 100%; margin: auto; font-size: 50px; transform: scale(.5); font-family: courier new; font-weght: bold; } div.wrapper { background-image: url("image.jpg"); background-attachment: fixed; transform: scale(1.25); }

Get in touch

Want to have a chat? drop your details below. We can talk till our coffee cup is empty. Please feel free to email if you have specific requirements, or even if you just want to chat! (or) If you need good design or advice feel free to contact me..

Thank you! Will get back to you soon.. Something went wrong.. Please try again!