PROFRUIT BLOG ПРЕДСТАВЯ
ДОБАВЯНЕ НА ГРАДИЕНТ И НА СЯНКА КЪМ ТЕКСТ
Описанията в тази статия се виждат най-добре под браузър Firefox 3.6.x.
Зачетени са още: Малина, fedora, ostrovska, shefkata, Madonna, DeadSmurf, Ина Петкова, Trichocephalus, Ken, go6o_kara, kokomil, telecabel, algor, Melmak ®, B-boy[StyLe], kirichev, zdravko87, Night_Raven, silvestar, Орландо-Дончо.
Пишете ми и ще добавя името ви към почетната дъска.
Кредити
Статията се посвещава на am-am.Зачетени са още: Малина, fedora, ostrovska, shefkata, Madonna, DeadSmurf, Ина Петкова, Trichocephalus, Ken, go6o_kara, kokomil, telecabel, algor, Melmak ®, B-boy[StyLe], kirichev, zdravko87, Night_Raven, silvestar, Орландо-Дончо.
Пишете ми и ще добавя името ви към почетната дъска.
ТЕХНИКА, ИЗПОЛЗВАЩА ГРАДИЕНТ
Сърфирайки по интернет е възможно да сте попадали на подобни CSS-представления на обичаен текст. Тази техника ползва полупрозрачен градиент-изображение в формат PNG и работи по следния начин. Съществува заглавие с отделно вмъкнат контейнер:
<h1>Заглавие<span></span></h1>
Контейнер <span></span> се позиционира върху текста и в неговия фон се помества полупрозрачен градиент, закриващ текста на половина.
Как изглежда изходния HTML код на използваните CSS правила:
<h1>Заглавие<span></span></h1>
Контейнер <span></span> се позиционира върху текста и в неговия фон се помества полупрозрачен градиент, закриващ текста на половина.
Как изглежда изходния HTML код на използваните CSS правила:
h1 {
color: #0079b6;
font-size: 220%;
font-weight: normal;
letter-spacing: -0.05em;
margin: 0.6em 0pt;
position: relative; /* задължително */
text-align: center;
}
h1 span {
background: url(gradient.png) repeat-x scroll 0% 0% transparent;
display: block;
position: absolute;
top: 0pt;
left: 0pt;
height: 100%;
width: 100%;
}
color: #0079b6;
font-size: 220%;
font-weight: normal;
letter-spacing: -0.05em;
margin: 0.6em 0pt;
position: relative; /* задължително */
text-align: center;
}
h1 span {
background: url(gradient.png) repeat-x scroll 0% 0% transparent;
display: block;
position: absolute;
top: 0pt;
left: 0pt;
height: 100%;
width: 100%;
}
ИМИТАЦИЯ НА ГРАДИЕНТ
Съществува техника, която не предполага използване на изображение въобще. Постига се някаква имитация на градиентно заглавие. Разбира се на помощ отново идва ползването на CSS.
Изходният HTML код се запазва от предния пример и разлика търпи единствено приложените CSS-правила. Нещата изглеждат така:
Какво става на практика. Залива се контейнер <span></span> с бял цвят и му се предава прозрачност, като разположението върху заглавието се следи да заеме примерно половината.
Прът в колелото забива браузър IE 6. Заради него се дописва допълнително правило overflow: hidden, иначе полупрозрачният слой закрива изцяло текста, отделно IE 6 не разбира процентна височина на слоя и това налага задаване в пиксели.
Изходният HTML код се запазва от предния пример и разлика търпи единствено приложените CSS-правила. Нещата изглеждат така:
h1 {
color: #0094d6;
font: 36px Times New Roman;
position: relative; /* задължително */
margin: 10px 0px;
padding: 0px;
text-align: center;
}
h1 span {
background: #fff;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 23px;
overflow: hidden /* заради IE6 */;
opacity: 0.63;
}
color: #0094d6;
font: 36px Times New Roman;
position: relative; /* задължително */
margin: 10px 0px;
padding: 0px;
text-align: center;
}
h1 span {
background: #fff;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 23px;
overflow: hidden /* заради IE6 */;
opacity: 0.63;
}
Какво става на практика. Залива се контейнер <span></span> с бял цвят и му се предава прозрачност, като разположението върху заглавието се следи да заеме примерно половината.
Прът в колелото забива браузър IE 6. Заради него се дописва допълнително правило overflow: hidden, иначе полупрозрачният слой закрива изцяло текста, отделно IE 6 не разбира процентна височина на слоя и това налага задаване в пиксели.
Добавяне на сянка към текст
Profruit Blog
Profruit Blog
Moже да причините удивление у посетителя на вашата уеб-страница използвайки забележителното CSS-свойство text-shadow. Към семейството от браузъри, интерпретиращи това свойство, Firefox се присъедини с версия 3.1 и нагоре. Тext-shadow се описва от спецификациите на CSS3 (наследник на CSS2 и CSS2.1, които също засягат този въпрос) и се поддържа от следните браузъри: Opera 9.5+, Safari 3+, Firefox 3.1+ и Google Chrome 2+.
Потребителите на Microsoft Internet Explorer следва да знаят, че този браузър не поддържа text-shadow, това важи и за IE 8. С думи прости, потребителите на Microsoft Internet Explorer за пореден път са ощетени и пропускат прелестите на съвременните технологии.
Потребителите на Microsoft Internet Explorer следва да знаят, че този браузър не поддържа text-shadow, това важи и за IE 8. С думи прости, потребителите на Microsoft Internet Explorer за пореден път са ощетени и пропускат прелестите на съвременните технологии.
Описание на свойство Text Shadow
Да разгледаме следния пример:
h1 { text-shadow: 2px 3px 1px #CCC; }
h1 { text-shadow: 2px 3px 1px #CCC; }
- Първото значение (2px) - измества сянката хоризонтално спрямо текста (може да бъде с отрицателен знак); положителен знак измества сянката на дясно, с отрицателен - на ляво.
- Второто значение (3px) - измества сянката вертикално (може да бъде с отрицателен знак); положителен знак измества сянката надолу, с отрицателен - нагоре.
- Третото значение (1px) - размива сянката; не е задължително.
- Четвъртото значение (#CCC) - цвят на сянката; не е задължително; ако не е зададено, се използва цвета на текста.
h1 { text-shadow: 2px 3px 1px black, -3px 3px yellow, green 3px -3px 10px; }
24.09.2010 profruit
Идялно XD
Bevel ефекта кърти.