Nurul Imam Studio

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

Jasa Pembuatan Website Profesional

Fitur Property Outline Dalam CSS3

Artikel kali ini masih membahas beberapa fitur CSS3, yaitu Fitur Property Outline Dalam CSS3. Outline adalah sebuah garis, dalam CSS3 banyak sekali variasi garis diantaranya adalah solid, dashed, dotted, double, groove, inset, outset, dan yang terakhir adalah ridge. Untuk lebih jelasnya bisa anda lihat demonya dibawah ini.

Demo Property Outline CSS3

Cara penerapan outline diatas bisa anda pelajari property outlinenya dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Property Outline CSS3</title>
<style type="text/css">
body {
    background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
    padding: 100px 0;
}
h1, p {
   text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
.kotak {
 background-color: #fcf;
 width: 40%;
 float: left;
    display: inline;
    margin: 10px;
   padding: 10px;
  height: 200px;
}
.solid {
 outline: #000 solid 6px;
}
.dashed {
  outline: #000 dashed 6px;
}
.dotted {
 outline: #000 dotted 6px;
}
.double {
 outline: #000 double 6px;
}
.groove {
 outline: #000 groove 6px;
}
.inset {
  outline: #000 inset 6px;
}
.outset {
  outline: #000 outset 6px;
}
.ridge {
  outline: #000 ridge 6px;
}
</style>
</head>
<body>
<article class="utama">
 <section class="kotak solid">Solid</section>
  <section class="kotak dashed">Dashed</section>
    <section class="kotak dotted">Dotted</section>
    <section class="kotak double">Double</section>
    <section class="kotak groove">Groove</section>
    <section class="kotak inset">Inset</section>
  <section class="kotak outset">Outset</section>
    <section class="kotak ridge">Ridge</section>
<section class="bersih"></section>
<p><a href="http://www.nurulimam.com/2013/12/fitur-property-outline-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>

Setelah itu, anda simpan dengan nama outline-css3.html dan jalankan di web browser anda. Anda bisa berkreasi lebih lanjut dengan property outline CSS3 ini dengan kreatifitas anda sendiri. Selamat mencoba :)

4 Comments

  1. Intan SudibjoReply

    memang perfect css3 tuh :D

    • Nurul ImamReply

      Perfect bisa berkreasi dengan leluasa :D

  2. audio hajiReply

    ok ga, terima kasih sangat bermanfaat

    • Nurul ImamReply

      Iya sama-sama :)

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>