 | Artikel ini membahas tentang cara membuat CSS3 Bingkai Teks. Selamat membaca. |
/*CSS3 Bingkai Teks*/
.bingkaiteks{background: rgb(220,220,220); /* Old browsers */background: -moz-linear-gradient(-45deg, rgba(220,220,220,1) 0%, rgba(196,196,196,1) 17%, rgba(148,148,148,1) 50%, rgba(126,126,126,1) 51%, rgba(140,140,140,1) 59%, rgba(158,158,158,1) 71%, rgba(126,126,126,1) 84%, rgba(89,89,89,1) 97%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(17%,rgba(196,196,196,1)), color-stop(50%,rgba(148,148,148,1)), color-stop(51%,rgba(126,126,126,1)), color-stop(59%,rgba(140,140,140,1)), color-stop(71%,rgba(158,158,158,1)), color-stop(84%,rgba(126,126,126,1)), color-stop(97%,rgba(89,89,89,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 17%,rgba(148,148,148,1) 50%,rgba(126,126,126,1) 51%,rgba(140,140,140,1) 59%,rgba(158,158,158,1) 71%,rgba(126,126,126,1) 84%,rgba(89,89,89,1) 97%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 17%,rgba(148,148,148,1) 50%,rgba(126,126,126,1) 51%,rgba(140,140,140,1) 59%,rgba(158,158,158,1) 71%,rgba(126,126,126,1) 84%,rgba(89,89,89,1) 97%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 17%,rgba(148,148,148,1) 50%,rgba(126,126,126,1) 51%,rgba(140,140,140,1) 59%,rgba(158,158,158,1) 71%,rgba(126,126,126,1) 84%,rgba(89,89,89,1) 97%); /* IE10+ */background: linear-gradient(-45deg, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 17%,rgba(148,148,148,1) 50%,rgba(126,126,126,1) 51%,rgba(140,140,140,1) 59%,rgba(158,158,158,1) 71%,rgba(126,126,126,1) 84%,rgba(89,89,89,1) 97%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#595959',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px;padding:10px;text-align: left;-webkit-transition: all 0.7s ease-in-out;}
.bingkaiteks:hover {background: rgb(206,219,233); /* Old browsers */background: -moz-linear-gradient(-45deg, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 97%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(97%,rgba(38,85,139,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 97%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 97%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 97%); /* IE10+ */background: linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 97%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
Simpan template Anda.
Untuk melihat hasilnya, anda harus menambahkan kode: class="bingkaiteks".
Contoh:
<div class="bingkaiteks"> ISI </div>
Demikian pembahasan mengenai cara membuat CSS3 Bingkai Teks. Selamat mencoba dan semoga berhasil.
