12
CSS3 Introduction

CSS3 Introduction

Embed Size (px)

DESCRIPTION

CSS3 Introduction

Citation preview

Page 1: CSS3 Introduction

CSS3 Introduction

Page 2: CSS3 Introduction

CSS3 is the latest standard for CSS

Page 3: CSS3 Introduction

CSS3 Modules

SelectorsBox ModelBackgrounds and BordersImage Values and Replaced ContentText Effects2D/3D TransformationsAnimationsMultiple Column LayoutUser Interface

Page 4: CSS3 Introduction
Page 5: CSS3 Introduction

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>

Page 6: CSS3 Introduction

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>

Page 7: CSS3 Introduction

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

<h1>Jogja Istimewa Bro !</h1>

</body></html>

Page 8: CSS3 Introduction
Page 9: CSS3 Introduction

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{

Page 10: CSS3 Introduction

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>

Page 11: CSS3 Introduction

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 thecenters for education in Indonesia and for Javanese culture. STMIK Amikom Yogyakarta is located inthe center of Yogyakarta city and in the distance of four kilometers from “Adisucipto” internationalairport, which lies in the eastern part of Yogyakarta, Indonesia. STMIK AMIKOM students are not onlyfrom many different places in Indonesia but from abroad as well..</div>

Page 12: CSS3 Introduction

• Thanks

http://www.gratisan.comhttp://www.jogjawebcenter.com