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

• Backgrounds

• Colors

• Gradients

• Text Effects

• User Interface

• Selectors

• Font Face

• Transform

• Transition

• Animation

• Media Queries

Browser Support

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 border-color

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 no-repeat;

• -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 no-repeat, 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

26

• 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

• 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:

Transform – 2d translate() method

28

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

Transform – 2d rotate() method

29

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):

30

Transform – 2d skew() method • With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-

axis) and the vertical (Y-axis) lines:

31

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.

32

Transform – 3d rotateX() method • With the rotateX() method, the element rotates around its X-axis at a given degree.

33

Transform – 3d rotateY() method • With the rotateY() method, the element rotates around its Y-axis at a given degree.

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!!!

Thank You.

Thank You.

facebook.com/renzilde

twitter.com/renzilde

linkedin.com/in/renzilde