От автора: я снова приветствую вас на страницах нашего блога webformyself. Язык css создан для оформления и сегодня я бы хотел коротко пробежаться по способам стилизации основных структурных элементов.
Css оформление – каковы его возможности
Чтобы не лить воду скажу сразу – эта веб-технология дает вам практически безграничные возможности в плане настройки дизайна для вашего шаблона. Только вот вопрос, как в css оформить то-то или то-то, немного некорректен, на мой взгляд, потому что это можно сделать миллионом способов, так что не хватило бы бумаги на всей нашей планете, чтобы описать все возможные комбинации.
Ну да ладно, это немного теории, основные фишки при работе с элементами в css я все-таки предлагаю рассмотреть.
Списки
Как сделать оформление списков в css? Начнем именно с них. Вас ничего не бесит в их отображении по умолчанию? Я сейчас имею ввиду маркированные списки. О да, конечно же этот самый маркер. Я не хочу говорить о нем плохо, но он немного убог и очень прост. И даже учитывая, что css предлагает нам возможность выбрать из трех разных видов, я все же рекомендую вам создать свой собственный маркер для списков на вашем сайте.
Я не буду рассказывать вам, где найти картинку для маркера, тут уже разберетесь как-нибудь. Это должна быть небольшая png-картиночка, которая будет выводиться перед каждым пунктом списка. Самое простое – создаем в графическом редакторе кружочек и заливаем его градиентом, который по дизайну подходит к вашему сайту. Далее нужно нашу картинку положить в папку с сайтом и написать в таблице стилей:
|
1 2 3 |
ul{ list-style: circle url(marker.png) } |
Поскольку маркированный список создается в html тегом ul, то именно к нему мы обращаемся через css. Для списков есть специальное свойство list-style. В нем мы сначала записываем маркер по умолчанию, на случай если наше изображение исчезнет куда-то. Circle означает черный закрашенный кружочек. Также можно выбрать disk (незакрашенный круг) и square – квадрат.
Вторым значением мы записываем путь к нашей картинке-маркеру, поставив перед ним ключевое слово – url. Вот и все. При желании вы вообще можете убрать маркер у нужных вам списков, определив для них такое правило – list-style: none.
Как оформить меню в css
Наиболее часто люди хотят оформить именно меню. Это вообще один из главных элементов на сайте. Давайте на нем остановимся подробнее. Создадим меню из четырех пунктов. Конечная цель – сделать красивую навигацию в одну горизонтальную полосу. Разметка:
|
1 2 3 4 5 6 7 8 |
<nav> <ul> <li><a href = "">Пункт 1</a></li> <li><a href = "">Пункт 2</a></li> <li><a href = "">Пункт 3</a></li> <li><a href = "">Пункт 4</a></li> </ul> </nav> |
Пока в браузере это просто четыре строчки, идущие сверху вниз. Надо исправлять. Первым делом уберем маркеры у списка.
|
1 2 3 |
ul{ list-style: none; } |
Далее все пункты списка нужно сделать в одну линию, можно реализовать это, если всем задать float: left.
|
1 2 3 |
ul li{ float: left; } |
Все пункты стали в ряд, но пока они стоят впритык друг к другу. Самое время добавить оформления. Запишем такие стили для ссылок:
|
1 2 3 4 5 6 |
ul li a{ display: block; padding: 20px; background: #253C6F; color: white } |
Во-первых, мы преобразовали ссылку в блочные элементы, чтобы иметь возможность задавать им нормально внутренние отступы. Далее я также записал цвет фона. Как вам синий? Я обожаю синий. Ну и наконец, нужно подобрать цвет текста. На синем хорошо читается белый, поэтому он и был выбран.
Вот наше меню уже готово и неплохо выглядит. Не помешало бы ему добавить немного поведения, чтобы пи наведении на какой-то пункт его внешний вид менялся.
|
1 2 3 4 |
ul li a:hover{ text-decoration: none; color: yellow } |
Тут мы использовали псевдокласс hover. Кто не знает, он определяет стиль для элементов, на которые наведен курсор. Так мы определили, что при наведении у пунктов списка исчезает подчеркивание и цвет ссылки становится желтым. Попробуйте протестировать результат нашей работы. Ну и чем не меню? На любом сайте с удовольствием пользовался бы таким.
Конечно, это просто пример того, как можно оформлять меню. Как я уже и говорил, у вас миллионы возможностей в этом направлении, просто изучайте css и открывайте большие возможности этой технологии.
Кнопки
Ну а как оформить кнопки в css? Принципы те же, можно просто использовать немного другие свойства. Давайте тоже для примера создадим кнопку и посмотрим, что с ней можно сделать.
|
1 |
<input type = "button" value = "Кнопка" name = "button"> |
Так, появилась кнопочка, но пока она оформлена стандартно. Во-первых, я предлагаю ее раскрасить. Для этого можно использовать сплошной цвет, а можно что-то и поинтересней – градиент.
Градиент вручную рекомендую не писать, а воспользоваться отличным генератором. Скопируйте эту ссылку в адресную строку браузера и вы попадете в него: //www.colorzilla.com/gradient-editor/.
Отлично, теперь выбираете любой понравившийся градиент и копируйте его код. Можно скопировать только тот, который соответствует стандартам W3C (там в комментариях к нему указано будет). Теперь пишем в стилях:
|
1 2 3 |
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. Также для примера я добавил следующие стили кнопке:
|
1 2 3 4 5 6 7 8 |
width: 150px; height: 67px; border-radius: 5px/20px; border: 2px solid purple; color: black; font-size: 36px; text-shadow: 0 0 5px white; cursor: pointer; |
Стилей много, но если вы разбираетесь в css, то все предельно понятно. Сначала задаем общие размеры кнопки, скругление углов (это модно), рамку, цвет текста в кнопке, его размер и тень, а также вид курсора. И вот такая милая кнопочка у нас получилась:
Конечно, она ничего не делает, но мы ведь разбираем оформление элементов, верно? А оформить в css можно любой элемент, причем очень красиво, так что использование графических элементов на сайте сегодня становится не таким обязательным условием для его красоты.
Заголовки
Оформление заголовков в css заключается в основном в использовании нестандартных шрифтов, теней и выравнивания. Как правило, этого достаточно для создания уникальных красивых заголовков на сайте, хотя иногда достаточно просто задать им свой, отдельный цвет, и немного оформить (сделать жирное начертание, небольшую тень, если это уместно). При этом можно обойтись стандартными шрифтами.
Итог
Мы с вами рассмотрели всего лишь несколько способов оформления для нескольких групп элементов. Ваша фантазия может подсказать вам тысячи других вариантов. Так, собственно, и создаются уникальные шаблоны для сайтов. Подписывайтесь на блог, а если хотите владеть CSS на продвинутом уровне через короткое время, то обязательно подписывайтесь на наш премиум раздел, где есть классный курс по CSS3, который научит вас пользоваться новейшими приемами для оформления.
