<< Back to the blog

CSS3 - Part1




By @islamzatary

CSS2 Review

(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.
the language can be applied to any kind of XML document.

Three ways to add your style to HTML elemets: 1. Inline.
2. Internal.
3. External.

CSS 2 cheat sheet

CSS cheat sheet
Browsers' default CSS for HTML elements
IE's
Chrome/Safari
Mozilla
Normalize.css makes browsers render all elements more consistently and in line with modern standards.

CSS3 modules

CSS 3 is divided into several separate documents called "modules"
Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility.
Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation.

CSS3 modules

Some of 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
CSS3 Module Status

CSS3 - Border(radius, shadow, image)

Border Radius.
Default value (none).
Defines the shape of the corners.


Can i use border radius

CSS3 - Border(radius, shadow, image)

Box Shadow.
Default value is 0.
Horizontal shadow (R).
Vertical shadow (R).
The blur distance (O).
The size of shadow (O).
The color of the shadow (O).
inset - Inner shadow (O).
initial - Sets to default value.
negative, percentage & color.


Can i use box shadow

CSS3 - Border(radius, shadow, image)

Border Image.
Default value (none).
The path to the image.
Border-image-slice(inward offsets of the image-border).
Border-image-width
Border-image-outset(area extends beyond the border box)
Border-image-repeat(rounded or stretched)


Can i use border image

CSS3 - Part1






Wrapping up








<< Back to the blog

by @islamzatary