CSS Secrets OR may be not

Some Css properties we rarely use.

Transcript

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