Cara Membuat Desain Old Frame dengan CSS3

16/10/2017    Risman Hakim    1423    Website

Berbicara tentang desain pada website, saat ini pasti ada saja sesuatu yang baru dalam dunia web, khusus nya mengenai tampilan web itu sendiri, karena begitu penting nya suatu tampilan pada web akan memberikan kesan kepada pengguna dan mempengaruhi seberapa banyak user akan mengunjungi web kita. Nah, berikut ada satu tutorial yang cukup menarik yang bisa kalian pakai untuk mendesain tampilan atau hanya sekedar membuat desain frame, yakni tutorial bagaimana cara membuat desain old frame dengan CSS3. Seperti apa cara membuatnya, langsung saja simak langkah-langkah nya berikut ini.

Langkah pertama silahkan kalian ketikan kode HTML5 berikut ini sebagai struktur awal desain frame nya.

<body>
    <div class="wraper">
      <i class="circle" aria-hidden="true"></i>
      <i class="circle" aria-hidden="true"></i>
      <i class="circle" aria-hidden="true"></i>
      <i class="circle" aria-hidden="true"></i>
      <span>DUMETSCHOOL</span>
    </div>
</body>

Setelah membuat kode HTML5 seperti diatas, langkah selanjutnya adalah kita akan membuat desain frame old dengan kode CSS3 berikut ini.

@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');
html {
    background: #925320;
    height:100%;
}

.wraper {
    font-family: 'Allerta Stencil', sans-serif;
    background-color:#ffe;
    border:solid .175em #222;
    border-radius:.175em;
    display:inline-block;
    font-size:6em;
    left:50%;
    padding: .125em .25em;
    position:absolute;
    text-align:center;
    text-shadow:0 -0.015em #999;
    text-transform:uppercase;
    top:50%;
    transform:translate(-50%, -50%);
}

.circle {
    border:solid .125em #222;
    border-radius:50%;
    height:.125em;
    position:absolute;
    width:.125em;
}

.circle:before {
    content:"";
    position:absolute;
}

.circle:first-child {
    left:-0.175em;
    top:-0.175em;
}

.circle:nth-child(2) {
    right:-0.175em;
    top:-0.175em;
}

.circle:nth-child(3) {
    bottom:-0.175em;
    left:-0.175em;
}

.circle:nth-child(4) {
    bottom:-0.175em;
    right:-0.175em;
}

Jika sudah semua kode HTML5 dan CSS3 diketikan, langkah terakhir adalah simpan file nya kemudian silahkan buka pada browser masing-masing dan lihat hasilnya, maka akan tampil frame dengan objek teks didalam nya. Tampilan akan seperti pada gambar dibawah ini.

Cara Membuat Desain Old Frame dengan CSS3

Bagaimana, lumayan bagus buka tampilan nya, jadi kita tidak hanya bisa membuat frame dengan gambar akan tetapi dengan kita menguasai CSS3 dan HTML5, kita sudah bisa membuat desain frame yang cukup bagus. Baiklah cukup sekian tutorial sederhana mengenai bagaimana cara membuat desain frame old dengan CSS3, semoga bermanfaat dan selamat mencoba.

Artikel, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow