إنضم لنا

css blockquoute keren banget





Assalamualaiqum.wr.wb..



kali ini saya akan memberikan css code blockqoute , Karna menurut saya ini penting yah sob untuk membuat sebuah catatan di artikel blog , walaupun hal ini sering sekali di search di blog blog lain tpi apa salahnya kalo saya juga ingin berbagi ya walaupun cum 1 code tapi di jmin kereen dehh hehee



tidak usah lama lama di bawah ini dalah code css kalin bisa menempatkanya di blog kaalian karna ini sbuah css kalin bisa menyimpnnya Seperti gambar di bawah ini .




body {
 background: #ddd url(../images/strange_bullseyes.jpg) repeat top left;
}

.mb-style-3 {
 width: 500px;
}

.mb-style-3 blockquote{
 background: #fff;
 padding: 30px;
 border-radius: 5px;
 box-shadow: 
  inset 0 2px 0 rgba(188, 147, 200, 0.7), 
  -5px -4px 25px rgba(0, 0, 0, 0.3);
}

.mb-style-3 blockquote:after, 
.mb-style-3 blockquote:before  {
 top: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.mb-style-3 blockquote:after  {
 border-top-color: #ffffff;
 border-width: 10px;
 left: 65%;
 margin-left: -10px;
}

.mb-style-3 blockquote:before {
 border-top-color: rgba(0,0,0,0.01);
 border-width: 11px;
 left: 65%;
 margin-left: -11px;
}

.mb-style-3 blockquote p {
 font-family: 'Alegreya', serif;
 font-size: 24px;
 color: #b4b4b4;
 font-weight: 400;
 line-height: 40px;
 font-style: italic;
 text-indent: 100px;
 position: relative;
}

.mb-style-3 blockquote p:before{
 content: '\201C';
 font-family: serif;
 font-style: normal;
 font-weight: 700;
 position: absolute;
 font-size: 175px;
 top: 0px;
 left: -105px;
 color: rgba(188, 147, 200, 1);
 text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}

.mb-style-3 .mb-attribution {
 text-align: right;
 padding: 20px 100px 20px 20px;
 position: relative;
}

.mb-style-3 .mb-thumb {
 display: block;
 width: 70px;
 height: 70px;
 border: 5px solid #fff;
 border-radius: 50%;
 background: url(../images/bronte.jpg) no-repeat center center;
 position: absolute;
 right: 10px;
 bottom: 5px;
 box-shadow: 
  inset 1px 1px 4px rgba(0,0,0,0.5),
  0 2px 3px rgba(0,0,0,0.6);
}

.mb-style-3 .mb-author{
 font-family: 'Alegreya SC', serif;
 font-weight: 700;
 font-size: 18px;
 color: rgba(188, 147, 200, 1);
 text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

.mb-style-3 cite a{
 font-family: 'Alegreya', serif;
 font-weight: 700;
 font-style: italic;
 color: #fff;
 text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.mb-style-3 cite a:hover{
 color: rgba(188, 147, 200, 1);
 text-shadow: 0 1px 1px rgba(255,255,255,0.7);

}
Untunk gambar kalian bisa sesuaikan sendiri dengan gambar kalian



Dan berikut adalah kode untuk memanggil css tersebut klian bisa taro di postingan kalian..




<div class="mb-wrap mb-style-3">
<blockquote cite="http://webcensar.com">
Budayakan coment setelah membaca agar kami tau blog kalian dan jang lupa juga untuk selalu kunjungi blog temsn teman yang lain</blockquote>
<div class="mb-attribution">
<div class="mb-author">
Cenggini sarang</div>
<cite><a href="https://webcensar.com">Gw Toat</a></cite>
<div class="mb-thumb">
</div>
Dan untuk demo Nya kalian bisa lihat disini DEMO

jika kalian kurang kalian bisa langsung download di bawah ini saya sertakan sumbernya biar kalian bisa download



sumber : https://tympanus.net

Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail