Scribd
Upload
170 views

Css3 Cheat Sheet

This document provides a summary of CSS3 features and their vendor prefixes required for WebKit browsers. It lists selectors, animations, transitions, gradients, borders, sizing, columns, text effects, shadows, fonts and more. For each property, it specifies the syntax with prefixes like "-webkit-" for WebKit browsers to enable new CSS3 features that may not be fully supported yet across all browsers. The cheat sheet aims to help developers style elements and create visual effects for WebKit browsers using newer CSS3 specifications.

Uploaded by

Philip Soares
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
170 views

Css3 Cheat Sheet

This document provides a summary of CSS3 features and their vendor prefixes required for WebKit browsers. It lists selectors, animations, transitions, gradients, borders, sizing, columns, text effects, shadows, fonts and more. For each property, it specifies the syntax with prefixes like "-webkit-" for WebKit browsers to enable new CSS3 features that may not be fully supported yet across all browsers. The cheat sheet aims to help developers style elements and create visual effects for WebKit browsers using newer CSS3 specifications.

Uploaded by

Philip Soares
Copyright
© Attribution Non-Commercial (BY-NC)
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-keyframe
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. text-overflow: ellipsis;
-webkit-marquee-repetition: Number or infinite; overflow: hidden; Required
-webkit-marquee-style: scroll | alternate | none;
white-space: nowrap; Required
-webkit-marquee-speed: fast | normal | slow;

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

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

You might also like