Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Применение на практике

Применение на практике

Теперь, когда мы изучили все доступные селекторы CSS и новые типы кодирования цветов, можно начать стилизацию. В оставшейся части этой главы мы стилизуем небольшой фрагмент первой страницы HTML5 Herald; это даст нам возможность рассказать о скругленных углах, тенях под текстом и под блоками.

На правой боковой панели первой полосы HTML5 Herald вы видите ряд причудливых рекламных объявлений — в главе 2 мы разметили их в элементах article внутри элементов aside. Первый — старомодный плакат «Разыскиваются», предупреждающий о вооруженных и очень опасных HTML5 и CSS3. Его внешний вид показан на рис. 6.1.

Применение на практике

Рис. 6.1. Объявление «Разыскиваются»

Обратите внимание на большой серый прямоугольник в центре: у него двойной бордюр со скругленными углами, который слегка «выпрыгивает» при наведении мыши. От букв «<HTML5> & (CSS3}» на фоновый цвет падает тень. Благодаря CSS3, все эти эффекты достигаются написанием небольшого простого кода без каких либо сценариев JavaScript или растровых изображений. Вот как это делается. Разметка для прямоугольника — просто <a href ="…">&lt; HTML5&gt; &amp; (CSS3) </а>. Ничего, кроме элементов HTML, — и это работает!

Прежде чем стилизовать этот объект, мы должны его указать. Конечно, можно просто добавить атрибут class, но что это за удовольствие? Раз уж мы узнали разные новые селекторы CSS3, грех не попробовать применить их на практике.

Наш прямоугольник, возможно, и не единственный на странице, но он, должно быть, единственный следует сразу после абзаца в элементе aside. Этого нам достаточно. Мы знаем кое-какие основы стилизации CSS3, так давайте их применим:

Применение на практике

Применение на практике

Неплохо! Как видно на рис. 6.2, мы на верном пути. В таком именно виде все будет показано в браузерах IE до 8 версии включительно, за исключением шрифта.

Применение на практике

Рис. 6.2. Рекламное объявление в том виде, в котором его отобразят старые браузеры

Помните, что в IE6 отсутствует поддержка селектора сестринских элементов — так что если требуется обеспечить работу именно с этим браузером, нужно использовать привычный селектор id или class. Выглядит неплохо, вполне приемлемо — а добиться, чтобы все было совершенно одинаково во всех браузерах, все равно не получится. Пользователи со старой версией IE вряд ли догадаются, что у них чего-то не хватает. Но мы должны приложить еще усилия, чтобы в более новых браузерах все выглядело лучше. Не будем останавливаться и добавим немного глянца.


Читайте так же:
Not found

Нам доверяют

Интернет магазин