Membuat efek gelembung dengan pure CSS

Membuat efek gelembung dengan pure CSS

CSS

Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada.

Efek ini dapat tampil dengan baik pada mesin browser Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Peningkatan progresif dengan pseudo-elemen

Dengan HTML sederhana seperti <div>Konten</ div> atau <p>Konten</p> Anda dapat menghasilkan efek gelembung seperti berikut ini:


Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah...

Dengan menerapkan CSS3 properti seperti border-radius dan sejenisnya Anda dapat menghasilkan bentuk yang lebih kompleks dan orientasi. berikut ini adalah css contoh dasar:

.efek-gelembung {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* efek gelembung */
.efek-gelembung:after {
   content:"";
   display:block; /* mempaiki tampilan pada FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

untuk menggunakan css diatas pada html, silahkan gunakan kode dibawah ini:

<div class="efek-gelembung">

/..........  Tulisan anda disini   ............./

</div>

Demikian saja, semoga berguna untuk anda yang membutuhkan...

Artikel Terkait

  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…
  • Thread komen blogger dengan commentDay
    gaya commentDay adalah gaya untuk standar Blogger Thread comment. Dengan gaya ini komentar default thread comment blogger lebih menjadi terlihat menarik. Gaya ini dirancang sesuai dengan gaya yang telah lama dicari yaitu: sederhana, jelas dan modern. Demo untuk memasang gaya thread komen ini, ikuti langkah berikut: Tambahkan kode be…
  • Menghitung ke-spesifik-an Selector
    CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang. Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0…
  • Edit CSS tanpa masuk ke dalam Edit HTML
    Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan ta…
  • Membuat efek gelembung dengan pure CSS
    Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada. Efek i…
  • Penggunaan Selector CSS
    Anggap saja  kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menja…

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...