Sobat setia catatan Sederhana pada malam Hari ini kita Belajar Tentang Pengetahuan Border
pengetahuan sedikit tentang border adalah Garis atau Bingkai untuk menghiasi kata/kalimat bahkan Border pun di pakai untuk layout halaman Html...kalau g salah
Disini saya akan Membagikan catatan tentang aneka macam Border dengan Code Css yang saya dapatkan dari activekita.blogspot.com
Semoga Bermanfaat
<blockquote>
1. none<br>
<p style="border: 3px none; #000000; padding: 20px;">Tidak mendefinisikan garis perbatasan</p>
2. dotted
<br>
<p style="border: 3px dotted; #000000; padding: 20px; align: center;"> Mendefinisikan perbatasan garis titik-titik.</p>
3. dashed <br>
<p style="border:3px dashed; #000000; padding: 20px;"> Mendefinisikan perbatasan garis putus-putus.</p>
4. solid <br>
<p style="border:3px solid; #000000; padding: 20px;"> Mendefinisikan perbatasan garis penuh.</p>
5. double <br>
<p style="border: 5px double; #000000;padding: 20px;"> Mendefinisikan perbatasan garis ganda.</p>
6. groove <br>
<p style="border: 10px groove; #000000; padding: 20px;"> Mendefinisikan perbatasan garis berlekuk 3D.</p>
7. ridge <br>
<p style="border: 10px ridge; #000000; padding: 20px;"> Mendefinisikan perbatasan garis bergerigi 3D.</p>
8. inset <br>
<br>
<p style="border: 10px inset; #000000; padding: 20px;"> Mendefinisikan perbatasan garis inset 3D.</p>
9. outset<br>
<p style="border: 10px outset; #FF3300; padding: 20px;"> Mendefinisikan perbatasan garis outset 3D.</p><br>
</blockquote><br>
Hasil nya Dibawah Ini
1. none
Tidak mendefinisikan garis perbatasan
2. dotted
Mendefinisikan perbatasan garis titik-titik.
3. dashed
Mendefinisikan perbatasan garis putus-putus.
4. solid
Mendefinisikan perbatasan garis penuh.
5. double
Mendefinisikan perbatasan garis ganda.
6. groove
Mendefinisikan perbatasan garis berlekuk 3D.
7. ridge
Mendefinisikan perbatasan garis bergerigi 3D.
8. inset
Mendefinisikan perbatasan garis inset 3D.
9. outset
Mendefinisikan perbatasan garis outset 3D.
Bodernya Yang ini tidak Berbentuk Kotak
Ini Code Css 3
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div { border:2px solid #a1a1a1; padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /*
Firefox 3.6 and earlier */ }
</style>
</head>
<body>
<div>Dengan CSS3, kita bisa membuat border yang tidak selalu berbentuk kotak dengan mudah.</div>
</body>
</html>
Ini Boder Shadow
Ini Code Css3 nya
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div { width:300px;
height:100px;
background-color:yellow;
-moz-box-shadow: 10px 10px
5px #888888; /* Firefox 3.6
and earlier */
box-shadow: 10px 10px 5px
#888888;
} </style>
</head>
<body>
<div>Css3 Box Shad0w
</div>
</body>
</html>
Silahkan Sobat Praktekan
Selamat Belajar
Alhamdulillah Catatan sederhana Tentang Aneka Macam Code Border Css Telah Selesai Mohon Maaf Jika ada Kesalahan wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment