Оформлення в css

26

Від автора: я ще раз вітаю вас на сторінках нашого блогу webformyself. Мова css створений для оформлення і сьогодні я б хотів коротко пробігтися по способам стилізації основних структурних елементів.

Css оформлення – які його можливості

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

Ну да ладно, це трохи теорії, основні фішки при роботі з елементами css я все-таки пропоную розглянути.

Списки

Як зробити оформлення списків в css? Почнемо саме з них. Вас нічого не бісить в їх відображення за замовчуванням? Я зараз маю на увазі марковані списки. О так, звичайно ж цей самий маркер. Я не хочу говорити про нього погано, але він трохи вбогий і дуже простий. І навіть враховуючи, що css пропонує нам можливість вибрати з трьох різних видів, я все ж рекомендую вам створити свій власний маркер для списків на вашому сайті.

Я не буду розповідати вам, де знайти картинку для маркера, тут вже розберетеся як-небудь. Це повинна бути невелика png-картиночка, яка буде виводитися перед кожним пунктом списку. Найпростіше – створюємо в графічному редакторі кружечок і заливаємо його градієнтом, який підходить по дизайну до вашого сайту. Далі потрібно нашу картинку покласти в папку з сайтом і написати в таблиці стилів:

ul{
list-style: circle url(marker.png)
}

Оскільки маркірований список створюється в html тегом ul, то саме до нього ми звертаємося через css. Для списків є спеціальна властивість list-style. В ньому ми спочатку записуємо маркер за замовчуванням, на випадок якщо наше зображення зникне кудись. Circle означає чорний зафарбоване коло. Також можна вибрати disk (одне з кіл, розташованих коло) та square – квадрат.

Другим значенням ми записуємо шлях до нашої картинці-маркер, поставивши перед ним ключове слово – url. От і все. При бажанні ви можете прибрати маркер у потрібних вам списків, визначивши для них таке правило – list-style: none.

Як оформити меню css

Найбільш часто люди хочуть оформити саме меню. Це взагалі один з головних елементів на сайті. Давайте на ньому зупинимося докладніше. Створимо меню з чотирьох пунктів. Кінцева мета – зробити гарну навігацію в одну горизонтальну смугу. Розмітка:

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4

Оформлення в css

Поки в браузері це просто чотири рядки, що йдуть зверху вниз. Треба виправляти. Першим ділом приберемо маркери у списку.

ul{
list-style: none;
}

Далі всі пункти списку потрібно зробити в одну лінію, можна реалізувати це, якщо всім задати float: left.

ul li{
float: left;
}

Всі пункти стали в ряд, але поки вони стоять впритул один до одного. Саме час додати оформлення. Запишемо такі стилі для посилань:

ul li a{
display: block;
padding: 20px;
background: #253C6F;
color: white
}

По-перше, ми перетворили посилання в блокові елементи, щоб мати можливість задавати їм нормально внутрішні відступи. Далі я також записав колір фону. Як вам синій? Я обожнюю синій. Ну і нарешті, потрібно підібрати колір тексту. На синьому добре читається білий, тому він і був обраний.

Оформлення в css

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

ul li a:hover{
text-decoration: none;
color: yellow
}

Тут ми використовували псевдоклас: hover. Хто не знає, він визначає стиль для елементів, на які наведено курсор. Так ми визначили, що при наведенні пунктів у списку зникає підкреслення та колір посилання стає жовтим. Спробуйте протестувати результат нашої роботи. Ну і чим не меню? На будь-якому сайті з задоволенням користувався б такою.

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

Кнопки

Ну а як оформити кнопки в css? Принципи ті ж, можна просто використовувати дещо інші властивості. Давайте для прикладу створимо кнопку і подивимося, що з нею можна зробити.

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

Градієнт вручну рекомендую не писати, а скористатися відмінним генератором. Скопіюйте це посилання в адресний рядок браузера і ви потрапите в нього: http://www.colorzilla.com/gradient-editor/.

Оформлення в css

Чудово, тепер вибираєте будь-який вподобаний градієнт і копіюйте його код. Можна скопіювати тільки той, який відповідає стандартам W3C (там в коментарях до нього зазначено буде). Тепер пишемо в стилях:

input[type=»button»]{
background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
}

Ну це той градієнт, який я вибрав. У вас код може відрізнятися. Також зауважте, що ми використовували так званий селектор атрибутів, щоб звернутися до всіх елементів input типу button. Також для прикладу я додав наступні стилі кнопку:

width: 150px;
height: 67px;
border-radius: 5px/20px;
border: 2px solid red;
color: black;
font-size: 36px;
text-shadow: 0 0 5px white;
cursor: pointer;

Стилів багато, але якщо ви розбираєтеся в css, то все гранично зрозуміло. Спочатку задаємо загальні розміри кнопки, скруглення кутів (це модно), рамку, колір тексту на кнопці, його розмір і тінь, а також вид курсору. І ось така мила кнопочка у нас вийшло:

Оформлення в css

Звичайно, вона нічого не робить, але ми розбираємо оформлення елементів, вірно? А оформити в css можна будь-який елемент, причому дуже красиво, так що використання графічних елементів на сайті сьогодні стає не таким обов’язковою умовою для його краси.

Заголовки

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

Підсумок

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