Transform origin

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform

Summary

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Syntax

transform-origin: x-offset                                   /* One-value syntax */   E.g.  transform-origin: 2px 
transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom

transform-origin: x-offset y-offset                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right

transform-origin: x-offset y-offset z-offset                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm

transform-origin: y-offset-keyword x-offset-keyword z-offset 

List of Mistakes in the Design of CSS

List of mistakes

• white-space: nowrap should be white-space: no-wrap
• vertical-align should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1.
• vertical-align: middle should be text-middle because it's not really in the middle.
• Percentage heights should be calculated against fill-available rather than being undefined in auto situations.
• Table layout should be sane.
• Box-sizing should be border-box by default.
• background-size with one value should duplicate its value, not default the second one to auto.
• z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items).
• word-wrap should have been called overflow-wrap from the beginning because it confuses everybody.
• The top and bottom margins of a box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
• Partial collapsing of margins instead of weird rules to handle min/max-heights?
• Tables (and other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.
• The currentcolor keyword should have a dash, current-color.
• There should have been a predictable color naming system instead of arbitrary X11 names.
• border-radius should have been border-corner.
• Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.
• The hyphens property should be called hyphenate. (It's called hyphens because the XSL:FO people objected to hyphenate.)
• rgba() and hsla() should not exist, rgb() and hsl() should have gotten an optional fourth parameter instead (and the alpha value should have used the same format as R, G, and B or S and L).
• descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art

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

http://www.sitepoint.com/12-little-known-css-facts/

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 

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/

Images with srcset

How srcset works

First implementation of srcset only lets us define a set of images for different pixel densities using resolution modifiers.

simply add the srcset attribute to an img element and at least one resolution modifier. The browser then display the most appropriate image from the available options. For example, the 2x modifier  targets the image to use if the display has a pixel density of 2 or higher.

<img src="hello.jpg" srcset="hello-2x.jpg 2x" />

Consclusion

Undoubtedly, srscet has a long way to go, but it's pressing forward in the right direction and helping us solve a problem. Overall, this will be a more intelligent way to serve our content images.

A future implementation of srcset will alloy us to load images based on the viewport size: 

<img src="hello.jpg" srcset="hello-2x.jpg 720w, hello-3x 1280w" />

Accordian using checkbox

HTML

<div class="schools_accordian">
<ul>
<li class="block">
<input type="checkbox" name="item" id="item1" />   
<label for="item1">Friends</label>
<ul class="options">
<li><a href="#">Find New Friends</a></li>
<li><a href="#">Poke A Friend</a></li>
<li><a href="#">Incinerate Existing Friends</a></li>
</ul>
</li>

<li class="block">
<input type="checkbox" name="item" id="item3" />   
<label for="item3">Galleries</label>
<ul class="options">
<li><a href="#">My Deviant Art</a></li>
            <li><a href="#">My Deviant Art</a></li>
            <li><a href="#">My Deviant Art</a></li>
</ul>
</li>
</ul>

</div>


CSS


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.schools_accordian{
    width: 100%;
}
ul {
list-style:none;
margin:0; 
padding:0;
width:100%;
margin:0 auto;

}

ul li label {
background: #575e63; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #33373d;
color: #fff;
text-shadow: 0 1px 1px #000;
letter-spacing: 0.09em;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
background: -webkit-linear-gradient(top, #575e63, #3f4347);
background: -moz-linear-gradient(top, #575e63, #3f4347);
background: -ms-linear-gradient(top, #575e63, #3f4347);
background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
display: none;
}

ul li label {
display:block;
padding:12px;
width:100%;
}

ul li label:hover {
background: #566f82; /* fallback colour */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
background: -webkit-linear-gradient(top, #566f82, #3e505e);
background: -moz-linear-gradient(top, #566f82, #3e505e);
background: -ms-linear-gradient(top, #566f82, #3e505e);
background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li input[type='checkbox']:checked ~ label {
background: #44c6eb; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #2799db;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
background: -webkit-linear-gradient(top, #44c6eb, #2799db);
background: -moz-linear-gradient(top, #44c6eb, #2799db);
background: -ms-linear-gradient(top, #44c6eb, #2799db);
background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
background: #2173a1; /* fallback colour */
border-top:1px solid #1b5f85;
border-bottom:1px solid #4cb1e4;
-moz-box-shadow: inset 0 0 5px #111;
-webkit-box-shadow: inset 0 0 5px #111;
box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}

ul ul {
background:#fff; margin:0; padding:0;
-moz-box-shadow: inset 0 2px 2px #b3b3b3;
-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
display:block;
padding:6px 12px;
color:#999;
text-decoration:none;
}

ul ul li a:hover {
color:#44c6eb;
}
ul ul li {
border-bottom:1px solid #ccc;
}

ul ul li:first-child {
padding-top:6px;
}

ul ul li:last-child {
padding-bottom:6px; border:0;
}

.options {
height: 0;
display: block;
overflow: hidden;

}


Live demo jsfiddle