Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Property Border Terbaru Dalam CSS3

CSS3 banyak menawarkan beberapa fitur, salah satunya adalah fitur border color, border image, border round, border shadow & border radius. Dalam artikel ini, saya akan tulis satu persatu berikut contohnya.

Border Color

Border Color merupakan properti yang digunakan untuk memberi warna pada garis. Dengan adanya property pada saat ini, kita bisa mengatur garis secara memudar atau tidak. Langsung saja kita buat kode HTML & CSSnya dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Property Border Color</title>
<style type="text/css">
body {
  background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
.warna-border {
  border: 10px solid #111;
    -moz-border-top-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
    -moz-border-right-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
  -moz-border-bottom-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
 -moz-border-left-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
   padding: 10px;
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Property Border Color</h1>
<section class="warna-border">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/11/property-border-terbaru-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>
Demo Border Color CSS3

Border Image

CSS3 memungkinkan kita untuk membuat border dengan menggunakan image. Kita bisa melakukannya dengan beberapa kreasi yang ada. Untuk contohnya bisa anda tuliskan kode HTML & CSS berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Property Border Image</title>
<style type="text/css">
body {
    background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
.gambar-border {
 border: 10px solid;
 border-image: url(http://www.w3schools.com/css/border.png) 30 round stretch;
    -o-border-image:url(http://www.w3schools.com/css/border.png) 30 round stretch;
  -moz-border-image: url(http://www.w3schools.com/css/border.png) 30 round stretch;
   -webkit-border-image: url(http://www.w3schools.com/css/border.png) 30 round stretch;
    padding: 10px;
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Property Border Image</h1>
<section class="gambar-border">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/11/property-border-terbaru-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>
Demo Border Image CSS3

Border Rounded

CSS3 sudah bisa membuat sudut lengkung dengan menggunakan border tanpa bantuan image lagi. Contohnya bisa anda praktekkan dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Property Border Rounded</title>
<style type="text/css">
body {
   background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
.box-border {
    border: 0 solid #000;
   background: #ccc;
   border-radius: 7px;
 box-shadow: -5px 5px 7px #333;
  padding: 10px;
}
.radius-border {
 border: 10px solid #000;
    border-radius: 7px;
 padding: 10px;
}
.kreasi-border {
 border: 0 solid #000;
   background: #ccc;
   border-top-left-radius: 17px;
   border-bottom-right-radius: 17px;
   box-shadow: -5px 5px 7px #333;
  padding: 10px;
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Property Border Rounded</h1>
<section class="box-border">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<section class="radius-border">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<section class="kreasi-border">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/11/property-border-terbaru-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>
Demo Border Rounded CSS3

Border Box Shadow

Border Shadow adalah properti yang akan digunakan untuk memunculkan efek bayangan pada suatu garis. Untuk lebih jelasnya, silahkan praktekkan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Property Border Box Shadow</title>
<style type="text/css">
body {
   background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
.box-border {
    border: 0 solid #000;
   background: #ccc;
   border-radius: 7px;
 box-shadow: inset -5px 5px 10px 1px #333;
   /* Inset Luar Dalam
     Posisi X
        Posisi Y
        Blur
        Spread
      Color
   */
  padding: 10px;
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Property Border Box Shadow</h1>
<section class="box-border">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/11/property-border-terbaru-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>
Demo Box Shadow CSS3

Itu saja Trik CSS3 yang saya bahas kali ini, untuk Fitur CSS3 lainnya akan saya bahas di artikel selanjutnya.

4 Comments

  1. Intan SudibjoReply

    CSS3 memang luar biasa, kebayang kalo saya bikin kaya gituan hehe :D

    • Nurul ImamReply

      Kebayang apa nih ? Kebayang mumetnya :D

  2. AgriReply

    yg paling saya suka adalah “Border Rounded” ini.. hasilnya keren.. :-d

    • Nurul ImamReply

      Iya keren, meski sekarang lagi musim flat :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>