This document discusses various CSS techniques including pseudo elements like :before and :after, the difference between CSS selectors like >, +, and ~, properties like box-shadow, text-shadow, box-sizing, background-clip, :not(), animation, and flex-box. It provides examples and links to resources for further exploring CSS secrets including doing a lot with just one div, font sizes in ems, and data URIs. The document is presented by Sanjay Rohila and is intended as a CSS techniques refresher or introduction.

1. CSS secrets (or may be not)
friday session
@ by sanjay rohila

2. 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.

3. psuedo elements :after & :
before
html:-
<div>user !</div>
css:-
div:before {
content: "Hello";
}
http://jsfiddle.net/crazyrohila/gbR7H/1/

4. :checked
html:-
<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/

5. 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/

6. box-shadow: & text-shadow:
multiple box-shadow and text-shadow
http://jsfiddle.net/crazyrohila/Dt3NS/

7. 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/

8. Background-clip
background-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/

9. :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/

10. What is "margin-right:
-100%;"
logic behind :- margin-right:-100%;
http://jsfiddle.net/crazyrohila/3uKKz/

11. 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/

12. New thing in box:- flex-box
flex-box new display type.
display: box-flex;
http://www.w3.org/TR/css3-flexbox/
http://flexiejs.com/playground/
http://bennettfeely.com/flexplorer/

13. Other useful properties
font-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.

14. How much you can do with
one div ?
beyond your imagination :-
http://css-tricks.com/examples/ShapesOfCSS/

15. Thank You :)
http://www.crazyrohila.com/
Twitter:- @crazyrohila
github:- https://github.com/crazyrohila
D.Org:- http://drupal.org/user/1274328