0% found this document useful (0 votes)
94 views

Css3 Cheat Sheet

this is the cheat sheet , with the help of this sheet the css users will be able to deal with all essential parts of this feature...

Uploaded by

M Haroon Torab
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
0% found this document useful (0 votes)
94 views

Css3 Cheat Sheet

this is the cheat sheet , with the help of this sheet the css users will be able to deal with all essential parts of this feature...

Uploaded by

M Haroon Torab
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/ 5

@font-face

A rule that allows websites to download and use fonts other than the
"web-safe" fonts

font-size-adjust

Preserves the readability of text when font fallback occurs

font-stretch

Selects a normal, condensed, or expanded face from a font family

border-bottom-left-radius

Defines the shape of the border of the bottom-left corner

border-bottom-right-radius

Defines the shape of the border of the bottom-right corner

border-image

A shorthand property for setting all the border-image-* properties

border-image-outset

Specifies the amount by which the border image area extends


beyond the border box

border-image-repeat

Specifies whether the image-border should be repeated, rounded or


stretched

border-image-slice

Specifies the inward offsets of the image-border

border-image-source

Specifies an image to be used as a border

border-image-width

Specifies the widths of the image-border

border-radius

A shorthand property for setting all the four border-*-radius properties

border-top-left-radius

Defines the shape of the border of the top-left corner

border-top-right-radius

Defines the shape of the border of the top-right corner

box-shadow

Attaches one or more drop-shadows to the box

hanging-punctuation
punctuation-trim

Specifies whether a punctuation character may be placed outside the


line box
Specifies whether a punctuation character should be trimmed

text-align-last

Describes how the last line of a block or a line right before a forced
line break is aligned when text-align is "justify"

text-emphasis

Applies emphasis marks, and the foreground color of the emphasis


marks, to the element's text

text-justify

Specifies the justification method used when text-align is "justify"

text-outline

Specifies a text outline

text-overflow

Specifies what should happen when text overflows the containing


element

text-shadow

Adds shadow to text

text-wrap

Specifies line breaking rules for text

word-break

Specifies line breaking rules for non-CJK scripts

word-wrap

Allows long, unbreakable words to be broken and wrap to the next line

color-profile

Permits the specification of a source color profile other than the default

Opacity

Sets the opacity level for an element

rendering-intent

Permits the specification of a color profile rendering intent other than


the default

transition

A shorthand property for setting the four transition properties

transition-property

Specifies the name of the CSS property the transition effect is for

transition-duration

Specifies how many seconds or milliseconds a transition effect takes to


complete

transition-timingfunction

Specifies the speed curve of the transition effect

transition-delay

Specifies when the transition effect will start

transform

Applies a 2D or 3D transformation to an element

transform-origin

Allows you to change the position on transformed elements

transform-style

Specifies how nested elements are rendered in 3D space

perspective

Specifies the perspective on how 3D elements are viewed

perspective-origin

Specifies the bottom position of 3D elements

backface-visibility

target

Defines whether or not an element should be visible when not facing


the screen

A shorthand property for setting the target-name, target-new, and


target-position properties

target-name

Specifies where to open links (target destination)

target-new

Specifies whether new destination links should open in a new window


or in a new tab of an existing window

target-position

Specifies where new destination links should be placed

grid-columns

Specifies the width of each column in a grid

grid-rows

Specifies the height of each column in a grid

column-count

Specifies the number of columns an element should be divided into

column-fill

Specifies how to fill columns

column-gap

Specifies the gap between the columns

column-rule

A shorthand property for setting all the column-rule-* properties

column-rule-color

Specifies the color of the rule between columns

column-rule-style

Specifies the style of the rule between columns

column-rule-width

Specifies the width of the rule between columns

column-span

Specifies how many columns an element should span across

column-width

Specifies the width of the columns

columns

A shorthand property for setting column-width and column-count

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
div.main
{
font-family:myFirstFont; border:2px
solid;
-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Safari and Chrome */ borderradius:25px;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */ boxshadow: 10px 10px 5px #888888;
}
div.main ul#animateList li a
{
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
/* trans pattern: property duration timingMethod delay */
}
div.main ul#animateList li a:hover
{
padding-left: 20px;
}

@media only screen and (device-width: 768px) and (orientation: landscape) {


/* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {


/* iPhone, Android rules here */
}

You might also like