10 потужних трюків CSS

17

Від автора:

Більшість дизайнерів і мережевих розробників «схоплюють» всього лише верхівки такого ефективного мови, як CSS. Говорячи словами програмування, CSS має досить просту криву навчання. Це не означає, що CSS не ефективний мову. Іноді гігантську різницю в дизайні веб-сайтів створюють сущі дрібниці.

У цьому пості ми збираємося окреслити в загальних рисах 10 чудових трюків CSS для веб-розробників, які знають свою справу.

Для початківців дизайнерів є безліч трюків CSS і хаків. Всі знають такі загальноприйняті прийоми, як:

округлені кути

зображення в якості маркерів списків

як надати стилі клавіші вводу

Всі ці прості прийоми хороші і важливі, але сьогодні ми збираємося розглянути техніки CSS, вимагають трохи більших зусиль. Вони не з тих пересічних методів, якими би ви навчили новачка в CSS. Ці 10 прийомів трохи складніше, але будучи добре виконаними, вони можуть додати деяку додаткову родзинку розмітці вашого вебсайту.

1. Фокус і розмивання пунктів меню

10 потужних трюків CSS

Давайте почнемо з техніки, яка не є надто передовій, просто для розминки. Фокус і розмивання пунктів меню – це потужний спосіб привернути увагу до поточного пункту. Ця техніка відрізняється з традиційними ролловерами (прим перекл. – rollovers — об’єктами, змінюють свій вигляд при проходженні над ними вказівника), тому що замість зміни стану елемента, над яким проводять мишею, вона змінює не вибрані елементи.

В основі цього ефекту лежить простий ролловер, який використовує зображення для кожного посилання. Кожне зображення шириною 600px має 3 різних стани: статичний, активне і стан зміни виду.

10 потужних трюків CSS

Щоб реалізувати зміна виду, ми робимо кожну навігаційну кнопку шириною в 200px, таким чином, щоб коли над кнопкою проводять мишею, всі інші пункти навігації змістити на -200px, щоб змінити фонове зображення. Це стильний ефект, абсолютно відмінний від більшості навігаційних меню, заснованих на ролловерах.

Демо-результат

Переглянути вихідний код

2. Пояснювальні ролловер меню

Ілюструють розмітки – останній писк веб-дизайну, і за гарною причини. Гарне пояснення може зробити веб-сторінку дуже привабливою. Іноді, тим не менш, пояснювальні розмітки мають проблеми з часом показу анімації на сторінках, так як більша частина дизайну ґрунтується на зображеннях. Можна використовувати трохи CSS в навігації, для анімації ілюстрацій.

10 потужних трюків CSS

На WebDesignerWall є чудовий підручник, який не тільки показує вам, як додати анімації в навігацію, а також як створити повну навігаційну систему в Photoshop е. Остаточний продукт – це ігрова, яскрава навігаційна система, яка робить дизайн набагато більш живим і привабливим. Найбільш складна частина прикладу – це робота не з CSS, а підгонка в photoshop’е, щоб ролловер виглядали зв’язно.

Демо-результат

Переглянути вихідний код

3. Просунуті налаштування розмітки тексту в CSS

Друкарською розмітки тексту в CSS іноді не надається значення. Однак ви можете зробити з текстом безліч креативних речей, просто додавши трохи CSS. Наприклад:

Відображення

10 потужних трюків CSS

Ви можете, не використовуючи javascript, рухатися прямо до CSS, щоб зробити всередині тексту відображення. Мушу визнати, вони не виглядають так само елегантно, як у рішеннях javascript, але потенційно можуть бути досить милими.

Зливаються заголовки
10 потужних трюків CSS

Ви можете створити красиві зливаються заголовки, використовуючи маленькі інтервали між знакові для першої літери всередині span. Примітка: фантастично при цьому виглядають не всі поєднання букв.

Скорочені символи
10 потужних трюків CSS

Можете навіть створити скорочені букви (бачите «g»?), використовуючи малу висоту і нижню рамку.

Безліч інших просунутих текстових технік CSS можна подивитися в блозі 3.7Crea.tv.

Демо-результат

4. Динамічно висуваються стовпців в таблицях

10 потужних трюків CSS

Crazy Egg для своєї сторінки підписки створює неймовірний інтуїтивний дизайн. Замість того, щоб змусити користувача клацати на іншу сторінку для початку процесу підписки, Crazy Egg користується CSS c невеликою кількістю javascript’а, щоб колонка таблиці акуратно з’їжджала вліво в той час, як форма для заповнення з’являлася на місці інших колонок. Дуже зручно, якщо хочете, щоб відвідувач негайно почав процес підписки, і все це на крихітному просторі.

В той час, як таблиці – це те, чого сучасні дизайнери зазвичай намагаються уникнути, вони можуть бути ідеальні для організації великої кількості даних. Прайс-листи – відмінне місце для використання таблиць, а виконання їх у більш цікавому стилі, безумовно, допомагає справити враження користувача.

Запитайте хлопця від CSS, у якого є прекрасний підручник, тиражирующий код, доповнений чинним прикладом і легко скачуваним джерелом.

Демо-результат

Переглянути вихідний код

5. Динамічні змінні в CSS

10 потужних трюків CSS

Насправді, CSS сам по собі не дуже потужний мову. Звичайно, з його допомогою можна виконати тонни витончених прийомів, але він всього лише мова стилів. Ви не можете зберігати змінні або робити інші речі, які дозволяють динамічні мови начебто PHP. Тим не менш, можна використовувати динамічні мови для генерації CSS, імітуючи динамічні змінні.

Використовуючи функцію header() в PHP, можливо формувати вміст таблиці CSS на PHP. Ми можемо користуватися різними масивами, щоб показати різні фрагменти стилів CSS. Наприклад, ось колірна схема за замовчуванням в CSS, написана на PHP:

$persistent = array(
‘bgmast’ => ‘bbd9ee’,
‘fgmast’ => ‘4d4d4d’,
‘bgmenu’ => ‘e7e4d3’,
‘fgmenu’ => ‘444’,
‘bgcont’ => ‘fff’,
‘fgcont’ => ‘444’ );

А ось додаткова колірна схема:

$alternate1 = array(
‘bgmast’ => ‘ddb’,
‘fgmast’ => ‘000’,
‘bgmenu’ => ‘aa7’,
‘fgmenu’ => ‘fff’,
‘bgcont’ => ‘fff’,
‘fgcont’ => ‘333’
);

Якщо ви хочете показати додаткову колірну схему, ви просто переключаєтеся між $persistent і $alternate1, щоб переставити стилі.

На Digital Web Magazine перегляньте весь підручник для більш повного пояснення перемикання динамічних стилів за допомогою CSS і PHP.

Демо-результат

Переглянути вихідний код

6. Оформлення цитат за допомогою CSS

10 потужних трюків CSS

Оформлення цитат, виділених у тексті веб-сторінки – складна дизайнерська техніка, здатна додати сайт приємний елемент стилю. Багато журнали, електронні книги та інші онлайн-публікації використовують цитати, щоб виділити трохи самого важливого тексту з тим, щоб залучити до нього погляд читача. Цитати – надзвичайно ласі шматочки для погляду читача. Ось кілька способів, якими дизайнер може оформити цитати, виділені в статті.

Вручну

Дизайнер може ручним способом зробити додатковий div, що виглядає приблизно так:

This is the quoted text, floated right with some padding.

зі стилем, який виглядає так:

.quote {
float:right;
padding-left:15px;
….

І безліччю інших стилів, які могли знадобитися. Створення додаткового div а вручну – не найвидатніша ідея, тому що займає більше часу і додає надлишковий вміст.

Javascript

Ви могли б також використовувати javascript, щоб оформити цитати в тексті. Це усуває надмірне вміст і не вимагає жорстко закодованого div а, однак вам все ще знадобиться включити трохи javascript.

На Designmeme є чудовий підручник про те, як оформляти цитати, використовуючи всього лише трохи CSS і CSS 2: перед псевдоэлементом, щоб показати цитату.

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.’

Ось клас pullquote:

.pullquote {
width:550px;
line-height:1.5;
font-size:1.2 em;
text-align:justify;
}

Разом з псевдоклассом :before:

.pullquote:before {
content:»201C» attr(title) «201D»;
font-family: «Times New Roman’, Times, serif;
font-size:1.2 em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25 em 1em 0.5 em 0;
padding:1em;
}

Тепер кожен раз, коли у вас буде абзац з класом quote, будь-який текст, який вставляється в атрибут title, з’явиться у вікні цитат (з вигнутими лапками).

7. Міняйте стилі, грунтуючись на час доби

Зміна вигляду свого вебсайту, засноване на час доби, не тільки кумедний метод додати дизайну глибини, це також і спосіб справити враження на користувача. До цих пір існує два способи зробити це за допомогою CSS: з javascript або PHP (або будь-яким іншим динамічним мовою).

Обидва підходу, по суті, з невеликою різницею виконують одну і ту ж річ. Застосовуючи javascript, можна користуватися часом відвідувача для відображення відповідної таблиці стилів (Якщо хочете користуватися часом свого сервера, використовуйте версію PHP).

Ось код javascript з katgal, який змінює таблицю стилів кожні 3-4 години, грунтуючись на часі користувача.

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 = «;
document.write(css);
// End —>
}
getCSS();

Застосовуючи цей метод, можна показувати різні таблиці стилів

З 5 ранку до 8 ранку

З 8 ранку до 12 дня

З 12 дня до 15 дня

З 15 до 18 вечора

З 18 години вечора до 21 вечора

З 21 вечора до 5 ранку

8. Міняйте стилі CSS, грунтуючись на погоди

10 потужних трюків CSS

Зміна вигляду вебсайту, засноване на час доби – це квіточки порівняно з можливістю змінювати сайт на основі погоди. На CSS-Tricks є дивовижний підручник, який демонструє, як оформити дизайн, спираючись на поточні погодні умови, взяті з Yahoo! Weather.

Використовуючи трохи інструментарію CSS і PHP, підручник показує, як перемикати класи розмітки, спираючись на погоду. Просто створіть стиль (приклад показує зображення заголовка), який знаходиться у відповідності з відповідними погодними умовами. Використовується таблиця стилів зразок цієї:

.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 вживається в розмітці для показу відповідного класу, що відповідає погоді:

Демо-результат

Переглянути вихідний код

9. Ідеальна посторінкова друк з CSS

10 потужних трюків CSS

Відсутність посилання «роздрукувати цю статтю» — упущення цього вебсайту. Серед користувачів Інтернету є безліч людей, яким досі подобається роздруковувати корисні статті і зберігати їх в паперовому вигляді. Щоб справитися з цим завданням, вам доведеться використовувати можливості розриву сторінок CSS/XHTML.

У Девіда Уолша (David Walsh) є прекрасний код, що демонструє CSS, дозволяє зробити ефективні розриви сторінок при посторінкового друку:

@all media
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}

Далі, щоб скористатися кодом, просто додайте

всякий раз, коли вам потрібно розірвати сторінку, як тут:

Page Title

Також Девід дає кілька відмінних прикладів місць на сторінці, куди слід додавати примусові розриви сторінок при друку.

Між параграфами (тегами h2 або h3, в залежності від формату сайту)

Між кінцем статті та подальшими коментарями/відгуками користувачів

Між довгими блоками вмісту

10. Bar-діаграми CSS

10 потужних трюків CSS

Bar-діаграми надають гарний вигляд статистикою, виснажливої в іншому виконанні. To Apples Oranges знайшли спосіб акуратно представляти Bar-діаграми лише одним CSS. Це елегантне рішення для речі, яка іншим способом або перевантажувала код, або була б зроблена на javascript.

Основна ідея підручника полягає в тому, щоб створити такий клас, як .graph

.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; }

…і представити його на сторінці таким чином:

24%

Єдиним «рухомим» ділянкою у прикладі є додавання стилю =»24%» до оператора . Будь-процентний вміст буде вірно показано відповідною діаграмою. Просто та елегантно.

В блозі to Apples Oranges є безліч більш складних прикладів створення Bar-діаграм з CSS на випадок, якщо ви відчуєте в собі прагнення до діяльності.

На цьому розбір 10 потужних трюків CSS, закінчуємо

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.