Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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....
Nächste SlideShare
Wird geladen in …5
×

1

Teilen

Jetzt herunterladen Herunterladen

Herunterladen, um offline zu lesen

Css secrets

Jetzt herunterladen Herunterladen

Herunterladen, um offline zu lesen

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

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

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

  • valicac

    Nov. 30, 2013

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

Aufrufe

Aufrufe insgesamt

893

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

5

Befehle

Downloads

6

Geteilt

0

Kommentare

0

Likes

1

×