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
CSS3-Round 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
CSS3-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
CSS3Imagemultibackground <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
CSS#-Rotate <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 */ }
Rotate
Rotate
3D- Rotation
CSS3-3D-Rotate <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 */ }
tutorials point.com
Rotate X-axis
tutorials point.com.
Animation
CSS3-Animation <style type="text/css"> .rotatingimg{transition: transform 2s;} .rotatingimg:hover{transform:rotate(360deg);}
Text
CSS3-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
CSS3-Text <style type="text/css"> .div1 { width: 200px; height: 100px; border: 1px solid green; }
Box Text
Multi Columns
CSS3-MultiColumns <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; }
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 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh 123456789 abcdefgh