Cara Membuat Desain Old Frame dengan CSS3

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.

16 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat