http://sulfurzona.com/
News
Service
Magazine
Software (Battle City Game, Wallpaper manager, Superpad, VG-NOW, Puzzle Game, Netler Internet Browser, ..)
Dune Game (Dune III, Dune IV, Cheats, Forum, ..)
Games free
Turbo Pascal (Assembler, Docs, Sources, Debbugers, ..)
Books (Docs for developers)
Forum
Guest book
Компьютерная диагностика двигателя автомобиля (адаптер К-линии)Компьютерная диагностика двигателя автомобиля (адаптер К-линии)
 
 
 
 

PHP и WEB для новичков: фишки для веб-страницы

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

Тень для текста

 
В былые годы, чтобы реализовать на веб-странице тень для текста, приходилось попросту рисовать этот текст с тенью в обычное изображение. С появлением CSS делать это стало намного проще.
 
Для создания тени для текста воспользуемся стилевым свойством text-shadow, которое формирует тень, отбрасываемую тестом, а также устанавливает ее параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line. Формат следующий:
 
text-shadow: тень1, тень2, …
 
где тень может отсутствовать (значение none) или содержать перечисленные через пробел параметры: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>.
Первый обязательный параметр – смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное – влево.
 
Второй обязательный параметр – смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста.
 
Третий и необязательный параметр задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан (пропущен), то по умолчанию устанавливается равным 0. Следует учитывать, что алгоритмы сглаживания в браузерах отличаются, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
 
Цвет тени можно указывать в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Это необязательный параметр.
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 1
 
Давайте попробуем сделать простенькую четкую тень. 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 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 2
 
А давайте проявим немного фантазии и сделаем небольшую белую обводку вокруг текста, конечно, путем создания белой тени, и добавим вторую размытую тень синего цвета:
 
<div style="…text-shadow: 1px 1px 0 #FFF, 2px 2px 2px #00f">ЗАГОЛОВОК 3</div>
 
У нас получился (рис. 3) еще один элегантный стиль заголовка ;) Так можно играться с тенью сколь угодно, накладывая несколько теней к одному и тому же тексту, и получая разнообразные эффекты. Нужно лишь подключить фантазию.
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 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 (о нем пойдет речь ниже), то тень также получится с закругленными уголками. Следует учитывать, что добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере. Формат свойства такой:
 
box-shadow: тень1, тень2,…
 
где тень может отсутствовать (значение none) или содержать перечисленные через пробел параметры: inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>.
 
Первый необязательный параметр может иметь значение inset, что заставит тень выводиться внутри элемента.
Второй обязательный параметр – смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное – влево.
 
Далее обязательный параметр – смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное – вверх.
Следующий необязательный параметр задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
 
За ним следует необязательный параметр, положительное значение которого растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
Замыкает необязательный параметр цвета тени. По умолчанию тень черная.
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 4
 
Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке – в самом низу. Например (рис. 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, которое устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. Формат:
 
border-radius: радиус1 радиус2 …
 
Допускается указывать одно, два, три или четыре значения, перечисляя их через пробел (таблица 1). Также допустимо писать два значения через слэш “/”. В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
 
Таблица 1. Зависимость от числа значений
Число значений
Результат
1
Радиус указывается для всех четырех уголков.
2
Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение – верхнего правого и нижнего левого уголка.
3
Первое значение задает радиус для верхнего левого уголка, второе – одновременно для верхнего правого и нижнего левого, а третье – для нижнего правого уголка.
4
По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 5
 
В следующем примере представлены несколько вариантов указания параметров:
 
<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).
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 6
 
 

Выразительный фокус

 
Часто на сайтах используются формы для отправки какой-то информации автору сайта. Но все поля формы обычно какие-то безжизненные что ли.
 
PHP и WEB для новичков: фишки для веб-страницы
Рис. 7
 
Чтобы оживить форму, предлагаю объявить стиль для ее элементов, которые будут менять свой вид при получении фокуса, т.е. при клике на них. Тем самым, давая понять пользователю, что ввод будет осуществляться именно в это поле (рис. 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>
 
Пожалуй, на сегодня все. До встречи вновь на страницах нашего журнала.
 
© Владислав Демьянишин
 
 
Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.
 
Среди доступных программ есть мобильная читалка книг, менеджер переноса файлов с фото- и видеокамер на компьютер, текстовый редактор, WYSIWYG редактор, 3D аниматор, GIF аниматор, AVI аниматор, пакетный конвертор изображений, редактор электрических схем, программа для скриншотов, диспетчер тем рабочего стола и другие.
 
На нашем сайте можно не только бесплатно скачать игры, но и документацию и книги по программированию на MIDLetPascal, Turbo Pascal 6, Turbo Pascal 7, Borland Pascal, по программированию устройств Sound Blaster, Adlib, VESA BIOS, справочник Norton Guide и много другой полезной информации для программистов, включая примеры решения реальных задач по созданию резидентных программ. Предлагаю также посетить Марья искусница - сайт о рукоделии (http://mariya-iskusnica.ru).
 
 

Журнал > Программирование > PHP и WEB для новичков (HTML, JavaScript, PHP, MySQL) > PHP и WEB для новичков: фишки для веб-страницы
 
 
 
39
 
 
 
На главную страницу На предыдущую страницу На начало страницы
 
 
Рейтинг@Mail.ru Рейтинг Сайтов YandeG