MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Use Modules in CSS3

Today we are going to learn “How to Use Modules in CSS3”. In this section, we are going to learn how we can create smooth and maintainable animations that work well and that don’t require assemblage of scripting.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction:

CSS3 is advanced version of CSS2, which is embedded with HTML, XHTML, XML etc to give better look and feel to the pages created on any of the above markup languages and to provide more control over web pages, faster page loading, efficiency and easy accessibility.

Why do we need CSS3 Modules?

The features, convenience & ease of usage provided by CSS3 are its main advantage.CSS3 is split up into “modules” to enhance the presentation of our web page. We can split old specification and new ones can be added to it.

Modules of CSS3:

  • Selectors
  • User Interface
  • Backgrounds and Borders
  • Animations
  • Text Effects
  • 2D Transformations
  • 3D Transformations
  • Multiple Column Layout
  • Selectors are powerful structures analysing the hierarchy of a document and make selections according to the relationships between elements.

Some of the Selectors are:

Selector Usability Example
* It will target all the elements of a web page. * { margin: 10; padding: 10; }
.X This is a class selector. With which we can target multiple elements. .error { color: blue ; }
X Y Descendant selector is used to be more specific with our selector. li a { textdecoration: underline; }
X if we want to target all elements on a page, according to their type. a { color: blue; }
X+Y adjacent selector will select only the element that is immediately preceded by the sucessor element. In this case, only the first paragraph after each ul will have red text. ul+p { color: red; }
X>Y It will only select direct children div#container > ul { border: 1px solid black; }
X~Y It will select any p elements, as long as they follow a ul. ul~p { color: red; }
a[href$=".jpg"] It will search all anchor tag which have link to a image of type .jpg a[href$=".jpg"] { color: red; }

User Interface. This module was extended with additional methods to assign new styles to a web document and is actually at the status of Candidate or User Recommendation.

Some Common User Interface are:

1.Distributing Box It allows us to do Horizontal or vertical distribution.The boxorient property lets you specify the distribution axis. vertical andhorizontal values define how boxes are displayed.

Listing 1: Code to demonstrate distribution in box

body{
  display: box;
  boxorient: horizontal/vertical;
}
Output 1

Figure 1: Output 1

Explicit distribution: The property boxordinalgroup lets we specify the order in which the boxes will be distinguished. This is the best customization opportunity, because we can define the order we want, regardless of the HTML (default) flow.

Listing 2:Code to demonstrate Explict distribution

body {
  display: box;
  boxorient: vertical;
  boxdirection : reverse;
}
#box1 {
  boxordinalgroup: 2;
}
#box2 {
  boxordinalgroup: 2;
}
#box3 {
  boxordinalgroup: 1;
}
Output 2

Figure 2: Output 2

Flexible Box Sizing:

By default, a box is not flexible. We can make it flexible by using the property boxflex with a value of at least 1.

If we do not want to make a box flexible we will make it as wide as possible to make its content visible without any overlapping of contents. Its size can be forced with the properties width and height.

Listing 3: Code to create flexible box

body {
  display: box;
  boxorient: horizontal;
}
#box1 {
  boxflex: 2;
}
#box2 {
  boxflex: 1;
}
#box3 {
  boxflex: 1;
}
Output 3

Figure 3: Output 3

Borders and Backgrounds: This module contains some specific functions dealing with borders and backgrounds like shapes, rounding borders and extending background images.

Listing 4: Program that write text on background image

<html>
<head>
<style> 
div
{
background:url(img_flwr.gif);
backgroundsize:100% 100%;
backgroundrepeat:norepeat;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</body>
</html>

CSS Animations: This module deals with new properties controlling the stages of an animation (i.e. a sequence or in random).

Listing 5: Program to demonstrate a type of animation

<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
webkitanimation:myfirst 5s; 
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@webkitkeyframes myfirst 
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

Text module proposes new values and properties to control the text with the purpose of internationalization of how these properties are defined.

Two types of texting we can do here:

Text Shadow: It will display the shadow of the text.

Listing 6: Program to create Text shadow

<html>
<head>
<style>
h1
{
textshadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

<h1>Textshadow effect!</h1>

</body>
</html>
Text shadow effect

Figure 4: Text shadow effect

Word Wrap: It will wrap the contents of one line to the next line automatically if the first line is completely filled.

Listing 7: Program to demonstrate word wrap

<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
wordwrap:breakword;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: this is a very very very very very very long word. The long word will break and wrap to the next line.</p>
</body>
</html>

Output:

This paragraph contains a very long word: this
is a very very very very very very long word.
The long word will break and wrap to the
next line

The 2D Transformations module utilize the CSS several concepts already used in Scalable Vector Graphic SVG such as rotation, scaling and transformation of the elements.

3D Transformations Module adds new spec for 3D transformations of the elements.

There are two types of 3D Transformation:

rotateX(): The rotateX() method, the element rotates around its Xaxis at a given degree.

<html>
<head>
<style> 
div
{
width:100px;
height:75px;
backgroundcolor:red;
border:1px solid black;
}
div#div7
{
transform:rotateX(120deg);
webkittransform:rotateX(120deg); 
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div7">Hello. This is a DIV element.</div>
</body>
</html>
Output 5

Figure 5: Output 5

rotateY(): The rotateY() method, the element rotates around its Yaxis at a given degree.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
backgroundcolor:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
webkittransform:rotateY(130deg); 
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Output 6

Figure 6: Output 6

Multiple column Layout module deals with new options to manage the multi column in a layout. Its implementation status is always be Last Call.

Some Common methods are:

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper
{
mozcolumncount:3; 
webkitcolumncount:3; 
columncount:3; //breaks column in 3 pieces
mozcolumngap:40px; 
webkitcolumngap:40px; 
columngap:40px; //specify gap between each column

mozcolumnrule:4px outset #ff00ff; 
webkitcolumnrule:4px outset #ff00ff; 
columnrule:4px outset #ff00ff;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>

Conclusion:

In this article, we studied how can we create attractive and efficient presentation of our web page with the help of css in efficient manner. How we can achieve different types of border and backgrounds using css3.

More about CSS3 Modules



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login