Автор: Владислав Демьянишин

 

Давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд пребывания на нем. От того, как выглядит сайт, “цепляют” ли взгляд его элементы, достаточно ли он интерактивен, зависит, какое сложится впечатление о нем у его посетителя.

 

Это в свою очередь повлияет на то, на сколько задержится посетитель на таком сайте и захочет ли вообще возвращаться на него. Поэтому сегодня мне хотелось бы поговорить о создании тени для текста и иллюстраций, о рамках для изображений и некоторых других украшательствах.

 

 

В былые годы, чтобы реализовать на веб-странице тень для текста, приходилось попросту рисовать этот текст с тенью в обычное изображение. С появлением CSS делать это стало намного проще.

 

Для создания тени для текста воспользуемся стилевым свойством text-shadow, которое формирует тень, отбрасываемую тестом, а также устанавливает ее параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line. Формат следующий:

 

 

где тень может отсутствовать (значение none) или содержать перечисленные через пробел параметры: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>.

Первый обязательный параметр – смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное – влево.

 

Второй обязательный параметр – смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста.

 

Третий и необязательный параметр задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан (пропущен), то по умолчанию устанавливается равным 0. Следует учитывать, что алгоритмы сглаживания в браузерах отличаются, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

 

Цвет тени можно указывать в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Это необязательный параметр.

 

 

Давайте попробуем сделать простенькую четкую тень. HTML-код для нее будет выглядеть так:

 

<div style="font-size: 26px; font-weight: bold; text-shadow: 3px 3px #888">ЗАГОЛОВОК 1</div>

 

Выглядит уже интереснее обычного текста (рис. 1). А как будет выглядеть размытая тень? Код такой:

 

<div style="font-size: 26px; font-weight: bold; text-shadow: 3px 3px 3px #888">ЗАГОЛОВОК 2</div>

 

Ну, вот уже совсем другое дело (рис. 2).

Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке – в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

 

 

А давайте проявим немного фантазии и сделаем небольшую белую обводку вокруг текста, конечно, путем создания белой тени, и добавим вторую размытую тень синего цвета:

 

<div style="…text-shadow: 1px 1px 0 #FFF, 2px 2px 2px #00f">ЗАГОЛОВОК 3</div>

 

У нас получился (рис. 3) еще один элегантный стиль заголовка ;) Так можно играться с тенью сколь угодно, накладывая несколько теней к одному и тому же тексту, и получая разнообразные эффекты. Нужно лишь подключить фантазию.

 

 

Что касается браузеров, то замечу, что тени поддерживаются начиная с версий Internet Explorer 10, Chrome 2, Opera 9.5, Safari 1.1, Firefox 3.5. Opera поддерживает до 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.

 

Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. И только с версии 4.0 работает уже множество теней. Internet Explorer понимает свойство text-shadow только с версии 10. Взамен используется свойство filter: Shadow(параметры).

 

 

Довожу до вашего сведенья, что тень можно сделать не только для текста, но и для любого другого элемента блочного типа – это изображения, DIV и другие элементы прямоугольной формы.

 

В таких случаях следует применять свойство box-shadow. Допустимо использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже.

 

Если для элемента задается радиус скругления через свойство border-radius (о нем пойдет речь ниже), то тень также получится с закругленными уголками. Следует учитывать, что добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере. Формат свойства такой:

 

 

где тень может отсутствовать (значение none) или содержать перечисленные через пробел параметры: inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>.

 

Первый необязательный параметр может иметь значение inset, что заставит тень выводиться внутри элемента.

Второй обязательный параметр – смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное – влево.

 

Далее обязательный параметр – смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное – вверх.

Следующий необязательный параметр задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.

 

За ним следует необязательный параметр, положительное значение которого растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.

Замыкает необязательный параметр цвета тени. По умолчанию тень черная.

 

 

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке – в самом низу. Например (рис. 4):

 

<img src="strawberry.jpg" style="box-shadow: 3px 3px 3px #888">

 

или

 

<img src="strawberry.jpg" style="box-shadow: 2px 2px 0 #ddd, 2px 2px 2px #ccc">

 

 

Прошли те времена, когда все на веб-странице имело заостренные углы. Теперь их можно сглаживать при помощи свойства border-radius, которое устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. Формат:

 

 

Допускается указывать одно, два, три или четыре значения, перечисляя их через пробел (таблица 1). Также допустимо писать два значения через слэш “/”. В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

 

 

 

В следующем примере представлены несколько вариантов указания параметров:

 

<html>

 <head>

  <style>

   .radius {

    background: #f0f0f0; /* Цвет фона */

    border: 1px solid black; /* Параметры рамки */

    padding: 15px; /* Поля вокруг текста */

    margin-bottom: 10px; /* Отступ снизу */

    width: 400px;

   }

  </style>

 </head>

 <body>

  <div style="border-radius: 50px 0 0 50px;" class="radius">

   border-radius: 50px 0 0 50px;

  </div>

  <div style="border-radius: 40px 10px" class="radius">

   border-radius: 40px 10px;

  </div>

  <div style="border-radius: 10em/1em;" class="radius">

   border-radius: 13em/3em;

  </div>

  <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">

   border-radius: 13em 0.5em/1em 0.5em;

  </div>

  <div style="border-radius: 8px;" class="radius">

   border-radius: 8px;

  </div>

</body>

</html>

 

В результате у нас получились вот такие блоки (рис. 5). То же самое можно проделать и с изображениями. А если еще добавить тень…

 

 

Сейчас практически ни один сайт не обходится без иллюстраций и галерей. И как бывает красиво, когда каждое фото на веб-странице оформлено в выразительную рамку.

Такую рамку можно легко сделать при помощи уже казалось бы привычных свойств background и border. Например:

 

<html>

<style>

/* граница внутри, фон снаружи */

.ramka1 {

background: #000;

border: 4px solid #ddd;

padding: 1px;

}

 

/* граница снаружи, фон внутри */

.ramka2 {

background: #ddd;

border: solid 1px #000;

padding: 4px;

}

</style>

 

<img class="ramka1" src="strawberry.jpg">

<img class="ramka2" src="strawberry.jpg">

<img class="ramka2" src="strawberry.jpg" style="box-shadow: 3px 3px 3px #888">

<img class="ramka2" src="strawberry.jpg" style="box-shadow: 3px 3px 3px #888; border-radius: 8px;">

</html>

 

Тогда получим симпатичные рамки, а с применением того, чему мы научились немного выше, еще и закругленные рамки с тенью (рис. 6).

 

 

 

 

Часто на сайтах используются формы для отправки какой-то информации автору сайта. Но все поля формы обычно какие-то безжизненные что ли.

 

 

Чтобы оживить форму, предлагаю объявить стиль для ее элементов, которые будут менять свой вид при получении фокуса, т.е. при клике на них. Тем самым, давая понять пользователю, что ввод будет осуществляться именно в это поле (рис. 7).

Предлагаю, следующий код:

 

<html>

 

<style>

input:focus,

textarea:focus {

border-color: #4787b1;

box-shadow: 0 0 5px 2px #4787B1;

}

</style>

 

<input type="text" value="12345">

 

</html>

 

А если желаете конкретный тип поля выделить индивидуально, то можно так:

 

<style>

input[type="text"]:focus {...}

input[type="password"]:focus {...}

input.button:focus {...}

</style>

 

Пожалуй, на сегодня все. До встречи вновь на страницах нашего журнала.

 

 

 

 

Журнал > Программирование > PHP и WEB для новичков (HTML, JavaScript, PHP, MySQL) > PHP и WEB для новичков: фишки для веб-страницы