CSS3 – Few Tips on CSS3

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

CSS3 Modules

CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added.

Logo - [Allowed to use only on this blog - Copyrights]

Logo – [Allowed to use only on this blog – Copyrights]

Some of the most important CSS3 modules are:

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border – without using a design program, like Photoshop.

In this you will learn about the following border properties:
border-radius
box-shadow
border-image

Browser Support
Internet Explorer 9 supports two of the new border properties.
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Opera requires the prefix -o- for border-image.
Opera supports the new border properties.

CSS3 Rounded Corners
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:

Example
Add rounded corners to a div element:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

CSS3 Box Shadow
In CSS3, the box-shadow property is used to add shadow to boxes:

Example
Add a box-shadow to a div element:
div{
box-shadow: 10px 10px 5px #888888;
}

CSS3 Border Image
With the CSS3 border-image property you can use an image to create a border:
Example
Use an image to create a border around a div element:
div{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

New Border Properties

Property Description CSS
border-image A shorthand property for setting all the border-image-* properties 3
border-radius A shorthand property for setting all the four border-*-radius properties 3
box-shadow Attaches one or more drop-shadows to the box 3

CSS3 Backgrounds
CSS3 contains several new background properties,
which allow greater control of the background element.
In this chapter you will learn about the following background properties:

  • background-size
  • background-origin

You will also learn how to use multiple background images.

CSS3 Backgrounds
CSS3 contains several new background properties,
which allow greater control of the background element.
In chapter you will learn about the following background properties:

  • background-size
  • background-origin

Logo - [Allowed to use only on this blog - Copyrights]

Logo – [Allowed to use only on this blog – Copyrights]


CSS3 The background-size Property

The background-size property specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts. You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

Example 1
Resize a background image:
div{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

Example 2
Stretch the background image to completely fill the content area:
div{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;}


CSS3 The background-origin Property

The background-origin property specifies the positioning area of the background images.
Example
Position the background image within the content-box:
div{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 Multiple Background Images  
CSS3 allows you to use several background images for an element.

Example
Set two background images for the body element:
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}


New Background Properties

Property Description CSS
background-clip Specifies the painting area of the background images 3
background-origin Specifies the positioning area of the background images 3
background-size Specifies the size of the background images 3

CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:

  • text-shadow
  • word-wrap

CSS3 Text Shadow
In CSS3, the text-shadow property applies shadow to text. You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Example
Add a shadow to a header:
h1{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3 Word Wrapping

In CSS3, the word-wrap property allows you to force the text to wrap – even if it means splitting it in the middle of a word:

The CSS code is as follows:
Example

Allow long words to be able to break and wrap onto the next line:
p {word-wrap:break-word;}

New Text Properties

Property Description CSS
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box 3
punctuation-trim Specifies whether a punctuation character should be trimmed 3
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” 3
text-emphasis Applies emphasis marks, and the foreground color of the emphasis marks, to the element’s text 3
text-justify Specifies the justification method used when text-align is “justify” 3
text-outline Specifies a text outline 3
text-overflow Specifies what should happen when text overflows the containing element 3
text-shadow Adds shadow to text 3
text-wrap Specifies line breaking rules for text 3
word-break Specifies line breaking rules for non-CJK scripts 3
word-wrap Allows long, unbreakable words to be broken and wrap to the next line 3
Logo - [Allowed to use only on this blog - Copyrights]

Logo – [Allowed to use only on this blog – Copyrights]

The CSS3 @font-face Rule

Before CSS3, web designers had to use fonts that were already installed on the user’s computer. With CSS3, web designers can use whatever font he/she likes.
When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your “own” fonts are defined in the CSS3 @font-face rule.

Using The Font You Want

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. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example
<style type=”text/css”>
@font-face{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>


Using Bold Text

You must add another @font-face rule containing descriptors for bold text:
Example
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}

The file “Sansation_Bold.ttf” is another font file, that contains the bold characters for the Sansation font. Browsers will use this whenever a piece of text with the font-family “myFirstFont” should render as bold. This way you can have many @font-face rules for the same font.


CSS3 Font Descriptors
The following table lists all the font descriptors that can be defined inside the @font-face rule:

Descriptor Values Description
font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default is “normal”
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default is “normal”
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default is “normal”
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is “U+0-10FFFF”

CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.


How does it work?
CSS3 transitions are effects that let an element gradually change from one style to another.To do this, you must specify two things:

  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect.

Example

Transition effect on the width property, duration: 2 seconds:
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /*
}
Note: If the duration is not specified, the transition will have no effect, because default value is 0. The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Example

Specify :hover for <div> elements:
div:hover{
width:300px;
}

Multiple changes
To add a transitional effect for more than one style, add more properties, separated by commas:
Example
Add effects on the width, height, and the transformation:
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Logo - [Allowed to use only on this blog - Copyrights]

Logo – [Allowed to use only on this blog – Copyrights]

Transition Properties
The following table lists all the transition properties:

Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-property Specifies the name of the CSS property to which the transition is applied 3
transition-duration Defines the length of time that a transition takes. Default 0 3
transition-timing-function Describes how the speed during a transition will be calculated. Default “ease” 3
transition-delay Defines when the transition will start. Default 0 3

The two examples below sets all transition properties:

Example
Use all transition properties in one example:
div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Example
The same transition effects as above, using the shorthand transition property:
div{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

Sample Templates of Website

Advertisements

4 thoughts on “CSS3 – Few Tips on CSS3

  1. Pingback: CSS3 – Few Tips on CSS3 | Designing | responsive design II | Scoop.it

  2. Pingback: CSS3 – Few Tips on CSS3 | Web Designing - Top Tips for Web Developments | Scoop.it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s