Добавяне на “бита” буква с CSS
В днешно време този похват много радко се използва, може би единствено в печатните издания или книжките с приказки. Какво означава “бита буква”? Това е похвата при който при започване на глава от книга или статия първата буква е доста по-голяма от останалите и стои някак като отделена от самия текст.Ето и пример как би изглеждал текста с такъв похват:
Сега как да се направи подобен ефект с CSS и без използване на картинки?
Определено в HTML-а няма нищо специално, което да се пише - прост текст заграден със таг за параграф.
consectetuer adipiscing elit. Donec pede. Quisque
malesuada sagittis odio.</p>
Quisque suscipit convallis sem. Nullam tincidunt
odio quis urna. Proin pharetra. Etiam imperdiet. Cras
condimentum neque ac lectus.
В CSS-a се ползва следния код, който придава ефекта бита буква:
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
color: red;
font-family: "Times"
}
Ключът тука е ползването на :first-letter. При примера даден по-горе този CSS ще украси с бита буква само първия параграф, защото ние сме специфицирали, че този стил се отнася само за параграфи с клас special. Ако махнем .special от дефиницията на стила, тогава битата буква ще стилизира и втория параграф.
В заключение бих казал, че ефекта от това е според мен е спорен дори според мен е “дефект”, но дизайнери има всякакви и точно защото на мен ми натресоха дизайн с такъв похват седнах да напиша този пост.
Добавяне на градиент на тест
Тук нещата са следните: позтавят задача да се направи дадено заглавие с ефект като този:
Но, като допълнително условие се изисква текста да може да бъде редактиран през админ панела на страницата от някой маркетингов “специалист”.
Какво може да се направи? Тук нещата стават малко по-хакерски, или поне колкото се отнася то IE. Аз лично мразя да плолзвам някакви CSS приоми, който определено не са от най-стандартния тип и още по-конкретно, когато css дефиницията е заградена с [if lt IE 7] 
Обаче не сме ние тези, който поставяме задачите - ние ги изпълняваме за това ето как може да удоволетворим нуждите на маркетинг-а.
Нека за този пример задачата да е: Заглавието на всяка страница да е “ефектно” като примера показан по-горе. Т.е. всички <H1> тагове да са украсени така.
Ето как трябва да изглежда HTML-a за H1 таговете
Забележете, че във тага H1 има допълнителен <span> таг.
Това е кода, който ще важи за Gecko браузерите като FireFox.
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;
}
а това пък трябва да се постави в хедъра на страницата за IE:
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<!--[endif]-->
Вертикално центриране на текст с line-height
А ето и как може да се направи:
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec pede.</p>
</div>
height:100px;
border: 1px solid #888;
background-color: #efefef;
text-align: center;
}
div.vertical *{
margin:0;
}
div.vertical p{
line-height:100px;
}
Позициониране в обсолютния център
Тук няма даже да се хабя да пиша. Има прекрасен пример за това как се прави. Просто ще дам линка:
Dead Centre
Ето и готовите примери описани в този пост.
Надявам се да ви е било полезно.
Много полезни трикчета. Аз се опитвам да давам инфо за всякакви трикове приложими в блогването. Ако искаш, ела публикувай и в моя сайт