Pertemuan 5 Format Tampilan Visual Web dengan CSS3

Pertemuan 5

Format Tampilan Visual Web Dengan CSS3

Web Statis
SKB112316

Oleh : Wahyu Widodo

Membuat Efek Bayangan Pada Teks
Rumus sintak

text-shadow: h-shadow v-shadow blur color;

Contoh :

Coba juga untuk h2 :

Bagaimana caranya supaya style h1 berlaku untuk h2 ?

Membuat bingkai pada element

Property values pada border :
1.border-width
2.border-style
3.border-color

Contoh :

Dapat juga ditulis menjadi 1 baris :

Menambah efek melengkung :

Menambah efek bayangan :

Coba buat supaya :
⇒
tampilannya text tidak mepet baris....
⇒
kasih background warna agak lembut

Membuat warna gradient

Rumus umum :
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Top to Bottom

contoh diagonal

Membuat bingkai dari gambar
Rumus Sintak :
border-image: source slice width outset repeat;

Referensi : http://www.w3schools.com

Tugas
Mewarnai layout template web
Timeline
: 23 Oktober - 6 November 2014
Waktu deadline
: 00.00 WIB
Bobot Point
: 30 ( pengganti presentasi )

Prototipe Layout Web Semantik Sebagai Berikut :

Petunjuk Mengerjakan :
1.Gunakan source layout semantik yang sudah ada di
elera.stmikelrahma.ac.id
2.Tuliskan kode css sesuai nama class yang ada pada layout
semantik
3.Kirimkan source code anda, index.html dan style.css dalam format
zip ke : elera.stmikelrahma.ac.id