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