Idézetblokk testreszabása
2018.12.02. 12:02
Személy szerint nagyon sokszor használom az idézetblokkot egy tartalom kiemelésére. Az általam megosztott kódokat is idézetblokkban találjátok, így már találkozhattatok ezzel a lehetőséggel.
Eléréséhez mindössze ki kell jelölnötök a kiemelni kívánt szövegrészt, és ezzel az ikonnal máris ki tudjátok emelni.
Az idézetblokk kinézetét ezzel a kóddal tudjátok szerkeszteni:
/*IDÉZET BLOKK*/
.blockquote {
background-color: #eeeeee !important;
border-bottom: 4px solid #cccccc !important;
color: #333333 !important;
font-style: normal;
margin: 20px 75px 10px 10px;
padding-right: 10px;
padding: 5px;
quotes: "\201C" "\201D";
}
.blockquote:after {
font-style: italic;
margin-top: -40px;
margin-right: -70px;
padding: 0px;
content: open-quote;
font-weight: bold;
color: #000000;
font-size: 80px;
font-family: 'Lucida Sans Unicode';
float: right;
}
Ez a kód ezt az alapkinézetet adja a blokknak:
Természetesen állíthatunk a színeken:
Valamint fényképet is állíthatunk be a szöveg mögé, ezzel a kóddal:
background-image: url(); /* kép url címének helye */
|