Cara Mudah Membuat Garis Tepi / Garis Besar Dengan Css Outline-Style
Penerbit: ( Seo Techman )

Cara Mudah Membuat Garis Tepi / Garis Besar Dengan Css Outline-Style


Apa itu garis tepi? Garis Tepi adalah garis yang terletak di bagian tepi pet dan ujung-ujung tiap garis akan bertemu dengan ujung garis yang berdekatan. Biasanya garis ini dibuat rangkap dua dan tebal.

Cara Mudah Membuat Garis Tepi / Garis Besar Dengan Css Outline-Style
Nah, sedangkan Outline adalah kerangka, regangan atau garis besar. Jadi outline merupakan rencana penulisan yang memuat garis besar dari suatu karangan yang akan digarap dan merupakan rangkaian ide-ide yang disusun secara sistematis.

Ini sama hal nya dengan tutorial yang akan saya bahas pada hari ini. Lalu bagaimana cara membuatnya? Ini sama seperti kita membuat sebuah border pada umumnya, bahkan hampir mirip.

Untuk cara dan langkah-langkah jelasnya, bisa Anda perhatikan dibawah.
Disini saya akan bagi menjadi beberapa bagian, agar bisa dimengerti dan terlihat mudah.

1. Outline Auto

#Css

.outline-auto {
 background-color: aliceblue;
   outline: 50px auto lavender;
     }

#Html

<div class="outline-box outline-auto"></div>
     <code>outline-style: auto</code>
           </div>
outline auto
2. Outline Double

#Css

.outline-double {
 background-color: thistle;
   outline: 14px double white;
      outline-offset: -20px;
         }

#Html

<div class="outline-box outline-double"></div>
           <code>outline-style: double</code>
                       </div>
outline double
3. Outline Dotted-1

#Css

.outline-dotted-1 {
 background-color: mistyrose;
   outline: 24px dotted white;
      outline-offset: -12px;
         }

#Html

<div class="outline-box outline-dotted-1"></div>
                 <code>outline-style: dotted</code>
                                   </div>
outline dotted
4. Outline Dotted-2

#Css

.outline-dotted-2 {
 background-color: lightgoldenrodyellow;
   outline: 40px dotted white;
      outline-offset: -18px;
         }

#Html

<div class="outline-box outline-dotted-2"></div>
                       <code>outline-style: dotted</code>
                                               </div>
outline dotted
5. Outline Groove

#Css

.outline-groove {
 background-color: antiquewhite;
   outline: 14px groove burlywood;
      outline-offset: -15px;
         }

#Html

<div class="outline-box outline-groove"></div>
                             <code>outline-style: groove</code>
                                                           </div>
outline groove
6. Outline Dashed

#Css

.outline-dashed {
 background-color: rosybrown;
   outline: 22px dashed white;
      outline-offset: -12px;
         }

#Html

<div class="outline-box outline-dashed"></div>
                                   <code>outline-style: dashed</code>
                                                                       </div>
outline dashed
7. Outline Ridge

#Css

.outline-ridge {
 background-color: azure;
   outline: 14px ridge lightblue;
      outline-offset: -14px;
         }

#Html

<div class="outline-box outline-ridge"></div>
                                         <code>outline-style: ridge</code>
                                                                                   </div>
outline ridge
8. Outline Outset

#Css

.outline-outset {
 background-color: floralwhite;
   outline: 24px outset pink;
      outline-offset: -24px;
         }

#Html

<div class="outline-box outline-outset"></div>
                                               <code>outline-style: outset</code>
                                                                                               </div>
outline outset
9. Outline inset

#Css

.outline-inset {
 background-color: bisque;
   outline: 24px inset sandybrown;
      outline-offset: -24px;
         }

#Html

<div class="outline-box outline-inset"></div>
                                                     <code>outline-style: inset</code>
                                                                                                           </div>
outline inset
Untuk kode keseluruhannya bisa dilihat berikut ini:
#Css

.outline-auto {
 background-color: aliceblue;
   outline: 50px auto lavender;
     }
     .outline-double {
      background-color: thistle;
        outline: 14px double white;
           outline-offset: -20px;
              }
              .outline-dotted-1 {
               background-color: mistyrose;
                 outline: 24px dotted white;
                    outline-offset: -12px;
                       }
                       .outline-dotted-2 {
                        background-color: lightgoldenrodyellow;
                          outline: 40px dotted white;
                             outline-offset: -18px;
                                }
                                .outline-groove {
                                 background-color: antiquewhite;
                                   outline: 14px groove burlywood;
                                      outline-offset: -15px;
                                         }
                                         .outline-dashed {
                                          background-color: rosybrown;
                                            outline: 22px dashed white;
                                               outline-offset: -12px;
                                                  }
                                                  .outline-ridge {
                                                   background-color: azure;
                                                     outline: 14px ridge lightblue;
                                                        outline-offset: -14px;
                                                           }
                                                           .outline-outset {
                                                            background-color: floralwhite;
                                                              outline: 24px outset pink;
                                                                 outline-offset: -24px;
                                                                    }
                                                                    .outline-inset {
                                                                     background-color: bisque;
                                                                       outline: 24px inset sandybrown;
                                                                          outline-offset: -24px;
                                                                             }
                                                                             /* presentation styles*/
                                                                             main {
                                                                              display: grid;
                                                                                height: 100%;
                                                                                   grid-template-rows: auto 1fr auto;
                                                                                       grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                                                                                            text-align: center;
                                                                                                 }
                                                                                                      .card {
                                                                                                            margin-bottom: 50px;
                                                                                                                  }
                                                                                                                        .outline-box {
                                                                                                                               margin: 40px auto;
                                                                                                                                       width: 180px;
                                                                                                                                                height: 180px;
                                                                                                                                                         }
                                                                                                                                                                  code {
                                                                                                                                                                            background-color: #dedede;
                                                                                                                                                                                       padding: 4px 6px;
                                                                                                                                                                                                   border-radius: 3px;
                                                                                                                                                                                                               }

#Html

<main>
 <div class="card">
   <div class="outline-box outline-auto"></div>
     <code>outline-style: auto</code>
      </div>
       <div class="card">
         <div class="outline-box outline-double"></div>
           <code>outline-style: double</code>
            </div>
             <div class="card">
               <div class="outline-box outline-dotted-1"></div>
                 <code>outline-style: dotted</code>
                  </div>
                   <div class="card">
                     <div class="outline-box outline-dotted-2"></div>
                       <code>outline-style: dotted</code>
                        </div>
                         <div class="card">
                           <div class="outline-box outline-groove"></div>
                             <code>outline-style: groove</code>
                              </div>
                               <div class="card">
                                 <div class="outline-box outline-dashed"></div>
                                   <code>outline-style: dashed</code>
                                    </div>
                                     <div class="card">
                                       <div class="outline-box outline-ridge"></div>
                                         <code>outline-style: ridge</code>
                                          </div>
                                           <div class="card">
                                             <div class="outline-box outline-outset"></div>
                                               <code>outline-style: outset</code>
                                                </div>
                                                 <div class="card">
                                                   <div class="outline-box outline-inset"></div>
                                                     <code>outline-style: inset</code>
                                                      </div>
                                                       </main>

Load comments

0 Response to "Cara Mudah Membuat Garis Tepi / Garis Besar Dengan Css Outline-Style"

Post a Comment