Css3 Complete Reference

 The most important CSS3 modules are:
 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface

 Using border-radius property, rounded corners
can be defined.
 Rounded corners elements can have
 Background color
 Borders
 Background image

 One value-
 all four corners are rounded equally
 Two values-
 top-left and bottom-right corner, top-right and
bottom-left corner
 Three values-
 top-left, top-right; bottom-left, bottom-right
 Four values –
 top-left, top-right, bottom-right, bottom-corner

Property Description
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
border-bottom-right-radius
Defines the shape of the border of the bottom-
right corner
border-bottom-left-radius
Defines the shape of the border of the bottom-
left corner

 Border-image property allows you to specify
an image to be used instead of the normal
border around an element.
 The property has three parts:
 The image to use as the border
 Where to slice the image
 Define whether the middle sections should be
repeated or stretched
 Border-clipping : (padding-box, content-box, border-
box)

 The border-image property takes the image
and slices it into nine sections, like a tic-tac-toe
board.
 It then places the corners at the corners, and the
middle sections are repeated or stretched as
specified.

 The border-image property is a shorthand
property for setting the
 border-image-source,
 border-image-slice,
 border-image-width,
 border-image-outset and
 border-image-repeat.

 The border-image-slice property specifies how
to slice the image specified by border-image-
source.
 The image is always sliced into nine sections:
four corners, four edges and the middle.

Value Description
number
The number(s) represent pixels for raster images or
coordinates for vector images
%
Percentages are relative to the height or width of the
image
fill Causes the middle part of the image to be displayed

 The border-image-width property specifies the
width of the border image.
 Note: The border-image-width property can take from one to four
values (top, right, bottom, and left sides). If the fourth value is
omitted, it is the same as the second. If the third one is also omitted, it
is the same as the first. If the second one is also omitted, it is the same
as the first.

Value Description
Length A length unit (px) specifying the size of the border-width
Number
Default value 1. Represents multiples of the corresponding
border-width
%
Refers to the size of the border image area: the width of the
area for horizontal offsets, the height for vertical offsets
auto
If specified, the width is the intrinsic width or height of the
corresponding image slice

 The border-image-outset property specifies the
amount by which the border image area
extends beyond the border box
Value Description
length
A length unit specifying how far from the edges the
border-image will appear. Default value is 0
number Represent multiples of the corresponding border-width

 The border-image-repeat property specifies
whether the border image should be repeated,
rounded or stretched.

Value Description
stretch Default value. The image is stretched to fill the area
repeat The image is tiled (repeated) to fill the area
round
The image is tiled (repeated) to fill the area. If it does not fill the
area with a whole number of tiles, the image is rescaled so it fits
space
The image is tiled (repeated) to fill the area. If it does not fill the
area with a whole number of tiles, the extra space is distributed
around the tiles

 CSS3 allows to control the background
element.
 Allows to add multiple background for an
element.
 the images are stacked on top of each other, where
the first image is closest to the viewer.
 Multiple background can be specified either
using the individual property or the
background shorthand property.

 #background-image{
background-image: url(xx.gif), url(yy.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
 # background-image {
background: url(xx.gif) right bottom no-
repeat, url(yy.gif) left top repeat;
}

 Allows to specify the size of background
images.
 Size can be specified in lengths,
percentages, or by using one of the two
keywords:
 contain or
 cover.

 The contain keyword scales the background
image to be as large as possible (but both its
width and its height must fit inside the content
area).
 The cover keyword scales the background
image so that the content area is completely
covered by the background image (both its
width and height are equal to or exceed the
content area).

 To have the background image to cover the
entire browser window at all time
 Fill the entire page with the image (no white space)
 Scale image as needed
 Center image on page
 Do not cause scrollbars

 Specifies where the background image is
positioned.
Value Description
padding-box
Default value. The background image starts from the upper
left corner of the padding edge
border-box
The background image starts from the upper left corner of the
border
content-box
content

 background-clip property specifies the painting
area of the background.
Value Description
padding-box
Default value. The background image starts from the upper
left corner of the padding edge
border-box
border
content-box
content

 CSS3 also introduces:
 RGBA colors
 HSL colors
 HSLA colors
 opacity

 RGBA color values are an extension of RGB
color values with an alpha channel - which
specifies the opacity for a color.
 An RGBA color value is specified with:
rgba(red, green, blue, alpha). The alpha
parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).

 HSL stands for Hue, Saturation and Lightness.
 An HSL color value is specified with: hsl(hue,
saturation, lightness).
 Hue is a degree on the color wheel (from 0 to 360):
 0 (or 360) is red
 120 is green
 240 is blue
 Saturation is a percentage value: 100% is the full
color.
 Lightness is also a percentage; 0% is dark (black) and
100% is white.

 HSLA color values are an extension of HSL
color values with an alpha channel - which
specifies the opacity for a color.
 An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha), where
the alpha parameter defines the opacity.
 The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).

 The CSS3 opacity property sets the opacity for
the whole element (both background color and
text will be opaque/transparent).
 The opacity property value must be a number
between 0.0 (fully transparent) and 1.0 (fully
opaque).

 CSS3 gradients display smooth transitions
between two or more specified colors.
 Elements with gradients look better when
zoomed, because the gradient is generated by
the browser.
 CSS3 defines two types of gradients:
 Linear Gradients (goes
down/up/left/right/diagonally)
 Radial Gradients (defined by their center)

 Should choose at least two colors.
 Can also set a starting point and a direction (or
an angle) along with the gradient effect.

 background: linear-gradient(direction, color-
stop1, color-stop2, ...);

 It can be specified in three ways
 Top to Bottom (this is default)
 Left to Right
 Diagonal - a gradient diagonally by specified with
horizontal and vertical starting positions.
 Top left, top right, bottom left, bottom right
 Using Angles - The angle is specified as an angle
between a horizontal line and the gradient line.

 #grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}

#grad {
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax */
}

#grad {
background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}

 background: linear-gradient(angle, color-stop1, color-
stop2);
#grad {
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}

 A linear gradient can be specified in multiple
color stops:
 from top to bottom
 from left to right

#grad {
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

 Used to create fading effects.
 To add transparency, the rgba() function is
used to define the color stops.
 The last parameter in the rgba() function can be
a value from 0 to 1, and it defines the
transparency of the color:
 0 indicates full transparency,
 1 indicates full color (no transparency).

#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-
6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-
12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

 Repeating-linear-gradient() function is used to repeat linear
gradients
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

 A radial gradient is defined by its center.
Syntax:
background: radial-gradient(shape size at position,
color-1, ..., color-n);
 By default, shape is ellipse, size is farthest-
corner, and position is center.
 Radial Gradient - Evenly Spaced Color Stops
(this is default)

#grad {
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0
*/
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0
*/
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to
15 */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}

#grad {
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For
Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard
syntax */
}

 Mainly shadow can be applied to two properties:
 Box-shadow
 Text-shadow
Box-shadow:
 The box-shadow property describes one or
more shadow effects as a comma-separated list.
 If a border-radius is specified on the element with
a box shadow, the box shadow takes on the same
rounded corners

Syntax:
box-shadow: none|h-shadow v-shadow blur
spread color |inset|initial|inherit;
Properties:
 Horizontal Shadow
 Vertical Shadow
 Blur
 Spread
 Color
 Inset

 This property adds shadows to text. It accepts a
comma-separated list of shadows to be applied
to the text and text-decorations of the element.
 Multiple shadows are applied front-to-back,
with the first-specified shadow on top.
Syntax:
text-shadow: h-shadow v-shadow blur-radius
color|none|initial|inherit;

Example:
p{
text-shadow: 3px 10px 3px #FF0000;
}
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Word-breaks:
The word-break CSS property is used to
specify whether to break lines within words.
Syntax:
word-break: normal|break-all|keep-all
|initial|inherit;

Values for word-break:
 normal: use the default rules for word
breaking.
 break-all: any word/letter can break onto the
next line.
 keep-all: for Chinese, Japanese and Korean text
words are not broken. Otherwise this is the
same as normal(Breaks are prohibited between
pairs of letters).

 Transtions are a presentational effect which
allow property changes in CSS values, such as
those that may be defined to occur on :hover
or :focus ,to occur smoothly over a specified
duration – rather than happening
instantaneously as is the normal behaviour.
 CSS transition properties can be used without
any prefix provider, but since the specification
has only recently achieved stability.

Here are the steps to create a simple transition
using only CSS:
1. Declare the original state of the element in the
default style declaration.
2. Declare the final state of your transitioned
element; for example, in a hover state.
3. Include the transition functions in your default
style declaration, using a few properties:
Transition-property,
Transition-duration,
Transition-timing-function,
Transition-delay.

Transition:
 It enables you to define the transition
between two states of an element.
 Different states may be defined using pseudo
classes like :hover or :active or dynamically set
using JavaScript.

Transition Values:
 Width
 Height
 Font
 background Color
 Multiple properties
 Opacity
 Position

Changing Width:
Width can be changed by applying Tramsition
Width property.
Example:
div{
width: 300px;
height: 100px;
background-color: darkred;
color: yellow;
transition: width 1s;
}

Changing height:
height can be changed by applying Tramsition
Height property.
Example:
div
{
width: 300px;
height: 100px;
background-color: darkred;
color: yellow;
transition: height 2s;
}

Transition-duration:
The transition-duration property sets how long
the transition will take.It specify this either in
seconds (s) or milliseconds (ms). We’d like our
animation tobe fairly quick, so we’ll specify 0.2
seconds, or 200 milliseconds:

Transition-delay:
 By using the transition-delay property, it’s also
possible to introduce a delay before the
animation begins.
 Normally, a transition begins immediately, so
the default is ‘0’. Include the number of
milliseconds (ms) or seconds (s) to delay the
transition.

Transition-timing-function:
 The transition-timing-function property
specifies the speed curve of the transition
effect.
 Timing functions determine how intermediate
values of the transition are calculated.
 These timing functions are commonly called
easing functions, and can be defined using a
predefined keyword value, a stepping function,
or a cubic Bézier curve.

The predefined keyword values allowed are:
 ease
 linear
 ease-in
 ease-out
 ease-in-out
 step-start
 step-end
For some values, the effect may not be as
obvious unless the transition duration is set to a
larger value.

Multiple transition:
 With four transition properties and three
vendor prefixes, you could wind up with 16
lines of CSS for a single transition.

 2D Transforms allow you to translate, rotate,
scale, and skew elements.
 Showing the element from a different visual
dimension is called 'Transformation' (2d
transformations).
 A transformation is an effect that lets an
element change shape, size and position.
 CSS3 supports 2D and 3D transformations.

CSS3 2D Transforms
 translate()
 rotate()
 scale()
 skewX()
 skewY()
 matrix()

Translate() Method:
 The translate() method moves an element from
its current position (according to the
parameters given for the X-axis and the Y-axis).
Rotate() Method:
 The rotate() method rotates an element
clockwise or counter-clockwise according to a
given degree.

Scale() Method:
 The scale() method increases or decreases the
size of an element (according to the parameters
given for the width and height).
Example:
div {
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}

SkewX() Method:
 The skewX() method skews an element along
the X-axis by the given angle.
Example:
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

SkewY() Method:
 The skewY() method skews an element along
the Y-axis by the given angle.
Example:
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}

Skew() Method:
 The skew() method skews an element along the
X and Y-axis by the given angles.
Example:
 div {
-ms-transform: skew(20deg, 10deg); /* IE 9
*/
-webkit-transform: skew(20deg, 10deg); /*
Safari */
transform: skew(20deg, 10deg);
}
 If the second parameter is not specified, it has a
zero value. So, the following example skews
the <div> element 20 degrees along the X-axis.

Matrix() Method:
 The matrix() method combines all the 2D
transform methods into one.
 The matrix() method take six parameters,
containing mathematic functions, which allows
you to rotate, scale, move (translate), and skew
elements.
Parameters:
 Matrix(scaleX(),skewY(),skewX(),scaleY(),transl
ateX(),translateY())

 Animations allows animation of most HTML
elements without using JavaScript or Flash.
 An animation lets an element gradually change
from one style to another.
 You can change as many CSS properties you
want, as many times you want.
 To use CSS3 animation, you must first specify
some keyframes for the animation.
 Keyframes hold what styles the element will
have at certain times.

@keyframes Rule:
 Specify CSS styles inside the @keyframes rule,
the animation will gradually change from the
current style to the new style at certain times.
To get an animation to work, must bind the
animation to an element.
Example:
@keyframes ex
{
from {background-color: red;}
to {background-color: yellow;}
}

 If the animation-duration property is not
specified, the animation will have no effect,
because the default value is 0.
 The keywords "from" and "to" (which
represents 0% (start) and 100% (complete)).
 It is also possible to use percent. By using
percent, we can add as many style changes as
you like.
 We will change the background-color of the
<div> element

Delay an Animation:
 The animation-delay property specifies a delay
for the start of an animation.
Example:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

How Many Times an Animation Should Run:
 The animation-iteration-count property specifies
the number of times an animation should run.
Example:
div {
width: 100px;
height: 100px;
position: relative;
animation-iteration-count: 3;
}
NOTE:The value "infinite" to make the animation
continue for ever

Run Animation in Reverse Direction or Alternate
Cycles:
 The animation-direction property is used to let an
animation run in reverse direction or alternate
cycles.
Example:
div {
width: 100px;
height: 100px;
position: relative;
animation-iteration-count: 3;
animation-direction: reverse;
}

Speed Curve of the Animation:
 The animation-timing-function property specifies
the speed curve of the animation.
Properties:
ease - specifies an animation with a slow start, then
fast, then end slowly (this is default)
linear - specifies an animation with the same speed
from start to end
ease-in - specifies an animation with a slow start
ease-out - specifies an animation with a slow end
ease-in-out - specifies an animation with a slow start
and end
cubic-bezier(n,n,n,n) - lets you define your own
values in a cubic-bezier function

Example
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Shorthand Property:
The Short ahnd property uses the below
Properties
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;

 It defines what types of images can be used and
the <image> type, containing URLs, gradients and
other types of images.
Rounded Images
Thumbnail
Responsive
Center-Image
Transparent Image
Image-text
Image-Filters

Rounded Images:
 Using border-radius property to create
rounded images.
Example:
Img
{
border-radius: 12px; // border-radius: 60%;
}

Thumbnail Images:
 Use the border property to create thumbnail
images.
Example:
Img
{
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

Responsive Images:
 Responsive images will automatically adjust to
fit the size of the screen.
 Image to scale down if it has to, but never scale
up to be larger than its original size.
Example:
img
{
max-width: 100%;
height: auto;
}

Center :
 To center an image within the page,
use margin: auto; and make it into
a block element:
Example:
img
{
display: block;
margin: auto;
width: 50%;
}

Polaroid Images / Cards:
It is represented cards
Example:
div.polaroid
{
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px
20px 0 rgba(0, 0, 0, 0.19);
}

Transparent Image:
 The opacity property can take a value from 0.0
- 1.0. The lower value, the more transparent:
Example:
img
{
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier*/
}

Image Text:
 This defines how to position text in an image.
Properties:
Top left
Top Right
Bottom Left
Bottom Right
Centered

Responsive Image Gallery:
 CSS can be used to create image galleries.
 This example use media queries to re-arrange
the images on different screen sizes.
 Resize the browser window to see the effect:
Example:
.responsive
{
padding: 0 6px;
float: left;
width: 24.99999%;
}

Image Model:
 It demonstrate how CSS and JavaScript can
work together.
 Use CSS to create a modal window (dialog
box), and hide it by default.
 Then, use a JavaScript to show the modal
window and to display the image inside the
modal, when a user clicks on the image

 We can create a responsive pagination using
CSS.
Pagination:
 A website with lots of pages, you may wish to
add some sort of pagination to each page.

Active and Hoverable Pagination:
 Highlight the current page with
an .active class, and use the :hover selector to change
the color of each page link when moving the mouse
over them.
Example:
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-
color: #ddd;}

Rounded Active and Hoverable Buttons:
 The border-radius property if you want a
rounded "active" and "hover" button.
Example:
.pagination a
{
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}

Hoverable Transition Effect:
 The transition property to the page links to
create a transition effect on hover
Example:
.pagination a
{
transition: background-color .3s;
}

Bordered Pagination:
 The border property to add borders to the
pagination
Example:
.pagination a {
border: 1px solid #ddd; /* Gray */
}

Space Between Links:
 The margin property if you do not want to
group the page links.
Example:
.pagination a
{
margin: 0 4px; /* 0 is for top and bottom. Feel
free to change it */
}

Pagination Size:
 The size of the pagination with the font-
size property.
Example:
.pagination a
{
font-size: 22px;
}

Centered Pagination:
 To center the pagination, wrap a container
element (like <div>) around it with text-
align:center
Example:
.center {
text-align: center;
}

Breadcrumbs:
 Another variation of pagination is so-called
"breadcrumbs“.
Example:
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}

Multi-column Layout:
 The multi-column layout allows easy definition
of multiple columns of text - just like in
newspapers.

Properties:
 column-count
 column-gap
 column-rule-style
 column-rule-width
 column-rule-color
 column-rule
 column-span
 column-width

Create Multiple Columns:
 The column-count property specifies the
number of columns an element should be divided
into.
Example:
div {
-webkit-column-count: 3; /* Chrome, Safari,
Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

Specify the Gap Between Columns:
 The column-gap property specifies the gap
between the columns.
Example
div
{
-webkit-column-gap: 40px; /* Chrome, Safari,
Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}

Column Rules:
 The column-rule-style property specifies the
style of the rule between columns:
Example:
div {
-webkit-column-rule-style: solid; /* Chrome,
Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}

Column Span:
 The column-span property specifies how many
columns an element should span across.
 Example specifies that the <h2> element
should span across all columns.
Example
H2
{
-webkit-column-span: all; /* Chrome, Safari,
Opera */
column-span: all;
}

Column Width:
 The column-width property specifies a
suggested, optimal width for the columns.
 Example specifies that the suggested, optimal
width for the columns should be 100px.
Example:
div {
-webkit-column-width: 100px; /* Chrome,
Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}

Box Sizing:
 Box-sizing property allows us to include the
padding and border in an element's total width
and height.
Without the CSS3 box-sizing Property:
 By default, the width and height of an element
is calculated like this:
width + padding + border = actual width
height + padding + border = actual height

With the CSS3 box-sizing Property:
 The CSS3 box-sizing property allows us to include the
padding and border in an element's total width and
height.
Example:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

 It is a new layout.
Uses:
 It ensures that elements behave predictably
when the page layout must accommodate
different screen sizes and different display
devices.
 This Model provides an improvement over the
block model in that it does not use floats, nor do
the flex container's margins collapse with the
margins of its contents for many applications

Concepts:
Flex Box Consists of
 Flex containers
 Flex items.
Flex container:
 It is declared by setting the display property of
an element to either flex or inline-flex
Flex- Rendered as a block
Inline-flex-- rendered as inline

Flex items:
 This positioned inside a flex container along a
flex line. By default there is only one flex line per flex
container.
Example:
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px; height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px; height: 100px;
margin: 10px;
}

Flex Direction:
 This property specifies the direction of the
flexible items inside the flex container. The
default value of flex-direction is row i.e left-to-
right, top-to-bottom.
Values used:
 row-reverse - If the writing-mode (direction) is
left to right, the flex items will be laid out right
to left
 column - If the writing system is horizontal,
the flex items will be laid out vertically
 column-reverse - Same as column, but reverse

Justify-content:
 This property horizontally aligns the flexible
container's items when the items do not use all
available space on the main-axis.
Possible values are as follows:
 flex-start - Default value.
 flex-end - Items are positioned at the end of
container
 center - Items are positioned at the center of the
container
 space-between - Items are positioned with space
between the lines
 space-around - Items are positioned with space
before, between, and after the lines

Align-items:
 This align-items property vertically aligns the
flexible container's items when the items do not use
all available space on the cross-axis.
 stretch - Default value.
 flex-start - Items are positioned at the top of the
container
 flex-end - Items are positioned at the bottom of the
container
 center - Items are positioned at the center of the
container (vertically)
 baseline - Items are positioned at the baseline of
the container

Flex-wrap:
 Flex-wrap property specifies whether the flex
items should wrap or not, if there is not enough
room for them on one flex line.
 nowrap - Default value. The flexible items will
not wrap
 wrap - The flexible items will wrap if necessary
 wrap-reverse - The flexible items will wrap, if
necessary, in reverse order

Align-content:
 The align-content property modifies the
behavior of the flex-wrap property. It is similar to align-
items, but instead of aligning flex items, it aligns flex lines.
 stretch - Default value.
 flex-start - Lines are packed toward the start of the flex
container
 flex-end - Lines are packed toward the end of the flex
container
 center - Lines are packed toward the center of the flex
container
 space-between - Lines are evenly distributed in the flex
container
 space-around - Lines are evenly distributed in the flex
container, with half-size spaces on either end.

Flex Item properties:
Ordering:
The order property specifies the order of a flexible
item relative to the rest of the flexible items inside the
same container.
Margin:
 Setting margin: auto; will absorb extra space. It
can be used to push flex items into different positions.
Perfect Centering:
 It is very easy with flexbox. Setting margin:
auto; will make the item perfectly centered in both
axis.

Align-self:
 The align-self property of flex items overrides
the flex container's align-items property for that
item. It has the same possible values as the align-
items property.
Flex:
 The flex property specifies the length of the flex
item, relative to the rest of the flex items inside
the same container.

 Specify a font named "myFirstFont", and
specify the URL where it can be found:
Example:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

 With the @font-face rule, web designers do no
longer have to use one of the "web-safe" fonts.
 In the new @font-face rule you must first define
a name for the font (e.g. myFirstFont), and then
point to the font file.
Syntax:
@font-face
{
font-properties
}

 In CSS2 this was called media types and in CSS3 it
is called media queries.
 The @media rule can be accessed via the CSS object
model interface CSS MediaRule
 Defining style sheet in a separate file, then we can
also use the media attribute when linking to an
external style sheet.
Syntax: @media not|only mediatype and (media
feature) {
CSS-Code;
}

 In this example we use the CSS3 transition
property to animate the width of the search input
when it gets focus.
Example:
input[type=text]
{
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}

Css3 Complete Reference

More Related Content

What's hot (20)

Similar to Css3 Complete Reference (20)

More from EPAM Systems (9)

Recently uploaded (20)

Css3 Complete Reference

Editor's Notes