Css3

CSS 3
New way of Designing

Renzil D’cruz
http://RenzilDe.com
http://about.me/renzilde
http://linkedin.com/in/renzilde

What is CSS?
• CSS – Cascading Style Sheet
• Used to control the layout and presentation layer of a web page.

Then What is CSS?
• 3 - Latest Version/Standard of css
• It is completely backwards compatible, so you will not have to change
existing designs. Browsers will always support CSS2.
• CSS3 is split up into "modules” rather than just selectors and properties
• The Specification is still under development by W3c
• Lot of css3 modules and properties are supported in few or many modern
browsers today

What is New in CSS3?

• Richness
• Effects

• Interactions
• Typography
• Animations

CSS3 Modules

• Borders

• Selectors

• Backgrounds

• Font Face

• Colors

• Transform

• Gradients

• Transition

• Text Effects

• Animation

• User Interface

• Media Queries

Borders – Border Color
Create cool colored borders / filled effect
• If you have a standard border of X pixels, then you can use up to
X colors on that border, each color registering 1 pixel in width.
• If say you are using a standard border of 10 pixels but only apply 5
or 6 colors, the last color will then be applied to the remaining
standard border width.
Compatibility:
– Currently Firefox is the only browser giving support to the CSS3 bordercolor

Border – Image Create borders using image
• The new CSS3 property border-image is a little tricky, but it can allow you to create flexible
boxes with custom borders
• Eg. border-image:url(border.png) 50 50 50 50 round;
• It has 3 parts
•

An image to use as the border

•

Where to slice that image, dividing the image into 9 sections
–

•

Slice from top right bottom left (pixels/percentage)

How the browser should apply those sections to the edges of your element
–

Repeat, Round, Stretch
•
•
•

Repeat (repeat, or tile, the image) and stretch (stretch, or scale, the image) are pretty self-explanatory.
Round means tile the image but only so that a whole number of tiles fit, and otherwise scale the image.
Right now, Safari and Chrome interpret round as repeat.

Compatibility: currently works in Safari and Firefox 3.1 (Alpha).

Borders – Border Radius
Create Rounded Corners
• #my_CSS3_id {
• border: 10px solid #c4c8cc;

•

-moz-border-radius: 15px;

•

-webkit-border-radius: 15px;

•

border-radius: 15px;

• }
Compatibility:
– The Prefixes:
-moz (e.g. -moz-border-radius) works in Firefox.
-webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome.

Box Shadow
• Used in casting shadows off block-level elements (like divs).
• Eg. .shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: inset 5px 5px 5px #ccc; /* inset */}
• - The horizontal offset of the shadow, positive means the shadow will be on the right of the
box, a negative offset will put the shadow on the left of the box.
• - The vertical offset of the shadow, a negative one means the box-shadow will be above the
box, a positive one means the shadow will be below the box.
• - The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more
blurred it will be.

• - Color
Compatibility: currently works in Firefox, Safari, Chrome and Opera 10.50 pre-alpha:

Backgrounds – Origin
• The background-origin property is used to determine how the
background-position of a background in a certain box is calculated.
• Eg. .origin {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box; }

• border-box,
• padding-box and
• content-box
Compatibility: Mozilla, Safari 3 and Konqueror

Background Image - Size
• We can now apply dimension to the bg images
• Eg. .image_size {
background:url(image_1.extention) bottom right norepeat;
•

-moz-background-size: 100px 200px;

•

-o-background-size: 100px 200px;

•

-webkit-background-size: 100px 200px;

}

Compatibility: Opera 9.5, Safari 3 and Konqueror, Firefox latest

Background Image - Multiple
• No need for nested div for multiple bg
• Eg. .multiple_image {
background: url(image_1.extention) top left norepeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat; }
• The first one is on top and than….
Compatibility: Opera 9.5, Safari 3 and Konqueror, Firefox
latest

Colors – rgb/rgba
• a=“alpha” allows to set opacity while specifying the color
• Eg. .alpha {
background:rgba(153, 134, 117, 0.2); height:20px; }

Compatibility: RGBA is currently better supported in Firefox,
Google Chrome and Safari, also not requiring any prefix.

13

Colors – hsl/hsla
• The HSL declaration sets color/color using Hue (H), Saturation (S) and
Lightness (L).
• Eg. .shadow {
background:hsl(320, 100%, 25%); height:20px; }

• Hue is derived from a degree on the color wheel: 0 & 360 being red, around
120 for the greens, 240 for the blues and everything else in between
• Saturation is a percentage: 0% being grayscale and 100% in full color

• Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest
– Color
• Alpha – sets the opacity

Compatibility: HSL & HSLA is currently well supported in Firefox Google
Chrome and Safari, also not requiring any prefix.

Gradients
• Create some nice subtle gradients; or very compelling gradients!

• Eg. .gradient {
background:-moz-linear-gradient(pos, #AAA B, #XXX Y); }
pos = the position of the first colour, giving direction to the gradient
• #AAA = primary colour

• B = where the fade begins (%)
• #XXX = secondary colour
• Y = where the fade begins (%)
• - It becomes complex when it comes to radial gradients, requires lot of experiment to get the
desired effect
• - The suggestion is to used online tools to get the desired gradient

Compatibility : Firefox 3.6 , Safari 4 , Google Chrome

Text – shadow/effects
• Like with the box-shadow effect, we can apply shadows to text
using CSS3.
• Eg. .tShadow {
text-shadow: Apx Bpx Cpx #XXX; /*single*/

}

• Apx = x-axis
• Bpx = y-axis

• Cpx = cast length / feathering
• #XXX = colour as usual

Compatibility: Opera, Konqueror, iCab and Firefox 3.1a,

Text – Overflow
• The text-overflow property specifies what should happen when
text overflows the containing element.
• div.test{
text-overflow:ellipsis;
}
• clip - Clips the text
• ellipsis - Render an ellipsis ("...") to represent clipped text
Compatibility: The text-overflow property is supported in all major
browsers. But support in Firefox works after adding an xml file

Text – Word Wrap
• The word-wrap property was invented by Microsoft and
added to CSS3. It allows long words to be able to be broken
and wrap onto the next line. It takes in two values; normal
or break-word.
• p {word-wrap:break-word;}
• -

normal - This is the same as if the property wasn’t used,

• break word - the long word is broken into two pieces, so
that the second part wraps onto the next line.
Compatibility: This is currently supported in IE, Safari, and
Firefox 3.1 (Alpha).

Interface – resize
• Now specify whether an element can be resized by the user
• Eg. .resize {resize:both;overflow:auto}
• horizontal
• vertical
• both
• In order for the resize property to work, the element must also have an
overflow value set to either “scroll”, “auto”, or “hidden”, or else it has to
inherit one of those values from its parent. Resize will not work if the
overflow value is set to “visible”, which is the default for overflow.

Compatibility: Firefox 4+, Chrome, and Safari.

Interface – Outline Offset
• The outline-offset property offsets an outline, and draws it
beyond the border edge.
• Outlines differ from borders in two ways:
• - Outlines do not take up space
• - Outlines may be non-rectangular (still not clear to me)
• div{

border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Compatibility: This currently works in Opera, Safari and Firefox.

Selectors - Attribute
• Substring matching attribute selectors
– Three additional attribute selectors are provided for matching
substrings in the value of an attribute:
– [att^=val] Represents an element with the att attribute whose
value begins with the prefix “val”.
– [att$=val] Represents an element with the att attribute whose value
ends with the suffix “val”.
– [att*=val] Represents an element with the att attribute whose
value contains at least one instance of the substring “val”. Attribute
values must be identifiers or strings.

Selectors – css3 selectors
p:first-of-type - Selects every p element that is the first p element of its parent
p:last-of-type - Selects every p element that is the last p element of its parent
p:only-of-type - Selects every p element that is the only p element of its parent
p:only-child - Selects every p element that is the only child of its parent
p:nth-child(n=2) - Selects every p element that is the second child of its parent
p:nth-last-child(n=2) - Selects every p element that is the second child of its parent, counting
from the last child
p:nth-of-type(n=2) - Selects every p element that is the second p element of its parent
p:nth-last-of-type(n) - Selects every p element that is the second p element of its parent,
counting from the last child

p:last-child - Selects every p element that is the last child of its parent
:root - Selects the document’s root element
p:empty - Selects every p element that has no children (including text nodes)
p:target - URLs with an # followed by an anchor name, link to a certain element within a
document. The element being linked to is the target element.
input:enabled - Selects every enabled input element
input:disabled - Selects every disabled input element

input:checked - Selects every checked input element [only opera]
:not(selector=p) - Selects every element that is not a p element [no browser support this]
::selection - Selects the portion of an element that is selected by a user

@font-face
• - Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using
an image? Use CSS 3 and embed a font-face!
- @font-face is not strictly speaking ‘CSS3′; it was originally born in CSS 2 and although not
appearing in CSS 2.1, CSS 3 is attempting to bring it into the standards.
- In order to use a font, we first must call it using the ‘@font-face’ attribute and this must be
done for each individual font we wish to use.
• Formats:
• - TTF - Works in most browsers except IE and iPhone.
• - EOT - IE only.
• - WOFF - Compressed, emerging standard.
• - SVG – iPhone/iPad.

• Make sure you check license of the font before using it
• Need font format for each font style eg. Bold, regular, italics etc.

Transform
• A transform is an effect that lets an element change shape,
size and position.
• With CSS3 transform, we can move, scale, turn, spin, and
stretch elements.
• You can transform your elements using 2D or 3D
transformation.

Transform – 2d translate() method
•

With the translate() method, the element moves from its current position, depending
on the parameters given for the left (X-axis) and the top (Y-axis) position:

26

Transform – 2d translate() method
•

With the translate() method, the element moves from its current position, depending on the parameters given for the
left (X-axis) and the top (Y-axis) position:

27

Transform – 2d rotate() method
•

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the
element counter-clockwise.

28

Transform – 2d scale() method
•

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width
(X-axis) and the height (Y-axis):

29

Transform – 2d skew() method
•

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (Xaxis) and the vertical (Y-axis) lines:

30

Transform – 2d matrix() method
•
•

The matrix() method combines all of 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.

31

Transform – 3d rotateX() method
•

With the rotateX() method, the element rotates around its X-axis at a given degree.

32

Transform – 3d rotateY() method
•

With the rotateY() method, the element rotates around its Y-axis at a given degree.

33

Transition
• With CSS3, we can add an effect when changing from one style to
another, without using Flash animations or JavaScripts.
To do this, you must specify two things:
– Specify the CSS property you want to add an effect to

– Specify the duration of the effectt

• Transition can be applied to
- color
- background color
- font-size
- width
- opacity
- position

Animation
• We can create animations, which can replace animated images, Flash
animations, and JavaScripts in many web pages.
• To create animations in CSS3, you will have to learn about the @keyframes
rule.
• The @keyframes rule is where the animation is created. Specify a CSS style
inside the @keyframes rule and the animation will gradually change from the
current style to the new style.
• When the animation is created in the @keyframe, bind it to a selector,
otherwise the animation will have no effect.
• Bind the animation to a selector by specifying at least these two CSS3
animation properties:
• Specify the name of the animation
• Specify the duration of the animation

CSS3 Resources
• http://robertnyman.com/css3/
• http://www.css3.info/preview/
• http://www.zenelements.com/blog/

• http://css-tricks.com/snippets/css/
• http://www.w3schools.com
• http://www.impressivewebs.com/

CSS3 Support
• http://www.w3schools.com/cssref/css3_browsersupport.asp

• http://findmebyip.com/litmus/

CSS3 websites - Tools
•

http://selectivizr.com/ - Support for selectors

•

http://css3pie.com/ - support for ie6-9

•

http://www.modernizr.com/ - applies class depending on the css3 properties for us to control the progressive
enhancement

•

http://www.findmebyip.com/litmus/#target-selector - check the support

•

http://www.layerstyles.org/builder.html

•

http://www.wordpressthemeshock.com/css-drop-shadow/

•

http://border-radius.com/

•

http://css-tricks.com/examples/ButtonMaker/

•

http://gradients.glrzad.com/

•

http://css3generator.com/

•

http://gradients.glrzad.com/

Thank You.
• Questions ???

• Comments #@$%
• Concerns !!!

Be Creative!!!
facebook.com/renzilde
twitter.com/renzilde
linkedin.com/in/renzilde

Css3

More Related Content

What's hot (13)

Viewers also liked (10)

Similar to Css3 (20)

More from Renzil D'cruz (20)

Recently uploaded (20)

Css3