Cascading Style Sheets (CSS) is a style sheet language used for describing the look
and formatting of a document written in a markup language. CSS3 is a latest standard
of css earlier versions(CSS2). The main difference between css2 and css3 is follows
• Media Queries
• Selectors Level 3
• Color
CSS3 modules
CSS3 is collaboration of CSS2 specifications and new specifications, we can called
this collaboration is module. Some of the modules are shown below
• Selectors
• Box Model
• Backgrounds
• Image Values and Replaced Content
• Text Effects
• 2D Transformations
• 3D Transformations
• Animations
• Multiple Column Layout
• User Interface
CSS3 - Rounded Corners
CSS3 Rounded corners are used to add special colored corner to body or text by using
the border-radius property. A simple syntax of rounded corners is as follows −
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
The following table shows the possible values for Rounded corners as follows −
Values Description
border-radius Use this element for setting four boarder radius
property
border-top-left-radius Use this element for setting the boarder of top left
corner
border-top-right-radius Use this element for setting the boarder of top right
corner
border-bottom-right- Use this element for setting the boarder of bottom
radius right corner
border-bottom-left- Use this element for setting the boarder of bottom left
radius corner
This property can have three values. The following example uses both the values −
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p id="rcorners1">Rounded corners!</p>
<p id="rcorners2">Rounded corners!</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
It will produce the following result −
Each Corner property
We can specify the each corner property as shown below example
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
<body>
It will produce the following result −
CSS3 - Border image
CSS Border image property is used to add image boarder to some elements.you don't
need to use any HTML code to call boarder image.A sample syntax of boarder image is
as follows −
#borderimg {
border: 10px solid transparent;
padding: 15px;
The most commonly used values are shown below −
Values Description
border-image-source Used to set the image path
border-image-slice Used to slice the boarder image
border-image-width Used to set the boarder image width
border-image-repeat Used to set the boarder image as rounded, repeated and
stretched
Following is the example which demonstrates to set image as a border for elements
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
</style>
</head>
<body>
<p id="borderimg1">This is image boarder example.</p>
<p id="borderimg2">This is image boarder example.</p>
<p id="borderimg3">This is image boarder example.</p>
</body>
</html>
It will produce the following result −
CSS3 - Multi Background
Multi Background
CSS Multi background property is used to add one or more images at a time without
HTML code, We can add images as per our requirement.A sample syntax of multi
background images is as follows −
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
the most commonly used values are shown below −
Values Description
background Used to setting all the background image properties in one
section
background-clip Used to declare the painting area of the background
background- Used to specify the background image
image
background- Used to specify position of the background images
origin
background-size Used to specify size of the background images
Following is the example which demonstrate the multi background images
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
</style>
</head>
<body>
<div id="multibackground">
<h1>www.elearninfotech.com</h1>
<p>Elearninfotech originated from the idea that there exists a class of readers
who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms. The journey commenced
with a single tutorial on HTML in 2006 and elated by the response it generated,
we worked our way to adding fresh tutorials to our repository which now proudly
flaunts a wealth of tutorials and allied articles on
topics ranging from programming languages to web designing to academics and much
more..</p>
</div>
</body>
</html>
Size of Multi background
Multi background property is accepted to add different sizes for different images.A
sample syntax is as shown below −
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat,
url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top
repeat;
background-size: 50px, 130px, auto;
As shown above an example, each image is having specific sizes as 50px, 130px and
auto size.
CSS3 - Colors
CSS3 has Supported additional color properties as follows −
• RGBA colors
• HSL colors
• HSLA colors
• Opacity
RGBA stands for Red Green Blue Alpha.It is an extension of CSS2,Alpha specifies
the opacity of a color and parameter number is a numerical between 0.0 to 1.0. A
Sample syntax of RGBA as shown below −
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL stands for hue, saturation, lightness.Here Huge is a degree on the color wheel,
saturation and lightness are percentage values between 0 to 100%. A Sample syntax
of HSL as shown below −
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}
HSLA stands for hue, saturation, lightness and alpha. Alpha value specifies the
opacity as shown RGBA. A Sample syntax of HSLA as shown below −
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
opacity is a thinner paints need black added to increase opacity. A sample syntax of
opacity is as shown below −
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
The following example shows rgba color property
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
</body>
</html>
It will produce the following result −
The following example shows HSL color property
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id="g1">Green</p>
<p id="g2">Normal Green</p>
<p id="g3">Dark Green</p>
</body>
</html>
It will produce the following result −
The following example shows HSLA color property
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id="d1">Less opacity green</p>
<p id="d2">Green</p>
<p id="d3">Green</p>
</body>
</html>
It will produce the following result −
The following example shows Opacity property
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id="m1">Red</p>
<p id="m2">Green</p>
<p id="m3">Blue</p>
</body>
</html>
It will produce the following result −
CSS3 - Gradients
What is Gradients?
Gradients display the combination of two or more colors as shown below −
Types of gradients
• Linear Gradients(down/up/left/right/diagonally)
• Radial Gradients
Linear gradients
Linear gradients are used to arrange two or more colors in linear formats like top to
bottom
Top to bottom
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: -ms-linear-gradient(pink,green);
background: linear-gradient(pink,green);
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
It will produce the following result −
Left to right
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
It will produce the following result −
Diagonal
Diagonal starts at top left and right button
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
It will produce the following result −
Multi color
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue,
green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>
It will produce the following result −
CSS3 Radial Gradients
Radial gradients appears at center
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
It will produce the following result −
CSS3 Repeat Radial Gradients
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
It will produce the following result −
CSS3 - shadow
CSS3 supported to add shadow to text or elements.Shadow property has divided as
follows
• Text shadow
• Box Shadow
Text shadow
CSS3 supported to add shadow effects to text. Following is the example to add
shadow effects to text
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
h2 {
text-shadow: 2px 2px red;
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
h5 {
text-shadow: 0 0 3px #FF0000;
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
</style>
</head>
<body>
<h1>Elearninfotech.com</h1>
<h2>Elearninfotech.com</h2>
<h3>Elearninfotech.com</h3>
<h4>Elearninfotech.com</h4>
<h5>Elearninfotech.com</h5>
<h6>Elearninfotech.com</h6>
<p>Elearninfotech.com</p>
</body>
</html>
It will produce the following result −
Box shadow
Used to add shadow effects to elements,Following is the example to add shadow
effects to element
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>
It will produce the following result −
CSS3 - Text
CSS3 contained several extra features, which is added later on
• text-overflow
• word-wrap
• word-break
There are following most commonly used property in CSS3
Values Description
text-align-last Used to align the last line of the text
text-emphasis Used to emphasis text and color
text-overflow used to determines how overflowed content that is not displayed
is signaled to users
word-break Used to break the line based on word
word-wrap Used to break the line and wrap onto next line
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 −
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
p.text2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
</style>
</head>
<body>
<b>Original Text:</b>
<p>Elearninfotech originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms.</p>
<b>Text overflow:clip:</b>
<p class="text1">Elearninfotech originated from the idea that there exists
a class of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.</p>
<b>Text overflow:ellipsis</b>
<p class="text2">Elearninfotech originated from the idea that there exists
a class of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>
It will produce the following result −
CSS3 Word Breaking
Used to break the line, following code shows the sample code of word breaking
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class="text1">Elearninfotech originated from the idea that there exists a class
of
readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms.</p>
<b>line break at any character</b>
<p class="text2">Elearninfotech originated from the idea that there exists a class
of
readers who respond better to online content and prefer to learn new skills at
their
own pace from the comforts of their drawing rooms.</p>
</body>
</html>
It will produce the following result −
CSS word wrapping
Word wrapping is used to break the line and wrap onto next line.the following code will
have sample syntax
p {
word-wrap: break-word;
}
CSS3 - Web fonts
Web fonts are used to allows the fonts in CSS, which are not installed on local system.
following code shows the sample code of font face
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
div {
font-family: myFirstFont;
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>
It will produce the following result −
Font’s description
The following list contained all the fonts description which are placed in the @font-face
rule −
Values Description
font-family Used to defines the name of font
src Used to defines the URL
font-stretch Used to find, how font should be stretched
font-style Used to defines the fonts style
font-weight Used to defines the font weight(boldness)
CSS3 - 2d Transforms
2D transforms are used to re-change the element structure as translate, rotate, scale,
and skew
The following table has contained common values which are used in 2D transforms
Values Description
translate(x,y) Used to transforms the element along with x-axis and y-axis
translateX(n) Used to transforms the element along with x-axis
translateY(n) Used to transforms the element along with y-axis
scale(x,y) Used to change the width and height of element
scaleX(n) Used to change the width of element
scaleY(n) Used to change the height of element
rotate(angle) Used to rotate the element based on an angle
The following examples are shown the sample of all above properties
Rotate 20 degrees
Box rotation with 20 degrees angle as shown below
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
</style>
</head>
<body>
<div>
Elearninfotech.com.
</div>
<div id="myDiv">
Elearninfotech.com
</div>
</body>
</html>
It will produce the following result −
Rotate -20 degrees
Box rotation with -20 degrees angle as shown below
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
</style>
</head>
<body>
<div>
Elearninfotech.com.
</div>
<div id="myDiv">
Elearninfotech.com
</div>
</body>
</html>
It will produce the following result −
Skew X axis
Box rotation with skew x-axis as shown below
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
</style>
</head>
<body>
<div>
Elearninfotech.com.
</div>
<div id="skewDiv">
Elearninfotech.com
</div>
</body>
</html>
It will produce the following result −
Skew Y axis
Box rotation with skew y-axis as shown below
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
</style>
</head>
<body>
<div>
Elearninfotech.com.
</div>
<div id="skewDiv">
Elearninfotech.com
</div>
</body>
</html>
CSS3 - 3D transforms
Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, Below
example clearly specifies how the element will rotate
Methods of 3D transforms
Below methods are used to call 3D transforms
Values Description
translateX(x) Used to transforms the element by using x-axis
translateY(y) Used to transforms the element by using y-axis
translateZ(z) Used to transforms the element by using y-axis
X-axis 3D transforms
The following an example shows the x-axis 3D transforms
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
</style>
</head>
<body>
<div>
elearninfotech.com
</div>
<p>Rotate X-axis</p>
<div id="myDiv">
elearninfotech.com.
</div>
</body>
</html>
It will produce the following result −
Y-axis 3D transforms
The following an example shows the y-axis 3D transforms
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
</style>
</head>
<body>
<div>
elearninfotech.com
</div>
<p>Rotate Y axis</p>
<div id="yDiv">
elearninfotech.com.
</div>
</body>
</html>
It will produce the following result −
Z-axis 3D transforms
The following an example shows the Z-axis 3D transforms
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
</style>
</head>
<body>
<p>rotate Z axis</p>
<div id="zDiv">
elearninfotech.com.
</div>
</body>
</html>
It will produce the following result −
CSS3 - Animation
Animation is process of making shape changes and creating motions with elements.
@keyframes
Keyframes will control the intermediate animation steps in CSS3.
Example of key frames with left animation
@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
The above example shows height, width, color, name and duration of animation with
keyframes syntax
Moving left animation
<html>
<head>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
to {
margin-left:0%;
width:100%;
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
to {
margin-left:0%;
width:100%;
</style>
</head>
<body>
<h1>Elearninfotech</h1>
<p>this is an example of moving left animation .</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
</script>
</body>
</html>
It will produce the following result −
Moving left animation with keyframes
<html>
<head>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
75% {
font-size:300%;
margin-left:25%;
width:150%;
to {
margin-left:0%;
width:100%;
</style>
</head>
<body>
<h1>Elearninfotech</h1>
<p>This is an example of animation left with an extra keyframe to make text
changes.</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
</script>
</body>
</html>
It will produce the following result −
CSS3 - Multi columns
CSS3 supported multi columns to arrange the text as news paper structure.
Some of most common used multi columns properties as shown below −
Values Description
column- Used to count the number of columns that element should be
count divided
column-fill Used to decide, how to fill the columns
column-gap Used to decide the gap between the columns
column-rule Used to specifies the number of rules
rule-color Used to specifies the column rule color
rule-style Used to specifies the style rule for column
rule-width Used to specifies the width
Below example shows the arrangement of text as new paper structure.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
</style>
</head>
<body>
<div class="multi">
Elearninfotech originated from the idea that there exists a class of readers who
respond
better to online content and prefer to learn new skills at their own pace from the
comforts
of their drawing rooms. The journey commenced with a single tutorial on HTML in
2006 and
elated by the response it generated, we worked our way to adding fresh tutorials to
our
repository which now proudly flaunts a wealth of tutorials and allied articles on
topics
ranging from programming languages to web designing to academics and much more.
</div>
</body>
</html>
It will produce the following result −
For suppose, if user wants to make text as new paper without line, we can do this by
removing style syntax as shown below
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
It will produce the following result −
CSS3 - Responsive
CSS3 Responsive Web Design
Responsive web design provides an optimal experience, easy reading and easy
navigation with a minimum of resizing on different devices such as desktops, mobiles
and tabs)
Responsive structure
Below image shows the responsive structure of web pages.
Flexible Grid demo
<html>
<head>
</head>
<style>
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue
Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
.container:before, .container:after {
content: "";
display: table;
.container:after {
clear: both;
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
.container-75 {
width: 75%;
.container-50 {
margin-bottom: 0;
width: 50%;
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
section {
float: left;
width: 63.197026%;
aside {
float: right;
width: 29.3680297%;
</style>
<body>
<h1>100% Wide Container</h1>
<div class="container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class="container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class="container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>
