css web design for collage student
DESCRIPTION
CSS WEB Design for Collage Engineering Student, EEPIS-ITS SUrabaya IndonesiaTRANSCRIPT
Tugas Pertemuan 9
1. Text bershadow menggunakan CSS
Syntax
Syntax untuk membuat text-shadow sederhana adalah sebagai berikut: Ada 4 variable yang bisa di-ubah, yaitu: pertama, dua variable untuk mengatur posisi bayangan, ke tiga variable untuk pengaturan blur, dank e empat variable pengaturan warna bayangan
text-shadow: horizontal-offset vertical-offset blur color;sebagai contohtext-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Berikut beberapa contohnya:
Dengan kode HTML dan CSS sebagai berikut:
WEB Design 1
<HTML><HEAD><TITLE>Shadowed Text</TITLE><style type="text/css">body { background: #0000dd;} .text{ color: rgba(0,0,0,0.8); text-shadow: 2px 2px 3px rgba(255,255,255,0.8);}
</style><META name="description" content=""><META name="keywords" content=""><META name="generator" content="CuteHTML"></HEAD><BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"><!--Don't forget to add your FREE HitBOX statistics to your web page. Todo so, click on Tools\Online Services\Add statistics...-->
<h1 class="text">Selamat Datang di Halaman WEB saya</h1></BODY></HTML>
Dengan kode CSS:
<style type="text/css">body { background: #fff;}.text{text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}</style>
WEB Design 2
<h1 style="text-shadow : 0.2em 0.2em;"> Tulisan ini memiliki shadow bawah dan kanan sebesar 0.2 em dengan warna sama</h1>
<h1 style="text-shadow : 1px 2px 5px red;"> Tulisan ini memiliki shadow blur warna merah</h1>
<h1 style="text-shadow : 1px 1px red, 2px 2px blue;"> Tulisan ini memiliki shadow merah dan biru</h1>
WEB Design 3
Berikut kode HTML dan CSSnya
<html lang="en"><head> <title>Css shadow demo</title> <style> body { background:#474747; } h1 { color:#222222; margin:25px 0; font-family: Tahoma, Arial; font-size: 55px; text-align:center; text-shadow: 0 1px 0 #777777; } h2 { color:#777777; margin:25px 0; font-family: Trebuchet MS;
WEB Design 4
font-size: 35px; text-align:center; text-shadow: 0 1px 4px #121212; } h3 { color:#3e3e3e; margin:25px 0; font-family: Tahoma; font-size: 55px; text-align:center; text-shadow: 1px 1px #777777, -1px -1px #000000; } h4 { color:#eaeaea; margin:25px 0; font-family: Arial; font-size: 45px; text-align:center; text-shadow: -3px 0 #171717, 0 3px #171717, 3px 0 #171717, 0 -3px #171717; } h5 { color: #ffffff; margin:25px 0; font-family: Tahoma; font-size: 55px; text-align:center; text-shadow: 0 0 4px #db6969, 0 0 0.2em #db6969; } </style></head><body> <h1>Selamat Datang di WEB Rizka Adelina Al-Huda</h1> <h2>Css FUZZY shadow effect</h2> <h3>Css MULTIPLE shadow effect</h3> <h4>Css OUTLINE shadow effect</h4> <h5>Css NEON GLOW shadow effect</h5> </body></html>2.
WEB Design 5