Home
css

css blockquoute keren banget

toat sarang
toat sarang
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

Baca juga