W3.CSS Aanhalings
Die pyn self is liefde, die hoofbergingstelsel. Dat die massa van die lewe nie 'n warm glimlag van die bere is nie. Die gelag van die urn Niks is ingewikkeld nie.
Vertoon aanhalings
Die w3-paneelklas is die perfekte klas om aanhalings te vertoon.
Aanhalings word dikwels vertoon met 'n grys agtergrond, 'n linkerrandbalk en 'n kursief skrifstyl:
Voorbeeld
<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>
Groot aanhalings
Groot aanhalings word dikwels op die internet gebruik:
Voorbeeld
<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>
Blokaanhalings
As jy die standaard HTML <blockquote> element gebruik, let daarop dat die blaaier 'n ekstra linker- en regterkantlyn sal byvoeg:
"Make it as simple as possible, but not simpler."
Albert Einstein
Voorbeeld
<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>
Gebruik HTML-simbole
Jy kan standaard HTML-simbole in plaas van ampersands gebruik:
| Simbool | Kode |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Die pyn self is liefde, die hoofbergingstelsel. Dat die massa van die lewe nie 'n warm glimlag van die bere is nie. Die gelag van die urn Niks is ingewikkeld nie.
Die pyn self is liefde, die hoofbergingstelsel. Dat die massa van die lewe nie 'n warm glimlag van die bere is nie. Die gelag van die urn Niks is ingewikkeld nie.
Voorbeeld
<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>
Voorbeeld
<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>
Gebruik Font Awesome Icons
Jy kan ook ikone van die Font Awesome-biblioteek gebruik:
Voorbeeld
<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>
Jy kan ook die kleur en deursigtigheid verander:
Voorbeeld
<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>
'n Swart aanhaling:
Die pyn self is liefde, die hoofbergingstelsel. Dat die massa van die lewe nie 'n warm glimlag van die bere is nie. Die gelag van die urn Niks is ingewikkeld nie.
Voorbeeld
<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>
Vertoon aanhalings as kaarte
Die pyn self is liefde, die hoofbergingstelsel. Dat die massa van die lewe nie 'n warm glimlag van die bere is nie. Die gelag van die urn Niks is ingewikkeld nie.
Voorbeeld
<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>
Die pyn self is liefde, die hoofbergingstelsel. Dat die massa van die lewe nie 'n warm glimlag van die bere is nie. Die gelag van die urn Niks is ingewikkeld nie.
Voorbeeld
<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>