• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css secrets
 

Css secrets

on

  • 427 views

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

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

Statistics

Views

Total Views
427
Views on SlideShare
427
Embed Views
0

Actions

Likes
1
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css secrets Css secrets Presentation Transcript

    • 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/).2. I am assuming all of you are familiar withcss.
    • psuedo elements :after & :beforehtml:-<div>user !</div>css:-div:before {content: "Hello";}http://jsfiddle.net/crazyrohila/gbR7H/1/
    • :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/
    • 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/
    • 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 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/
    • 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/
    • :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/
    • 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 animate.http://crazyrohila.github.io/css3/bat_ball/
    • 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/
    • 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.
    • 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.org/user/1274328