Home » CSS » Cara Membuat Block Quote Modern Styles

0 Cara Membuat Block Quote Modern Styles

Mari kita membuat beberapa gaya yang menarik dan modern untuk kutipan blok. Kami akan menggunakan teknik yang berbeda untuk menciptakan tampilan yang unik selama enam contoh.



Lihat demo



Hari ini kita akan membuat beberapa gaya blok kutipan mewah. Menggunakan tekstur, lingkaran, dan pseudo-elemen, kita dapat menaruh beberapa kehidupan ke kutipan dan testimonial.


Harap dicatat: hasil dari tutorial ini hanya akan bekerja sebagaimana dimaksud dalam browser yang mendukung CSS properti masing-masing.

Kami akan menghilangkan prefiks vendor dalam tutorial ini. Tapi Anda tentu akan menemukan mereka dalam file.


HTML

Html untuk blockquotes sebagai berikut:


<div class="mb-wrap mb-style-1">
    <div class="mb-thumb"></div>
    <blockquote cite="http://www.gutenberg.org/ebooks/1257">
        <p>Never fear quarrels, but seek hazardous adventures.</p>
    </blockquote>
    <div class="mb-attribution">
        <p class="mb-author">Alexandre Dumas</p>
        <cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>
    </div>
</div>


Pembagian dengan kelas mb-jempol tidak akan hadir dalam semua contoh. Dalam contoh 3 kita benar-benar akan menambahkannya sebagai seorang anak untuk pembagian dengan kelas mb-atribusi.


CSS

Pertama mendefinisikan beberapa gaya yang umum:



@font-face {
    font-family: 'icons';
    src: url("font/icons.eot");
    src:
        url("font/icons.eot?#iefix") format('embedded-opentype'),
        url("font/icons.woff") format('woff'),
        url("font/icons.ttf") format('truetype'),
        url("font/icons.svg#icons") format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* Let's set and reset some common styles */
.mb-wrap {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    position: relative;
}
 
.mb-wrap p{
    margin: 0;
    padding: 0;
}
 
.mb-wrap blockquote {
    margin: 0;
    padding: 0;
    position: relative;
}
 
.mb-wrap cite {
    font-style: normal;
}



Kami menambahkan font ikon yang akan kami gunakan dalam beberapa contoh. Kami juga menetapkan standar gaya beberapa untuk pembungkus kutipan dan unsur-unsur batin. Perhatikan, bahwa ada gaya default beberapa untuk beberapa elemen, jadi kami ingin me-reset mereka.

Contoh 1


Contoh pertama akan memiliki latar belakang kulit dan thumbnail bulat untuk dekorasi.

Jadi, mari kita gaya pembungkus seluruh pertama. Kami akan memberikan tekstur latar belakang dan mendefinisikan lebar:

.mb-style-1 {
    background: #363738 url(../images/dark_leather.jpg) repeat top left;   
    margin-top: 100px;
    padding-top: 100px;
    width: 400px;
    color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-top: 10px solid #fff;
}


Thumbnail putaran akan ditarik dengan menggunakan nilai atas negatif. Dengan perbatasan semi-transparan, kita akan menambahkan beberapa bakat:



.mb-style-1 .mb-thumb {
    display: block;
    width: 180px;
    height: 180px;
    border: 10px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;
    position: absolute;
    left: 50%;
    top: -90px;
    margin: 0 0 0 -90px;
    box-shadow:
        inset 1px 1px 4px rgba(0,0,0,0.5),
        0 2px 3px rgba(0,0,0,0.6);
}


Untuk menambahkan tanda kutip, kita akan menggunakan font icon yang kita telah disertakan sebelum dan pseudo-kelas: sebelum dan: setelah. Akan memiliki gaya terukir karena kita sedang mengatur warna gelap dengan bayangan teks cahaya:

.mb-style-1 blockquote:before,
.mb-style-1 blockquote:after {
    font-family: 'icons';
    position: absolute;
    font-size: 70px;
    top: -95px;
    color: #242526;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-1 blockquote:before{
    content: '\275d';
}
 
.mb-style-1 blockquote:after{
    right: 0px;
    content: '\e800';
}

Gaya untuk elemen teks adalah sebagai berikut:

.mb-style-1 blockquote p {
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    font-size: 25px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
    padding: 10px 10px 20px 10px;
    text-align: center;
    margin: 0 0 20px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
 
.mb-style-1 .mb-attribution {
    text-align: right;
}
 
.mb-style-1 .mb-author{
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    color: #1b1c1d;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-1 cite a{
    color: #f0f0f0;
    font-style: italic;
    font-family: Cambria, Georgia, serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7)
}
 
.mb-style-1 cite a:hover{
    text-shadow: 2px 2px 3px rgba(0,0,0,0.9)
}



Dan itu salah satu contoh! Mari kita periksa yang berikutnya.

Contoh 2


Contoh 2 akan memiliki gaya asimetris mewah dengan elemen bulat pada sisi kiri. Di atas kita ingin menunjukkan sebuah lingkaran dengan tanda kutip. Jadi mari kita pertama menambahkan padding beberapa blockquote untuk mendorong ke bawah:


.mb-style-2 blockquote{
    padding-top: 150px;
}

The melingkar pseudo-elemen memiliki gaya berikut:


.mb-style-2 blockquote:after {
    font-family: 'icons';
    background: rgba(235,150,108,0.8);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    content: '\275e';
    position: absolute;
    font-size: 70px;
    line-height: 130px;
    text-align: center;
    top: 0px;
    left: 50%;
    margin-left: -65px;
    color: rgba(255,255,255,0.5);
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

Kami berpusat secara horisontal dengan menetapkan kiri sampai 50% dan memberikan margin kiri negatif setengah lebarnya.

Sekarang, mari kita tambahkan bahwa lingkaran parsial dengan menggunakan lain lancung elemen. Kami memberikan lebar dan tinggi 500px, radius perbatasan 50% dan hanya batas kiri. Ini akan menciptakan bentuk:

.mb-style-2 blockquote:before{
    content: '';
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border-left: 5px solid rgba(235,150,108,0.1);
    position: absolute;
    top: 0px;
    left: -50px;
    z-index: -1;
}

Paragraf dari blockquote akan ditetapkan untuk inline karena kita ingin memisahkan baris:

.mb-style-2 blockquote p {
    font-family: Baskerville, Georgia, serif;
    font-size: 28px;
    font-style: italic;
    background: rgba(255,255,255,0.5);
    display: inline;
    color: rgba(235,150,108,0.8);
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    line-height: 46px;
    box-shadow: 0 -6px 0 rgba(235,150,108,0.2);
}

Dan akhirnya, mari kita mendefinisikan gaya untuk elemen teks istirahat:

.mb-style-2 .mb-attribution {
    text-align: right;
}
 
.mb-style-2 .mb-author{
    text-transform: uppercase;
    font-size: 18px;
    padding-top: 10px;
    font-weight: bold;
    color: #d48158;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-2 cite a{
    color: #d7aa94;
    font-style: italic;
}
 
.mb-style-2 cite a:hover{
    color: #d48158;
}


Contoh 3


Untuk gaya ketiga, kami ingin memperbesar bungkusnya dan mengatur bayangan kotak untuk blockquote tersebut:

.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);
}

Kami akan menambahkan panah kecil menunjuk ke bawah menggunakan teknik yang ditawarkan di CSS Arrow Silahkan! :

.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;
}
 

Paragraf akan memiliki gaya berikut:

.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;
}


Sekarang, kita akan menambahkan tanda kutip ke kiri dengan bantuan elemen pseudo-:

.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);
}


Bagian dengan link dan penulis akan memiliki bantalan yang tepat lebih besar karena jempol bahwa kita akan menambahkan:

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

Pembagian thumbnail akan menjadi lingkaran kecil dengan gambar penulis sebagai latar belakang:

.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);
}

Dan istirahat teks-gaya adalah sebagai berikut:


.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);
}

Contoh 4



Contoh ini adalah sedikit lebih berani. Kami akan menciptakan sebuah kotak besar gelap dengan kutipan berukuran besar. Citra penulis akan ditetapkan sebagai latar belakang untuk semuanya:

.mb-style-4 {
    width: 600px;
    padding: 20px 240px 50px 20px;
    background: #444 url(../images/dickens.jpg) no-repeat 140% 25%;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}

Paragraf dari blockquote tersebut akan memiliki nilai RGBA untuk warna. Ini mari kita mendefinisikan nilai opacity:

.mb-style-4 blockquote p {
    color: rgba(255,255,255,0.95);
    font-size: 21px;
    line-height: 26px;
    text-align: right;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
}

Span akan memiliki gaya khusus. Kita akan putar sedikit dan memberikan ukuran teks yang lebih besar dan warna yang berbeda:

.mb-style-4 blockquote p span {
    font-weight: 700;
    color: #fcf779;
    font-size: 58px;
    line-height: 58px;
    display: block;
    padding: 10px;
    text-shadow: 7px 7px 2px rgba(0,0,0,0.2);
    transform: rotate(-7deg) translateY(10px);
}

Mari kita menambahkan tanda kutip dari icon yang telah ditetapkan dengan bantuan dari sebelumnya: pseudo-class:

.mb-style-4 blockquote p span:before {
    font-family: 'icons';
    content: '\275d';
    font-weight: normal;
    opacity: 0.1;
    font-size: 136px;
    position: absolute;
    color: #fff;
    top: -50px;
    left: -25px;
    transform: rotate(45deg);
}

Opacity akan sangat rendah dan kami akan memutar di sudut derajat 45.

Pembagian atribusi akan diputar sedemikian rupa sehingga kita hanya bisa melihat segitiga di sudut kanan:


.mb-style-4 .mb-attribution {
    text-align: right;
    text-transform: uppercase;
    font-weight: bold;
    background: #222;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding: 30px;
    transform: rotate(-40deg) translate(175px, 110px);
}

Mari kita tambahkan sejumput ke elemen penulis:


.mb-style-4 .mb-author:before {
    content: '\2014';
    padding-right: 4px;
}
 
.mb-style-4 .mb-attribution cite a{
    color: #777;
}
 
.mb-style-4 .mb-attribution cite a:hover{
    color: #fcf779;
}


Contoh 5


Contoh kelima akan muncul sebagai satu set lingkaran. Kita akan menggunakan bayangan kotak ganda untuk elemen blockquote dalam rangka untuk mencapai itu:


.mb-style-5 {
    width: 390px;
}
 
.mb-style-5 blockquote {
    text-align: center;
    background: #333;
    width: 350px;
    height: 350px;
    padding: 60px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 10px #333,
        inset 0 0 0 12px rgba(255,255,255,0.6),
        80px 0 0 rgba(255,255,255,0.3),
        -80px 0 0 rgba(255,255,255,0.3),
        50px 0 0 rgba(60,185,145,0.2),
        -50px 0 0 rgba(185,60,60,0.2);
}

Mari kita gaya paragraf:

.mb-style-5 blockquote p {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    padding-top: 25px;
    text-transform: uppercase;
    text-shadow: 0 0 1px #fff, 0 1px 1px #000;
    font-family: 'Annie Use Your Telescope', cursive;
}

Dalam rangka untuk memisahkan kutipan, kita akan menempatkan bagian terakhir dari menjadi span dan memberikan beberapa margin atas dan padding:

.mb-style-5 blockquote p span {
    display: block;
    position: relative;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

Mari kita tambahkan lingkaran kecil dengan tanda kutip:

.mb-style-5 blockquote p span:before {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ddd;
    content: "\275d";
    font-size: 40px;
    color: #333;
    top: 0px;
    left: 50%;
    margin: -25px 0 0 -25px;
    border-radius: 50%;
}

Dan akhirnya, beberapa styling untuk elemen teks lainnya:

.mb-style-5 .mb-attribution {
    text-align: center;
    font-family: 'Annie Use Your Telescope', cursive;
    padding: 20px;
    font-size: 16px;
}
.mb-style-5 cite a:hover{
    color: #000;
}

Contoh 6


Contoh terakhir akan terlihat seperti Polaroid, kecuali bahwa kami tidak akan menggunakan gambar tapi kutipan. Mari gaya wrapper pertama:

.mb-style-6 {
    width: 350px;
    height: 400px;
    background: #fff;
    border-radius: 4px;
}

Mari kita tambahkan beberapa bayangan yang bagus dengan teknik ini besar oleh Nicolas Gallagher :

/* Shadow style from Nicolas Gallagher: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ */
.mb-style-6:before,
.mb-style-6:after {
    content: "";
    position: absolute;
    z-index: -2;
    transform: rotate(-3deg);
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    height: 20%;
    left: 10px;
    max-height: 100px;
    max-width: 300px;
    width: 50%;
}
.mb-style-6:after {
    transform: rotate(3deg);
    left: auto;
    right: 10px;
}

Blockquote akan memiliki latar belakang gelap:

.mb-style-6 blockquote{
    background: #333;
    height: 75%;
    padding: 30px;
    text-align: center;
}

Dan kami akan menambahkan tanda kutip ke sisi kanan:

.mb-style-6 blockquote:before{
    color: rgba(255,255,255,0.2);
    position: absolute;
    content: '\0022';
    font-size: 150px;
    line-height: 130px;
    font-style: italic;
    top: 0px;
    right: 20px;
    font-family: Cambria, Georgia, serif;
}

Paragraf akan memiliki gaya berikut:

.mb-style-6 blockquote p {
    color: #fff;
    font-family: 'Abril Fatface', sans-serif;
    font-size: 24px;
    text-shadow: 1px 1px 1px #000;
}

Mari kita tambahkan beberapa padding ke divisi atribusi:

.mb-style-6 .mb-attribution {
    padding: 20px;
}

Unsur penulis akan sedikit diputar dan kami akan menggunakan font tulisan tangan untuk membuatnya terlihat seperti tanda tangan:


.mb-style-6 .mb-author {
    font-size: 24px;
    font-family: 'Dr Sugiyama', cursive;
    -moz-transform: rotate(-4deg);
    color: #070d5f;
}

Dan terakhir, namun tidak sedikit, mengutip link:

.mb-style-6 cite a{
    color: #999;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
}
.mb-style-6 cite a:hover{
    color: #000;
}

Saya harap Anda menikmati gaya ini dan dapat menemukan inspirasi !


Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.
View all contributions by
Website: http://tympanus.net/



Labels:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Terima Kasih Telah Berkunjung di Blog Ini Update terus untuk mendapatkan Artikel terbaru

X