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 yaitu, membuat garis tepi / garis besar di Css dengan menggunakan Outline-Style. Bagaimana cara membuatnya? 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>

Blogger
Disqus
Select your comment system

No comments