Всички харесваме онзи малко луд доктор, който не спазва правилата, обича предизвикателствата, кара мотор и слуша рок. Откак излезе сериала ме глождеше въпроса ще може ли да се направи логото (или както там се казва) на сериала да се опише само със CSS. И така, преди известно време, една безсънна нощ седнах пред компютъра и си поиграх. Резултата обаче е задоволителен само във Firefox, всички останали браузъри показват доста изкривен резултат заради особености при работата с псевдоелемента :first-letter.
Да започнем от начало – крайния резултат трябва да прилича на заглавката на таз страница. За целта на експеримента HTML кодът, с който описах надписа е следния:
<h1 class="vcard"> <span class="fn n">House</span> <span class="title">M. D.</span> </h1>
Както виждате, използвал съв hCard, за да придам повече значение на елементите, а и двата span елемента ми понагат да заобиколя някои проблеми. Основната част от CSS правилата, необходими за постигане на целта са:
h1 {
width:auto;
font-family: Arial,Helvetica,sans-serif;
font-size:90px;
line-height:1.25em;
color:black;
text-transform: uppercase;
letter-spacing:.2em;
}
h1:first-letter {
display:block;
float:left;
margin: 0 0.1em 0 0;
padding: .15em 0em .12em 0.1em;
border: .1em solid black;
letter-spacing:.1em;
text-decoration:none;
line-height:1em !important;
height:.8em;
overflow:hidden;
}
h1 span.n {
text-decoration:underline;
}
h1 span.title {
display:inline-block;
letter-spacing:0;
font-family: Trebuchet MS,Arial,Helvetica,sans-serif;
font-size:0.3em;
margin-left: -2.4em;
padding-left: .3em;
position:relative;
top: .75em;
text-decoration:none;
background: #fff;
}
Най-трудната част е първата буква, която е оформена с контур около нея, който остава на една линия с подчертавката на останалата част от името. Особеното тук е, че за разлика от останалите браузъри, Firefox позволява да бъдат нулирани вътрешните отстояния на елемента :first-letter, както и междуредието и декорацията. В Опера се запазва височината на реда и първата буква става по-висока от необходимото, а Сафари отказва да премахне подчертаването. Друг проблем е, че всички браузъри освен Firefox правят подчертаването несъразмерно тънко при големи шрифтове, докато във Firefox то е точно 0.1em и расте пропорционално с шрифта. IE няма да го коментирам въобще, там нещата са безнадеждни. Крайния резултат можете видите на тази страничка – House M.D. Както забелязвате, всички размери, освен основната големине на шрифта, са зададени в em. Използвал съм относителни единици, за да може при прромяна на големината на шрифта да се запази оформлениет. При използване на абсолютни единици може да се постигне по-добър резултат предполагам.