DerEinzige

gedanken zur illusorischen realität des einzigen und seines eigenthums ...
... Ausgabe 198 ... 12. Jhrg.

«« »»

rubrik: css markup webdesign

DerEinzige & traumfahne.de

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

spielerei mit dem css pseudo element first-letter

28. Januar 2010 | ausgabe drucken     | email mail facebook f***book twit tw | leserbrief schreiben    

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 :p

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 :D

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

einen leserbrief schreiben

du mußt angemeldet sein, um kommentieren zu können.

«« »»

durchschnittlich 29 abonnenten täglich
leser: 2 online, 812972 gesamt seit dem 16.februar 2006.

home | editorial | über | datenschutz | impressum

springe zum seitenanfang