W3.CSS Alıntılar
Acının kendisi aşktır, ana depolama sistemidir. Yaşam kütlesinin ayıların sıcak bir gülümsemesi olmadığını. Urnin gülüşü Hiçbir şey karmaşık değil.
Alıntıların Görüntülenmesi
w3-panel sınıfı, alıntıları görüntülemek için mükemmel bir sınıftır .
Alıntılar genellikle gri bir arka plan, sol kenarlık çubuğu ve italik yazı tipi stiliyle görüntülenir:
Örnek
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Büyük Alıntılar
İnternette genellikle büyük alıntılar kullanılır:
Örnek
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
blok alıntılar
Standart HTML <blockquote> öğesini kullanırsanız, tarayıcının fazladan bir sol ve sağ kenar boşluğu ekleyeceğine dikkat edin:
"Make it as simple as possible, but not simpler."
Albert Einstein
Örnek
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
HTML Sembollerini Kullanma
Ve işaretleri yerine standart HTML sembollerini kullanabilirsiniz:
| sembol | kod |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Acının kendisi aşktır, ana depolama sistemidir. Yaşam kütlesinin ayıların sıcak bir gülümsemesi olmadığını. Urnin gülüşü Hiçbir şey karmaşık değil.
Acının kendisi aşktır, ana depolama sistemidir. Yaşam kütlesinin ayıların sıcak bir gülümsemesi olmadığını. Urnin gülüşü Hiçbir şey karmaşık değil.
Örnek
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
Örnek
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i
class="w3-serif w3-xlarge">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</i></p>
</div>
Harika Yazı Tipi Simgelerini Kullanma
Ayrıca Font Awesome kitaplığındaki simgeleri de kullanabilirsiniz:
Örnek
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
Ayrıca rengi ve opaklığı da değiştirebilirsiniz:
Örnek
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>
Siyah bir alıntı:
Acının kendisi aşktır, ana depolama sistemidir. Yaşam kütlesinin ayıların sıcak bir gülümsemesi olmadığını. Urnin gülüşü Hiçbir şey karmaşık değil.
Örnek
<div class="w3-panel w3-black">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
Alıntıları Kart Olarak Görüntüle
Acının kendisi aşktır, ana depolama sistemidir. Yaşam kütlesinin ayıların sıcak bir gülümsemesi olmadığını. Urnin gülüşü Hiçbir şey karmaşık değil.
Örnek
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
Acının kendisi aşktır, ana depolama sistemidir. Yaşam kütlesinin ayıların sıcak bir gülümsemesi olmadığını. Urnin gülüşü Hiçbir şey karmaşık değil.
Örnek
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>