Scribd
Upload
21 views

CSS3

Css3 cheet sheet

Uploaded by

Crazy King
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

CSS3

Css3 cheet sheet

Uploaded by

Crazy King
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Sencha WebKit CSS3 Cheat Sheet

Selectors Animations
El[att^="val"] Match attribute values beginning w/ 'val' -webkit-animation: name duration timing_function;
El[att$="val"] Match ending values
El[att*="val"] Match substring values -webkit-animation-name: Of @-webkit-keyframes
El:not(s) Element that is not 's'. -webkit-animation-duration: Time in seconds
El:nth-child(n) Element that is n-th child of its parent -webkit-animation-timing-function: ease-in, linear etc.
El:target Element that is target of referring URL -webkit-animation-delay: Time until start
-webkit-animation-iteration-count: Count or infinite
div#bar is a target for http://foo/#bar
@-webkit-keyframes "colorShift" { /* Give it a name */
0% { background-color: red; }
100% { background-color: blue; }
Flexible Box Model create HBox and VBox }

display: -webkit-box; /* Call the animation */


-webkit-box-orient: horizontal | vertical; #myDiv { -webkit-animation: colorShift 10s linear; }
-webkit-box-flex: 1;

Transitions
Box Sizing standard box vs. padding/border inside
-webkit-transition: opacity 1s linear;
-webkit-box-sizing: content-box | border-box;
-webkit-transition-property: Property to change or all
-webkit-transition-duration: Time in seconds
Multiple Columns newspaper-like columns of text -webkit-transition-timing-function:
linear, ease-in, ease-out, ease-in-out, etc.
-webkit-columns: width count

-webkit-column-width: Width Gradients used in background-image


-webkit-column-count: Number
-webkit-column-gap: Gutter width -webkit-gradient(
-webkit-column-rule: Vertical divider, style like border type, Linear or radial
x-offset y-offset, Starting position
x-offset y-offset, Ending position
RGBA red, green, blue and alpha transparency color-stop(0.0,color), As many stops as you
color-stop(1.0,color) want from 0 to 1
rgba(0-255, 0-255, 0-255, 0-1) )

color: rgba(255,255,255,0.8); White with 80% opacity background-image: -webkit-gradient(


linear,
0 0,
0 100%,
Border Radius vendor prefix required for iOS <4.0 from(red), color-stop(0.5, green), to(blue)
)
-webkit-border-radius: 4px;
-webkit-border-top-left-radius: 4px; For single corners
Background Size
Multiple Backgrounds takes full background params -webkit-background-size: length_x length_y

background: url(image1) repeat, url(image2) no-repeat;

Text Size Adjust


Marquee create scrolling text across the screen -webkit-text-size-adjust: percentage | auto | none;

-webkit-marquee: direction repetition style speed

overflow-x: -webkit-marquee; Required Text Overflow


-webkit-marquee-direction: left, right, reverse, etc.
-webkit-marquee-repetition: Number or infinite; text-overflow: ellipsis;
-webkit-marquee-style: scroll | alternate | none; overflow: hidden; Required
-webkit-marquee-speed: fast | normal | slow; white-space: nowrap; Required

Shadows box and text shadows use same syntax Font Face
box-shadow or text-shadow: x-offset y-offset blur color @font-face {
font-family: 'MyFont';
text-shadow: 0 1px 5px rgba(0,0,0,0.3); src: url('MyFont.file'); }

Download this sheet at http://www.sencha.com/csscheatsheet

You might also like