Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...

PROFRUIT BLOG ПРЕДСТАВЯ

ДОБАВЯНЕ НА ГРАДИЕНТ И НА СЯНКА КЪМ ТЕКСТ

Описанията в тази статия се виждат най-добре под браузър Firefox 3.6.x.

Кредити
Статията се посвещава на 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 {
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-правила. Нещата изглеждат така:

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;
}

Какво става на практика. Залива се контейнер <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 за пореден път са ощетени и пропускат прелестите на съвременните технологии.

Описание на свойство Text Shadow

Да разгледаме следния пример:

h1 { text-shadow: 2px 3px 1px #CCC; }
  • Първото значение (2px) - измества сянката хоризонтално спрямо текста (може да бъде с отрицателен знак); положителен знак измества сянката на дясно, с отрицателен - на ляво.
  • Второто значение (3px) - измества сянката вертикално (може да бъде с отрицателен знак); положителен знак измества сянката надолу, с отрицателен - нагоре.
  • Третото значение (1px) - размива сянката; не е задължително.
  • Четвъртото значение (#CCC) - цвят на сянката; не е задължително; ако не е зададено, се използва цвета на текста.
Тext-shadow позволява създаване на множествени сенки. Достатъчно е чрез запетая да се добавят значения, например:

h1 { text-shadow: 2px 3px 1px black, -3px 3px yellow, green 3px -3px 10px; }


24.09.2010 profruit


|

1 Response to "CSS Текст Козметика"

  1. зайче Said,

    Идялно XD
    Bevel ефекта кърти.

     

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: openHAB, Ubuntu, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога