0% found this document useful (0 votes)
88 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
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
88 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
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