Friday 18 April 2014

12 Little-Known CSS Facts


  1. The color Property Isn’t Just for Text
  2. The visibility Property Can Be Set to “collapse”
  3. The background Shorthand Property Has New Values
  4. The clip Property Works Only on Absolutely Positioned Elements
  5. Vertical Percentages are Relative to Container Width, Not Height
  6. The border Property is Kind of Like Inception
  7. The text-decoration Property is Now a Shorthand
  8. The border-width Property Accepts Keyword Values
  9. Nobody Uses border-image
  10. There’s an empty-cells Property
  11. The font-style Property Accepts a Value of “oblique”
  12. word-wrap is the Same as overflow-wrap

For more details click below link

Friday 11 April 2014

CSS Font-Size: em vs. px vs. pt vs. percent

Meet the units



  1. Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
What is the difference 




Monday 7 April 2014

Dynamic Div Height To Browser Window

I was trying it get a div to always be the height of the browser window and i finally got it to work with this code.

Set an article to 100% height 

Jquery

$('article') .css({'height': (($(window).height()))+'px'});
    $(window).resize(function(){
        $('article') .css({'height': (($(window).height()))+'px'});
    });

jsfiddle 

http://jsfiddle.net/Nitin_Grover/BPz7X/