Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.

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. am-am Said,

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

     

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

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

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