Skip to main content
Css3

Understanding CSS3 – Part 2

As mentioned in my earlier blog, CSS3 is a simple mechanism for adding styles, for example, fonts, colors, spacing, etc. to web documents. It is a collaboration of CSS2 with some new specifications, which we can call as modules.  Given below are a few more modules.

Shadows:

Shadow Effects

In CSS3 you can add shadow to text and elements.

Text-shadow:

CSS3 supported to add shadow effects to text.

Givenb below is an example to add shadow effects to text:

Text Shadow

.shadow{
height:20px;
width:200px;
float:left;
}
.h1 {
text-shadow: 2px 2px;
}
.h2 {
text-shadow: 2px 2px red;
}
.h3 {
text-shadow: 2px 2px 5px red;
}
<h1 class="h1 shadow">Text Shadow</h1>
<h1 class="h2 shadow">Text Shadow</h1>
<h1 class="h3 shadow">Text Shadow</h1>

 Box Shadow

box-shadow property applies shadow to elements.

In its simplest use, specify the horizontal shadow and the vertical shadow:

 Box Shadow

 div {
width: 300px;
height: 30px;
padding: 10px;
background-color: orange;
box-shadow: 10px 10px #444;
color:#444;
}
<div>This is a div element with a box-shadow</div>

TEXT

CSS3 contains several extra features, which are added later on:

Text-overflow

The text-overflow property determines how overflowed content that is not displayed is signaled to users. The sample example of text overflow is shown as follows:

Text-overflow

  p.text{
     white-space: nowrap; 
  width: 200px; 
     border: 1px solid #000000;
  overflow: hidden;
}
p.text1 {           
text-overflow: clip;
}
 p.text2 {
text-overflow: ellipsis;   
}
b{
 color: #ad212d;
 }
<div>
<b>Original Text:</b>  
      <p>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.</p>     
      <b>Text overflow:clip:</b>  
      <p class="text1 text">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.</p>      
      <b>Text overflow:ellipsis</b>   
      <p class="text2 text">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.</p>
</div>

Word Wrapping

In CSS3 word-wrap property allows long words able to be broken and wrap onto the next line.

If a word is too long to fit within an area, it expands outside:

Word Wrapping

 

.test {
    width: 183px;
    border: 1px solid #000000;
    word-wrap: break-word;
}
<p class="test"> Lorem ipsum dolor sit amet, consectetueradipiscingelit, sed diam nonummynibheuismodtinciduntutlaoreet 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.</p>

Word Breaking

The CSS3 word-break property specifies line breaking rules.

Word Breaking

 .test{
    width: 183px;
    border: 1px solid #000000;
}
.test1 {    
     word-break: keep-all;
}
.test2 {
     word-break:  break-all;
}
<div>
 <p class="test test1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <p class="test test2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

2D TRANSFORMATION

A transformation is an effect that lets an element change shape, size and position.

Translate()

The translate method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

2D TRANSFORMATION

 

div {
    width: 300px;
    height: 75px;
    background-color: orange;
    border: 1px solid black;
    -ms-transform: translate(50px,100px); /* IE 9 */    -webkit-transform: translate(50px,100px); /* Safari */    transform: translate(50px,100px); /* Standard syntax */}
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

Rotate()

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree:

Rotate

div {
    width: 300px;
    height: 70px;
    background-color: yellow;
    border: 1px solid black;
}
.myDiv {
    -ms-transform: rotate(20deg); /* IE 9 */    -webkit-transform: rotate(20deg); /* Safari */    transform: rotate(20deg); /* Standard syntax */    position: relative;
    top: 90px;
    left: 90px;
}
<div>
This a normal div element.
</div>
<div class="myDiv">
The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
</div>

SCALE()

The scale() method increases or decreases the size of an element (according to the parameters given for the width and     height).

SCALE

div {
    margin: 100px;
    width: 200px;
    height: 55px;
    background-color: orange;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */    -webkit-transform: scale(2,3); /* Safari */    transform: scale(2,3); /* Standard syntax */}
    <div>
This div element is two times of its original width, and three times of its original height.
</div>

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

The skewX() Method

div {
   width: 300px;
    height: 100px;
    background-color: orange;
    border: 1px solid black;
}
.myDiv{
    -ms-transform: skewX(20deg); /* IE 9 */    -webkit-transform: skewX(20deg); /* Safari */    transform: skewX(20deg); /* Standard syntax */}
<div>
This a normal div element.
</div>
<div class="mydiv">
The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
</div>

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

The skewY() Method

 

div {
   width: 300px;
    height: 100px;
    background-color: orange;
    border: 1px solid black;
}
.myDiv{
    -ms-transform: skewY(20deg); /* IE 9 */    -webkit-transform: skewY(20deg); /* Safari */    transform: skewY(20deg); /* Standard syntax */    position: relative;
    top: 20px;
}
<div>
This a normal div element.
</div>
<div class="mydiv">
The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
</div>

Don’t miss Part 3 of this blog series!

Adhiyamaan Shanmugam

Adhiyamaan Shanmugam

Adhiyamaan works as Software Engineer with Trigent Software. With over 4 years' experience, Adhiyamaan has worked extensively on software projects with a focus on UI development and implementation. His areas of expertise include HTML/HTML5, CSS/CSS3, JAVASCRIPT, JQUERY and BOOTSTRAP.

One thought on “Understanding CSS3 – Part 2

  1. Wonderful paintings! That is the kind of information that are supposed to be shared across the internet. Disgrace on Google for not positioning this publish upper! Come on over and visit my site . Thanks =)

Comments are closed.