Css3.pdf

  • Uploaded by: Mdv Prasad
  • 0
  • 0
  • April 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Css3.pdf as PDF for free.

More details

  • Words: 516
  • Pages: 5
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

More Documents from "Mdv Prasad"

Css3.pdf
April 2020 10
Training Material.docx
April 2020 1
Html.docx
April 2020 9
Ajax.docx
April 2020 10
Training.docx
April 2020 2