CSS3 Introduction

1,085 views

Published on

CSS3 Introduction

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,085
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
27
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

CSS3 Introduction

  1. 1. CSS3 Introduction
  2. 2. CSS3 is the latest standard for CSS
  3. 3. CSS3 Modules Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface
  4. 4. Border <!DOCTYPE html> <html> <head> <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#01a05f; width:300px; border-radius:25px; } </style> </head> <body> <div>Borderku.</div> </body> </html>
  5. 5. Selector Sample <!DOCTYPE html> <html> <head> <style> [title] { color:blue; } </style> </head> <body> <h2>Selamat:</h2> <h1 title="Datang !">Datang !</h1> <hr> <h2>Bandingkan:</h2> <p>Selamat Datang !</p> </body> </html>
  6. 6. Text Effect <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 10px 10px 10px #ff6b4f; } </style> </head> <body> <h1>Jogja Istimewa Bro !</h1> </body> </html>
  7. 7. Sample Menu <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited {
  8. 8. display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">Berita</a></li> <li><a href="#contact">Gallery</a></li> <li><a href="#about">Kontak</a></li> </ul> </body> </html>
  9. 9. CSS3 Create Multiple Columns <style> .newspaper{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } </style> </head> <body> <h1> STMIK AMIKOM </h1> <div class="newspaper"> Yogyakarta is the only one of the Indonesian, special-territory provinces which has been known as the centers for education in Indonesia and for Javanese culture. STMIK Amikom Yogyakarta is located in the center of Yogyakarta city and in the distance of four kilometers from “Adisucipto” international airport, which lies in the eastern part of Yogyakarta, Indonesia. STMIK AMIKOM students are not only from many different places in Indonesia but from abroad as well.. </div>
  10. 10. • Thanks http://www.gratisan.com http://www.jogjawebcenter.com

×