CSS3 Introduction

CSS3 is the latest standard for CSS

CSS3 Modules
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

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>

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>

Text Effect
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 10px 10px 10px #ff6b4f;
}
</style>
</head>
<body>
<h1>Jogja Istimewa Bro !</h1>
</body>
</html>

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
{

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>

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>

• Thanks
http://www.gratisan.com
http://www.jogjawebcenter.com

CSS3 Introduction

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à CSS3 Introduction

Similaire à CSS3 Introduction (20)

Dernier

Dernier (20)

CSS3 Introduction