От автора:
Большинство дизайнеров и сетевых разработчиков «схватывают» всего лишь верхушки такого эффективного языка, как CSS. Говоря словами программирования, CSS имеет довольно простую кривую обучения. Это не значит, что CSS не эффективный язык. Иногда гигантскую разницу в дизайне вебсайтов создают сущие мелочи.
В этом посте мы собираемся наметить в общих чертах 10 превосходных трюков CSS для тех веб-разработчиков, которые знают свое дело.
Для начинающих дизайнеров есть множество трюков CSS и хаков. Все знают такие общепринятые приемы, как:
скругленные углы
изображения в качестве маркеров списков
как придать стили клавишам ввода
Все эти простые приемы хороши и важны, но сегодня мы собираемся рассмотреть техники CSS, требующие немного больших усилий. Они не из тех заурядных методов, которым вы бы научили новичка в CSS. Эти 10 приемов слегка посложнее, но будучи хорошо исполненными, они могут добавить некую дополнительную изюминку разметке вашего вебсайта.
1. Фокус и размывание пунктов меню
Давайте начнем с техники, которая не является слишком передовой, просто для разминки. Фокус и размывание пунктов меню – это мощный способ привлечь внимание к текущему пункту. Эта техника разнится с традиционными ролловерами (прим перев. – rollovers — объектами, изменяющими свой вид при прохождении над ними курсора), потому что вместо изменения состояния элемента, над которым проводят мышью, она меняет не выбранные элементы.
В основе этого эффекта лежит простой ролловер, использующий изображение для каждой ссылки. Каждое изображение шириной 600px имеет 3 различных состояния: статическое, активное и состояние изменения вида.
Чтобы реализовать изменение вида, мы делаем каждую навигационную кнопку шириной в 200px, таким образом, чтобы когда над кнопкой проводят мышью, все остальные пункты навигации сместить на -200px, чтобы изменить их фоновое изображение. Это стильный эффект, совершенно отличный от большинства навигационных меню, основанных на ролловерах.
2. Пояснительные ролловеры меню
Иллюстрирующие разметки – последний писк веб-дизайна, и по хорошей причине. Красивое пояснение может сделать веб-страницу очень привлекательной. Иногда, тем не менее, пояснительные разметки имеют проблемы со временем показа анимации на страницах, так как большая часть дизайна основывается на изображениях. Можно использовать чуть-чуть CSS в навигации, для анимации иллюстраций.
На WebDesignerWall есть превосходный учебник, который не только показывает вам, как добавить анимации в навигацию, а также как создать полную навигационную систему в Photoshop’е. Окончательный продукт – это игровая, яркая навигационная система, делающая дизайн намного более живым и привлекательным. Наиболее сложная часть примера – это работа не с CSS, а подгонка в Photoshop’е, чтобы ролловеры выглядели связно.
3. Продвинутые настройки разметки текста в CSS
Типографской разметке текста в CSS иногда не придается значения. Однако вы можете сделать с текстом множество креативных вещей, просто добавив немного CSS. Например:
Отражения
Вы можете, не используя javascript, двигаться прямиком к CSS, чтобы сделать внутри текста отражения. Должен признать, они не выглядят так же элегантно, как в решениях javascript, но потенциально могут быть довольно милыми.
Сливающиеся заголовки
Вы можете создать красивые сливающиеся заголовки, используя маленькие межзнаковые интервалы для первой буквы внутри span. Примечание: фантастически при этом выглядят не все сочетания букв.
Сокращенные символы
Можете даже создать сокращенные буквы (видите “g”?), используя малую высоту и нижнюю рамку.
Множество других продвинутых текстовых техник CSS можно посмотреть в блоге 3.7Crea.tv.
4. Динамически выдвигающиеся столбцы в таблицах
Crazy Egg для своей страницы подписки создает невероятный интуитивный дизайн. Вместо того, чтобы заставить пользователя щелкать на другую страницу для начала процесса подписки, Crazy Egg пользуется CSS c небольшим количеством javascript’а, чтобы колонка таблицы аккуратно съезжала влево в то время, как форма для заполнения появлялась на месте других колонок. Очень удобно, если хотите, чтобы посетитель незамедлительно начал процесс подписки, и все это на крохотном пространстве.
В то время, как таблицы – это то, чего современные дизайнеры обычно стараются избежать, они могут быть идеальны для организации большого количества данных. Прайс-листы – отличное место для использования таблиц, а выполнение их в более интересном стиле, безусловно, помогает произвести на пользователя впечатление.
Спросите парня от CSS, у которого есть прекрасный учебник, тиражирующий код, дополненный действующим примером и легко скачиваемым источником.
5. Динамические переменные в CSS
В действительности, CSS сам по себе не очень мощный язык. Конечно, с его помощью можно выполнить тонны изящных приемов, но он всего лишь язык стилей. Вы не можете хранить переменные или делать прочие вещи, которые позволяют динамические языки вроде PHP. Тем не менее, можно использовать динамические языки для генерации CSS, имитируя динамические переменные.
Используя функцию header() в PHP, возможно формировать содержимое таблицы CSS на PHP. Мы можем пользоваться различными массивами, чтобы показать разные фрагменты стилей CSS. Например, вот цветовая схема по умолчанию в CSS, написанная в PHP:
|
1 2 3 4 5 6 7 |
$persistent = array( 'bgmast' => 'bbd9ee', 'fgmast' => '4d4d4d', 'bgmenu' => 'e7e4d3', 'fgmenu' => '444', 'bgcont' => 'fff', 'fgcont' => '444' ); |
А вот дополнительная цветовая схема:
|
1 2 3 4 5 6 7 8 |
$alternate1 = array( 'bgmast' => 'ddb', 'fgmast' => '000', 'bgmenu' => 'aa7', 'fgmenu' => 'fff', 'bgcont' => 'fff', 'fgcont' => '333' ); |
Если вы хотите показать дополнительную цветовую схему, вы просто переключаетесь между $persistent и $alternate1, чтобы переставить стили.
На Digital Web Magazine просмотрите весь учебник для более полного объяснения переключения динамических стилей при помощи CSS и PHP.
6. Оформление цитат при помощи CSS
Оформление цитат, выделенных в тексте веб-страницы – сложная дизайнерская техника, способная добавить вебсайту приятный элемент стиля. Многие журналы, электронные книги и прочие онлайн-публикации используют цитаты, чтобы выделить немного самого важного текста с тем, чтобы привлечь к нему взгляд читателя. Цитаты – чрезвычайно лакомые кусочки для взора читателя. Вот несколько способов, которыми дизайнер может оформить цитаты, выделенные в статье.
Вручную
Дизайнер может ручным способом сделать дополнительный div, что выглядит примерно так:
|
1 2 3 |
<div class="quote"> This is the quoted text, floated right with some padding. </div> |
со стилем, который выглядит так:
|
1 2 3 4 |
.quote { float:right; padding-left:15px; .... |
И множеством других стилей, которые могли понадобиться. Создание дополнительного div’а вручную – не самая выдающаяся идея, потому что занимает больше времени и добавляет избыточное содержимое.
Javascript
Вы могли бы также использовать javascript, чтобы оформить цитаты в тексте. Это устраняет избыточное содержимое и не требует жестко закодированного div’а, однако вам все еще понадобится включить немного javascript.
На Designmeme есть великолепный учебник о том, как оформлять цитаты, используя всего лишь немного CSS и CSS 2: перед псевдоэлементом, чтобы показать цитату.
|
1 2 |
<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’ </p> |
Вот класс pullquote:
|
1 2 3 4 5 6 |
.pullquote { width:550px; line-height:1.5; font-size:1.2em; text-align:justify; } |
Вместе с псевдоклассом :before:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.pullquote:before { content:"201C" attr(title) "201D"; font-family: "Times New Roman", Times, serif; font-size:1.2em; text-align:center; background:#333; color:#fff; display:block; float:left; width:7em; margin: 0.25em 1em 0.5em 0; padding:1em; } |
Теперь каждый раз, когда у вас будет абзац с классом quote, любой текст, вставленный в атрибут title, появится в окне цитат (с изогнутыми кавычками).
7. Меняйте стили, основываясь на времени суток
Изменение облика своего вебсайта, основанное на времени суток, не только забавный метод добавить дизайну глубины, это также и способ произвести впечатление на пользователя. До сих пор существует два способа выполнить это при помощи CSS: с javascript или PHP (или любым другим динамическим языком).
Оба подхода, по существу, с небольшой разницей выполняют одну и ту же вещь. Применяя javascript, можно пользоваться временем посетителя для отображения подходящей таблицы стилей (Если хотите пользоваться временем своего сервера, используйте версию PHP).
Вот код javascript с katgal, который изменяет таблицу стилей каждые 3-4 часа, основываясь на времени пользователя.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script language="JavaScript"> <!-- Begin function getCSS() { datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour > 20) display = "tree_twilight.css"; else if (thehour > 17) display = "tree_sunset.css"; else if (thehour > 14) display = "tree_afternoon.css"; else if (thehour > 11) display = "tree_noon.css"; else if (thehour > 7) display = "tree_morning.css"; else if (thehour > 4) display = "tree_sunrise.css"; else if (thehour > 1) display = "tree_twilight.css"; else display = "tree_sunset.css"; var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>'; document.write(css); // End --> } </script> <script language="javascript">getCSS();</script><link rel="stylesheet" href="tree_noon.css"> <noscript> <link rel="stylesheet" href="tree_sunset.css" type="text/css"> </noscript> |
Применяя этот метод, можно показывать разные таблицы стилей
С 5 утра до 8 утра
С 8 утра до 12 дня
С 12 дня до 15 дня
С 15 дня до 18 вечера
С 18 вечера до 21 вечера
С 21 вечера до 5 утра
8. Меняйте стили CSS, основываясь на погоде
Изменение облика вебсайта, основанное на времени суток – это цветочки по сравнению с возможностью менять сайт на основе погоды. На CSS-Tricks есть удивительный учебник, который демонстрирует, как оформить дизайн, опираясь на текущие погодные условия, взятые с Yahoo! Weather.
Используя немного инструментария CSS и PHP, учебник показывает, как переключать классы разметки, опираясь на погоду. Просто создайте стиль (пример показывает изображение заголовка), который находится в соответствии с подходящими погодными условиями. Используется таблица стилей вроде этой:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.header { width: 782px; height: 150px; /* DEFAULTS TO SUNNY */ background: url(images/header-sunny.png) no-repeat center center black; } .header-rain { background: url(images/header-rain.png) no-repeat center center black; } header-snow { background: url(images/header-snow.png) no-repeat center center black; } .header-sunny, .header-fair { background: url(images/header-sunny.png) no-repeat center center black; } .header-partly-cloudy, .header-cloudy, .header-mostly-cloudy { background: url(images/header-partlycloudy.png) no-repeat center center black; } |
…и извлекает погодные условия через PHP/XML. Этот фрагмент кода на PHP употребляется в разметке для показа подходящего класса, соответствующего погоде:
|
1 2 |
<div class="header header-<?php echo $weather_class; ?>"> </div> |
9. Идеальная постраничная печать с CSS
Отсутствие ссылки «распечатать эту статью» — упущение этого вебсайта. В числе пользователей Интернета есть множество людей, которым до сих пор нравится распечатывать полезные статьи и хранить их в бумажном виде. Чтобы справиться с этой задачей, вам придется использовать возможности разрыва страниц на CSS/XHTML.
У Дэвида Уолша (David Walsh) есть прекрасный код, демонстрирующий CSS, позволяющий сделать эффективные разрывы страниц при постраничной печати:
|
1 2 3 4 5 6 7 8 9 |
@media all { .page-break { display:none; } } @media print { .page-break { display:block; page-break-before:always; } } |
Далее, чтобы воспользоваться кодом, просто добавляйте <div class=»page-break»></div> всякий раз, когда вам нужно разорвать страницу, как здесь:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>Page Title</h1> <!-- content block --> <!-- content block --> <div class="page-break"></div> <!-- content block --> <!-- content block --> <div class="page-break"></div> <!-- content block --> <!-- content --> |
Также Дэвид дает несколько отличных примеров мест на странице, куда следует добавлять принудительные разрывы страниц при печати.
Между параграфами (тэгами h2 или h3, в зависимости от формата сайта)
Между концом статьи и последующими комментариями/отзывами пользователей
Между длинными блоками содержимого
10. Bar-диаграммы CSS
Bar-диаграммы придают хороший вид статистике, утомительной в другом исполнении. Apples to Oranges нашли способ аккуратно представлять Bar-диаграммы лишь одним CSS. Это – элегантное решение для вещи, которая иным способом либо перегружала бы код, либо была бы сделана на javascript.
Основная идея учебника состоит в том, чтобы создать такой класс, как .graph
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height: 2em; } .graph .bar span { position: absolute; left: 1em; } |
…и представить его на странице таким образом:
|
1 2 3 |
<div class="graph"> <strong class="bar" style="width: 24%;">24%</strong> </div> |
Единственным «подвижным» участком в примере является добавление стиля =”24%” к оператору <strong>. Любое процентное содержание будет верно показано соответствующей диаграммой. Просто и элегантно.
В блоге Apples to Oranges есть множество более сложных примеров создания Bar-диаграмм с CSS на случай, если вы почувствуете в себе стремление к деятельности.
На этом разбор 10 мощных трюков CSS, заканчиваем
Автор: Glen Stansberry
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (6)