DerEinzige & traumfahne.de

DerEinzige & traumfahne.de

zeitschrift zum selbstausdrucken im eigenverlag vom 28. 1. 2010 | gesamtausgaben: 269

spielerei mit dem css pseudo element first-letter

pseudo: aus dem griechischen ψεῦδος (pseudos) *täuschung, lüge*

pseudo elemente in deinem css zu verwenden ist tatsächlich mit gewissen darstellungs risiken verbunden

lynx und die braille browser wissen nix davon und der ms internet explorer ist eh zu doof … ich kapier einfach nicht warum sich microsoft nicht auf css standards einlassen will

abgesehen davon kannst du nette dinge damit anstellen …

mit dem element first-letter habe ich den teaser auf meiner startseite visuell aufgewertet und den drögen text des impressums etwas gelockert.

im ersten fall steht im html <p class="teaser"> und das entsprechende css dazu:

p.teaser:first-letter {
font-family: "Lucida Console", Monaco, sans-serif;
color: #800000;
font-size: 3em;
font-style: normal;
float: left;
padding-right: 0.2em;
padding-top: 0px;
margin-top: 0.1em;
font-weight:bold
}

wie du siehst ist die richtige positionierung das problem

im zweiten fall <p class="absatz"> mit dem css:

p.absatz:first-letter {
font-family: "Lucida Console", Monaco, sans-serif;
color: #800000;
font-size: 1.2em;
line-height: 90%;
padding-right: 0.1em;
font-weight:bold
}

auch hier ein klein wenig frikkelei mit der positionierung.

wichtig:

richtig funktionieren tut das pseudo element nur in verbindung mit dem html absatz tag <p> und wenn du es *floatest* tut der *vertical-align* nicht mehr

folgende css eigenschaften kannst du auf first-letter{} anwenden:

font-*
color
background-*
margin-*
padding-*
border-*
text-decoration
vertical-align (nur ohne float)
text-transform
line-height
float
clear

kommt noch was? von dir ein kommentar? oder ein tödlicher witz:

wenn ist das nunstück git und slotermeyer? ja! … beiherhund das oder die flipperwaldt gersput!

autor: jeff brett, verfasst am 28. 1. 2010
permalink: http://dereinzige.de/2010/01/28/spielerei-mit-dem-css-pseudo-element-first-letter/
short url: http://dereinzige.de/821