CSS secrets (or may be not)

friday session

@ by sanjay rohila

Before I start:-1. I am linux user, so don't care about IE. If you do, check support for properties here(http://caniuse.com/).

2. I am assuming all of you are familiar with css.

psuedo elements :after & :beforehtml:-<div>user !</div>

css:-div:before {

content: "Hello";}http://jsfiddle.net/crazyrohila/gbR7H/1/

:checkedhtml:-<input type="checkbox" id="startstop"><label for="startstop" class="label"></label>css:-.label:after { content: "Unchecked"; }#startstop:checked + .label:after {

content:"checked";}http://jsfiddle.net/crazyrohila/fWnsa/

difference between ">", "+", "~", "*".a. ">" is used for child elements.

b. "+" is used for next sibling element.

c. "~" is used for all sibling elements.

d. "*" as usual selects all elements.

http://jsfiddle.net/crazyrohila/FDeVh/

box-shadow: & text-shadow:multiple box-shadow and text-shadow

http://jsfiddle.net/crazyrohila/Dt3NS/

box-sizing:default is content-box, which means padding and border will be outside of defined width/height.

border-box, which means padding and border will be inside of defined width/height. the actual width/height will be calculated by reducing padding and border form defined width/height.http://jsfiddle.net/crazyrohila/cSfs5/

Background-clipbackground-clip something like box-sizing, but for background. By default background covers whole box, including padding and border.we can use padding-box to exclude borders from background.content-box to cover only content area, padding and border will be excluded.

http://jsfiddle.net/crazyrohila/FUPXq/

:not():not() is a negative pseudo class. This can be used when we want to style a selector not having other selector.

syntax:- foo:not(bar) { }

http://jsfiddle.net/crazyrohila/cfTe3/

What is "margin-right: -100%;"logic behind :- margin-right:-100%;

http://jsfiddle.net/crazyrohila/3uKKz/

animation:keyframes and animation.

keyframes holds the bundle of properties. and then call keyframes on a selector to animate.

http://crazyrohila.github.io/css3/bat_ball/

New thing in box:- flex-boxflex-box new display type.

display: box-flex;

http://www.w3.org/TR/css3-flexbox/http://flexiejs.com/playground/http://bennettfeely.com/flexplorer/

Other useful propertiesfont-size in ems:- http://codepen.io/chriscoyier/pen/HizKe

background-gradients:- http://lea.verou.me/css3patterns/http://crazyrohila.github.io/ugly-css3patterns/

data uri:-Its saves http request. Its pure data content embedded in html/css. Very performative if css file is cached.

How much you can do with one div ?beyond your imagination :-

http://css-tricks.com/examples/ShapesOfCSS/

Thank You :)http://www.crazyrohila.com/

Twitter:- @crazyrohilagithub:- https://github.com/crazyrohilaD.Org:- http://drupal.org/user/1274328