CSS3 Introduction
1 like1,252 views
CSS3 is the latest standard for cascading style sheets (CSS). CSS3 introduces several new modules that expand the capabilities of CSS, including selectors, box model, backgrounds/borders, image values, text effects, transformations, animations, multiple column layout, and user interface. The document provides examples of CSS3 properties and modules, demonstrating borders, selectors, text effects, menus, and creating multiple columns. It concludes by thanking some websites for information on CSS3.
![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>](https://image.slidesharecdn.com/css3-131118204228-phpapp01/85/CSS3-Introduction-6-320.jpg)
CSS3 Introduction
- 2. CSS3 is the latest standard for CSS
- 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
- 5. 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>
- 6. 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>
- 7. Text Effect <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 10px 10px 10px #ff6b4f; } </style> </head> <body> <h1>Jogja Istimewa Bro !</h1> </body> </html>
- 10. 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>
- 11. 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>