• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

PAHOMPU.COM

Info Teknologi Blog SEO dan Bisnis Online

  • Blogging & SEO
    • Themes
    • Script
  • Teknologi
    • Komputer
    • Mobile & App
  • Internet
  • Sosial Media
  • Other
    • Bisnis Rumahan
    • Bisnis Online
    • Ulasan Bisnis
    • Motivasi
Home / Script / Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat

10 January 2017 by pahompu Leave a Comment

Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat

Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat. Trik ini bekerja dengan sangat baik di semua browser modern dan sangat cocok untuk desain dengan latar belakang warna yang sederhana.

Trik sederhana ini ditulis oleh : Nicolas Gallagher pemilik blog http://nicolasgallagher.com.

Membuat Kotak Sederhana Dengan CSS
Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat (Image : nicolasgallagher.com)

Mebuatnya Tidaklah rumit. Setiap elemen di desain dengan CSS dan tidak perlu menambahkan image/gambat atau markup tambahan. Bahkan Browser tanpa dukungan pseudo-elemen, seperti IE6 dan IE7, akan bisa dengan baik menampilkan trik ini.

Untuk Membuat Kotak Sederhana Dengan CSS ini anda anda hanya perlu menambahkan code CSS berikut ke dalam file Style.css di template wordpress anda. Dan untuk blogger, anda tambahkan saja pada bagian Tumpukan CSS sebelum ]]></b:skin>.

Table Of Contents show
1 Code CSS untuk Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat, lengkapnya:
1.1 Cara Mengganti Warna Dasar dan Lipatan
1.2 Cara Pemakaian / Penerapan

Code CSS untuk Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat, lengkapnya:

.note {
  position: relative;
  width: 90%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  background: #658E15;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}

.note.rounded:before {
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

Cara Mengganti Warna Dasar dan Lipatan

Bila anda lihat pada Demo ada empat warna, untuk mengganti warna ini anda hanya perlu mengubah code warna pada bagian:

Untuk Warna Dasar (ganti code yang berwarna merah)

.note:before {
content: “”;
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #658E15 #fff;
}

dan Untuk Warna Lipatan (ganti code yang berwarna merah)

.note:before {
content: “”;
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
/* Firefox 3.0 damage limitation */
display: block; width: 0;
}

Cara Pemakaian / Penerapan

untuk pemakaiannya dalam postingan di blog anda, pada bagian awal teks yang akan di kasih Kotak Sederhana Dengan CSS Bergaya Catatan Sudut Berlipat, tambahkan code <div class=”note”> dan pada bagian akhir teks: </div>
Contoh:

<div class=”note”>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>

Hasil Penampakan di Browser:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Catatan :
Untuk wordpress saat menambahkannya code di atas ubah dulu mode post editing ke TEXT

dan untuk Blogger ke mode HTML

Okeh itu saja dan semoga bermanfaat, salam Blogger.

Filed Under: Blogging Dan SEO, Script Tagged With: css, Tips dan Trik

Related Posts

  1. Cara Atasi Android Lemot dengan 6 Langkah Sederhana!
  2. Trik WordPress: Cara Menampilkan Komentar Terbaru dengan Thumbnail di WordPress Tanpa Plugin
  3. Trik WordPress: Cara Memindahkan JavaScript Ke Bagian Footer Tanpa Plugin
  4. 5 Style CSS Blockquote Cantik Untuk Blogger dan WordPress
  5. Cara Membuat Toko Online dengan Blogspot
  6. Tips dan Trik Mengelola Website untuk Bisnis
  7. Tips Mudah Membuat Toko Online Dengan WordPress
  8. Cara Membatasi Jumlah Huruf Dalam Judul Postingan Di WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

POPULAR POSTS

  • Cara Menghapus Riwayat Pembelian di App Store posted on 8 January 2017
  • cara memotong dan menggabungkan lagu di iPhone Cara Memotong Dan Menggabungkan Lagu Di Perangkat iPhone posted on 1 March 2017
  • Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress Cara Memperbaiki Render Blocking JavaScript dan CSS di WordPress posted on 7 May 2017
  • Trik CSS – Membuat Kotak Sederhana Dengan CSS Bergaya Catatan Sudut B... posted on 10 January 2017
  • Ini Dia, Cara Mengukur Suhu Ruangan Dengan iPhone ! Ini Dia, Cara Mengukur Suhu Ruangan Dengan iPhone ! posted on 11 March 2017
  • harga hp nokia android Daftar Kisaran Harga Hp Nokia Android Terbaru 2018 posted on 7 January 2018
  • Cara Menjadi Terkenal dan Sukses Di Instagram 10 Cara Menjadi Terkenal dan Sukses Di Instagram posted on 24 December 2016

Recent Posts

  • 7 Reliable Email Advertising and Marketing Approaches to Produce More Sales 29 August 2021
  • 6 Elemen Penting dalam Strategi Pemasaran Digital 18 November 2020
  • 9 Halaman Penting Ini Harus Ada Pada Website Bisnis Kamu 29 October 2020
  • Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui 21 July 2020
  • Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting 29 March 2020
  • Mending Mana? Beli Laptop atau Rakit PC? 4 February 2020
  • Cara Membuat Teks Warna Warni di Insta Story 23 January 2020

Recent Comments

  • Hartono Liem on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • cotekno on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • Komala maulana on 4 Langkah Mudah Cara Bisnis Online Di Internet
  • Roffif Syafruddin on Cara Menghapus Riwayat Pembelian di App Store
  • Roffif Syafruddin on Mending Mana? Beli Laptop atau Rakit PC?

Tags

affiliate marketing android anti virus aplikasi bisnis Bisnis Online blog blogging Custom Background Custom Colors Custom Menu Entertainment facebook Featured Images game Google Adsense internet iphone komputer Laptop Left Sidebar mobile Money Online News One Column online plugin Right Sidebar SEO smartphone Sticky Post teknologi template terbaik Theme Options Threaded Comments tips Tips dan Trik Translation Ready trik trik wordpress Tutorial Wordpress Two Columns Windows 10 wordpress
  • About
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Term Of Services
  • Subscribe Us

Copyright © 2023 · Gen Polos on Genesis Framework · WordPress · Log in