Добавяне на “бита” буква с CSS

В днешно време този похват много радко се използва, може би единствено в печатните издания или книжките с приказки. Какво означава “бита буква”? Това е похвата при който при започване на глава от книга или статия първата буква е доста по-голяма от останалите и стои някак като отделена от самия текст.Ето и пример как би изглеждал текста с такъв похват:

Сега как да се направи подобен ефект с CSS и без използване на картинки?

Определено в HTML-а няма нищо специално, което да се пише - прост текст заграден със таг за параграф.

[cc lang="html"]

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec pede. Quisque
malesuada sagittis odio.

Quisque suscipit convallis sem. Nullam tincidunt
odio quis urna. Proin pharetra. Etiam imperdiet. Cras
condimentum neque ac lectus.

[/cc]

В CSS-a се ползва следния код, който придава ефекта бита буква:

[cc lang="css"]
p.special:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
color: red;
font-family: “Times”
}
[/cc]

Ключът тука е ползването на :first-letter. При примера даден по-горе този CSS ще украси с бита буква само първия параграф, защото ние сме специфицирали, че този стил се отнася само за параграфи с клас special. Ако махнем .special от дефиницията на стила, тогава битата буква ще стилизира и втория параграф.

В заключение бих казал, че ефекта от това е според мен е спорен дори според мен е “дефект”, но дизайнери има всякакви и точно защото на мен ми натресоха дизайн с такъв похват седнах да напиша този пост.

Добавяне на градиент на тест

Тук нещата са следните: позтавят задача да се направи дадено заглавие с ефект като този:

Но, като допълнително условие се изисква текста да може да бъде редактиран през админ панела на страницата от някой маркетингов “специалист”.

Какво може да се направи? Тук нещата стават малко по-хакерски, или поне колкото се отнася то IE. Аз лично мразя да плолзвам някакви CSS приоми, който определено не са от най-стандартния тип и още по-конкретно, когато css дефиницията е заградена с [if lt IE 7]

Обаче не сме ние тези, който поставяме задачите - ние ги изпълняваме за това ето как може да удоволетворим нуждите на маркетинг-а.

Нека за този пример задачата да е: Заглавието на всяка страница да е “ефектно” като примера показан по-горе. Т.е. всички <H1> тагове да са украсени така.

Ето как трябва да изглежда HTML-a за H1 таговете

[cc lang="html"]

Article Title

[/cc]

Забележете, че във тага H1 има допълнителен <span> таг.

Това е кода, който ще важи за Gecko браузерите като FireFox.

[cc lang="css"]
h1 {
font: bold 330%/100% “Helvetica”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;

}
[/cc]

а това пък трябва да се постави в хедъра на страницата за IE:

[cc lang="css"]

[/cc]

Вертикално центриране на текст с line-height

А ето и как може да се направи:
[cc lang="html"]

[/cc]

[cc lang="css"]
div.vertical{
height:100px;
border: 1px solid #888;
background-color: #efefef;
text-align: center;
}
div.vertical *{
margin:0;
}
div.vertical p{
line-height:100px;
}
[/cc]

Позициониране в обсолютния център

Тук няма даже да се хабя да пиша. Има прекрасен пример за това как се прави. Просто ще дам линка:
Dead Centre

Ето и готовите примери описани в този пост.

Надявам се да ви е било полезно.

Subscribe to the post comments feeds or Leave a trackback