Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×
Upcoming SlideShare
sample presentation
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Css secrets

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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
  • valicac

    Nov. 30, 2013

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

Views

Total views

900

On Slideshare

0

From embeds

0

Number of embeds

5

Actions

Downloads

6

Shares

0

Comments

0

Likes

1

×