Css3.pdf

Cascading Style Sheets3 (CSS3) 1. It is a style sheet language used for describing the look and formatting of a document written in a markup language. 3. CSS3 is a latest of CSS. CSS3 modules Selectors Box Model Backgrounds Image Values and Replaced Content Text Effects

CSS3 modules list 2D Transformations 3D Transformations Animations Multiple Column Layout User Interface

CSS3 - Rounded Corners <style type="text/css"> #roundcorner { border-radius: 25px; border: 2px solid yellow; background: pink;padding: 20px; width: 200px; height: 150px; }

Rounded corners!

Check for Border Radius 1. 15px 50px 30px 5px; 2. 15px 50px 30px; 3. 15px 50px;

Image <style type="text/css"> #image1 { border: 10px solid transparent; padding: 90px; border-image-source: url(file:///C:/Users/MDV%20PRASAD/Desktop/css3/rose.jpg); border-image-repeat: round ; border-image-width: 200px;

Image boarder.

Multi Back Ground <style> div { padding: 10px; opacity: 0.7; text-align: center; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; margin: 0px 50px 0px 50px; left: 0px; width: 326px; }







DIV #1-position: absolute; -zindex: 5;
DIV #2-position: relative;-z-index: 3;

2D - Rotation <style type="text/css"> div { width: 300px; height: 100px; background-color: Green; border: 1px solid black; } div#myDiv { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); Safari */

/*

transform: rotate(20deg); /* Standard syntax */ }

3D- Rotation <style type="text/css"> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); transform: rotateX(150deg); /* Safari */ }

Rotate X-axis

Animation <style type="text/css"> .rotatingimg{transition: transform 2s;} .rotatingimg:hover{transform:rotate(360deg);}

Text <style type="text/css"> p.text1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } Original Text:

123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh

Text overflow

It (Image) Rotates.

Box <style type="text/css"> .div1 { width: 200px; height: 100px; border: 1px solid green; }


Multi Columns <style type="text/css"> .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; }