Minimalisir Copas - Manipulasi menghilangkan warna block teks

Mungkin anda seseorang yang tidak menyukai blognya 100% di Copas dari orang lain, memang tidak enak bila artikel yang kita tulis dengan seenaknya di copas oleh orang lain. Artikel blog yang di copas bisa menggambarkan artikel kita disukai oleh ornag lain namun bukan suatu alasan juga sampai 100% copas, dan untuk saya sendiri lebih menghargai jika artikel tsb minimal di edit kembali menjadi artikel dengan ciri khasnya sendiri bahkan lebih baik dalam penyampaiannya kalaupun tidak menulis sumber.

Karena Sumber ilmu hanya dari tuhan, manusia yang mau lebih berusaha yang akan menemukan ilmu pengetahuan tsb, dan kenapa tidak kita untuk menghargai orang yang berusaha itu. :D

Ada banyak cara meminimalisir Copas 100% dari yang memakai Javascript(js) ataupun CSS, dan maksud saya Copas disini seenggaknya orang lain mau belajar membaca, menelaah, dan menulisnya kembali sesuai keiinginan.
Berikut salah satunya menggunakan CSS untuk memanipulasi seleksi warna block teks seperti menghilang padahal bisa di copy teksnya.

- Cukup simpan kode berikut pada XML template kamu, tepatnya diatas kode ]]> :

::selection {background:none;}
::-moz-selection {background:none;}
::-webkit-selection {background:none;}

- Simpan template dan lihat hasilnya dengan mencoba Block Teks


kalaupun kamu ingin tidak menghilangkan warnanya atau menggantinya dengan warna yang kamu inginkan tinggal edit saja CSS nya, Contoh :

::selection {background:#ccc; color:#FC0;}
::-moz-selection {background:#ccc; color:#FC0;}
::-webkit-selection {background:#ccc; color:#FC0;}

More about → Minimalisir Copas - Manipulasi menghilangkan warna block teks

Membuat Bentuk panah dengan css triangle

Meneruskan dari artikel sebelumnya dari teknik pembuatan css triangle, berikutnya saya ingin mendokumentasikan implementasi tampilan lainnya dari css triangle dengan menambahkan elemen :before dan :after, silahkan baca artikel sebelumnya Membuat CSS Border Triangle
Sepintas tentang elemen before dan after bisa digambarkan dengan div dibawah ini :

h2.contoh {
  font:bold 22px Verdana, Arial, Sans-Serif;
  text-align:center;
  color:#000;
}

<h2 class="contoh">
Contoh</h2>

Contoh

Jika kita menambahkan penggunaan elemen :before dan :after akan menjadi seperti ini:

h2.contoh:before {
  content:'Ini ';
color: green;
}

h2.contoh:after {
  content:' Nya';
color: yellow;
}

Contoh

Itu sekilas tentang penggunaan elemen :before dan :after, berikutnya kita lanjutkan untuk membuat bentuh panah dengan css triangle, silahkan perhatikan gambar berikut:

1. CSS3 Ribbon
a. Ribbon 1 dengan menambahan elemen :after

.ribbon1 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#075c85;
  position:relative;
  line-height:48px;
  margin:50px auto;
}
.ribbon1:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid transparent;
  border-left-color: yellow;
}

• border:24px solid transparent; hal ini membuat semua border seperti gambar diatas berwarna transparan
• dan border-left-color: yellow; dengan kode ini membuat pengecualian warna transparan bagian kiri atau left berwarna yellow atau kuning

Ribbon 1

b. Berikutnya teknik ribon no 2 dengan elemen :before

.ribbon2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#075c85;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon2:before {
  content:"";
  position:absolute;
  top:0px;
  right:100%;
  width:0px;
  height:0px;
  border:24px solid yellow;
  border-left-color:transparent;
}

• border:24px solid yellow; dengan kode ini membuat tampilan border top, right, bottom, left berwarna yellow atau kuning
• border-left-color:transparent; dengan kode css ini membuat pengecualian untuk border left atau yang kirinya transparan.

Ribbon 2

c. Ribbon no 3 kita akan menggabungkan elemen :after dari ribbon no 1 dengan elemen :before dari ribbon no 2 sehingga kita bisa buat tampilan seperti dibawah ini:

Ribbon 3

.ribbon3 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#075c85;
  position:relative;
  line-height:48px;
  margin:50px auto;
}
.ribbon3:before {
  content:"";
  position:absolute;
  top:0px;
  right:100%;
  width:0px;
  height:0px;
  border:24px solid #075c85;
  border-left-color:transparent;
}
.ribbon3:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid transparent;
  border-left-color:#075c85;
}

More about → Membuat Bentuk panah dengan css triangle