CSS

Here is css trick to create responsive background image in css without javascript. Essentially, the trick try to set the element which has class background dimension as feasible as can be. padding-bottom will be introduced to help archive this. What we do here is to populate the value of padding-bottom calculated as percentage by the […]

Here is explain how to make 100% height inner div. We have to define the height of this inner div’s parents firstly. Because the height 100% of inner div is based on its parents height. Here example we want div which class is col-l 100% height of page, so we need to tell all the […]

CSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up – automatic link icons. First, a look at the end result :- Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external […]

There’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass (my preprocessor of choice). Overall, Sass is not difficult at all to get set up, […]

Unless your mobile application allows for only portrait or only landscape views, there’s a good chance you will need to adjust a few things. Even if you’ve built your layouts in a fluid fashion, you may need to programmatically make some changes. There are a few strategies for knowing when pages have changed, so let’s […]

Go to Edit > Preferences > Units & rulers (or Ctrl+K and choosing Units & Rulers in the list on the left) and change the default Type unit from Points to Pixels. While you’re there, you can also change the Rulers unit to Pixels as well (although you can change that by right clicking on […]

Below IE9, Internet Explorer has effectively zero inbuilt support for CSS3 or any other standard web technologies such as SVG that would allow you to rotate text cross platform as you wish. Microsoft have included two ways of rotating elements (eg text) since IE6, however the more simple method only works in increments on 90 […]

For Firefox, it is not necessary to create a filter.svg file, you can use data URI scheme instead of filter: url(resources.svg#desaturate); /* Gecko */ . Note: For IE, filter: gray; is only work for the image, it donesn’t work to grayscale the div which has background image. Taking up the css code of the first […]

The post will show you how to make a background layer half transparent, but keep the text on top as a solid color. A common problem occurs in browsers if you set a background opacity to transparent, all of the children will also become transparent. One solution in the older days was to use a […]