Всички харесваме онзи малко луд доктор, който не спазва правилата, обича предизвикателствата, кара мотор и слуша рок. Откак излезе сериала ме глождеше въпроса ще може ли да се направи логото (или както там се казва) на сериала да се опише само със 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. Използвал съм относителни единици, за да може при прромяна на големината на шрифта да се запази оформлениет. При използване на абсолютни единици може да се постигне по-добър резултат предполагам.

Етикети: CSS, House MD, HTML, Др. Хаус