CSS secrets (or may be not)friday session@ by sanjay rohila
Before I start:-1. I am linux user, so dont care about IE. If youdo, check support for properties here(http://caniuse.com/...
psuedo elements :after & :beforehtml:-<div>user !</div>css:-div:before {content: "Hello";}http://jsfiddle.net/crazyrohila/...
:checkedhtml:-<input type="checkbox" id="startstop"><label for="startstop" class="label"></label>css:-.label:after { conte...
difference between ">", "+","~", "*".a. ">" is used for child elements.b. "+" is used for next sibling element.c. "~" is u...
box-shadow: & text-shadow:multiple box-shadow and text-shadowhttp://jsfiddle.net/crazyrohila/Dt3NS/
box-sizing:default is content-box, which means paddingand border will be outside of definedwidth/height.border-box, which ...
Background-clipbackground-clip something like box-sizing, butfor background. By default background coverswhole box, includ...
:not():not() is a negative pseudo class. This can beused when we want to style a selector nothaving other selector.syntax:...
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. andthen call keyframes on a selector to animat...
New thing in box:- flex-boxflex-box new display type.display: box-flex;http://www.w3.org/TR/css3-flexbox/http://flexiejs.c...
Other useful propertiesfont-size in ems:- http://codepen.io/chriscoyier/pen/HizKebackground-gradients:- http://lea.verou.m...
How much you can do withone 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....
Upcoming SlideShare
Loading in …5
×

Css secrets

742 views

Published on

Some css3 properties, which we are using or not using.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
742
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css secrets

  1. 1. CSS secrets (or may be not)friday session@ by sanjay rohila
  2. 2. Before I start:-1. I am linux user, so dont care about IE. If youdo, check support for properties here(http://caniuse.com/).2. I am assuming all of you are familiar withcss.
  3. 3. psuedo elements :after & :beforehtml:-<div>user !</div>css:-div:before {content: "Hello";}http://jsfiddle.net/crazyrohila/gbR7H/1/
  4. 4. :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/
  5. 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. 6. box-shadow: & text-shadow:multiple box-shadow and text-shadowhttp://jsfiddle.net/crazyrohila/Dt3NS/
  7. 7. box-sizing:default is content-box, which means paddingand border will be outside of definedwidth/height.border-box, which means padding andborder will be inside of defined width/height.the actual width/height will be calculated byreducing padding and border form definedwidth/height.http://jsfiddle.net/crazyrohila/cSfs5/
  8. 8. Background-clipbackground-clip something like box-sizing, butfor background. By default background coverswhole box, including padding and border.we can use padding-box to exclude bordersfrom background.content-box to cover only content area,padding and border will be excluded.http://jsfiddle.net/crazyrohila/FUPXq/
  9. 9. :not():not() is a negative pseudo class. This can beused when we want to style a selector nothaving other selector.syntax:- foo:not(bar) { }http://jsfiddle.net/crazyrohila/cfTe3/
  10. 10. What is "margin-right:-100%;"logic behind :- margin-right:-100%;http://jsfiddle.net/crazyrohila/3uKKz/
  11. 11. animation:keyframes and animation.keyframes holds the bundle of properties. andthen call keyframes on a selector to animate.http://crazyrohila.github.io/css3/bat_ball/
  12. 12. 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/
  13. 13. Other useful propertiesfont-size in ems:- http://codepen.io/chriscoyier/pen/HizKebackground-gradients:- http://lea.verou.me/css3patterns/http://crazyrohila.github.io/ugly-css3patterns/data uri:-Its saves http request. Its pure data contentembedded in html/css. Very performative if cssfile is cached.
  14. 14. How much you can do withone div ?beyond your imagination :-http://css-tricks.com/examples/ShapesOfCSS/
  15. 15. Thank You :)http://www.crazyrohila.com/Twitter:- @crazyrohilagithub:- https://github.com/crazyrohilaD.Org:- http://drupal.org/user/1274328

×