Веб-дизайн за пять минут
Предположим, у вас есть продукт, портфолио или просто идея, которой вы хотите поделиться на своем сайте. Прежде чем опубликовать что-либо в Интернете, вы хотите сделать это привлекательным, профессиональным или, по крайней мере, достойным внимания.
Что необходимо для этого сделать?
Содержание
Целью дизайна является улучшение представления контента, к которому он применяется. Это может показаться очевидным, но контент, являющийся основным элементом сайта, не должен быть отодвинут на второй план.
Написанный контент, как и пункт, который вы сейчас читаете, составляет более 90% веб-страницы. Стилизация этого текстового контента будет иметь большое значение.
Предположим, вы уже доработали контент, который хотите опубликовать, и просто создали пустой файл style.css, каково первое CSS-правило, которое вы можете написать?
Центрирование
Длинные строки текста могут быть трудными для восприятия, следовательно, их сложно будет читать. Установка лимита символов на строку значительно повышает читаемость и привлекательность текста.
После стилизации текстовых блоков, как насчет стилизации самого текста?
body
{
margin: 0 auto;
max-width: 50em;
}
Семейство шрифтов
По умолчанию шрифт браузера имеет значение «Times», которое может выглядеть некрасивым. Переход на шрифт без засечек, таких как «Helvetica» или «Arial», может значительно улучшить внешний вид вашей страницы.
body
{
font-family: "Helvetica", "Arial", sans-serif;
}
Если же вы хотите придерживаться шрифта с засечками, попробуйте «Georgia».
Хотя текст становится более привлекательным, давайте сделаем его более читаемым.
Межстрочный интервал
Когда страница выглядит «сломанной» для пользователя, это обычно проблема с интервалом. Предоставление места внутри контента может увеличить привлекательность страницы.
body
{
line-height: 1.5;
padding: 4em 1em;
}
h2
{
margin-top: 1em;
padding-top: 1em;
}
Давайте применим более тонкие изменения.
Цвет и контраст
Черный текст на белом фоне может быть излишне строгими. Выбор более мягкого оттенка черного для основного текста делает страницу более удобной для чтения.
body
{
color: #555;
}
И чтобы сохранить нужный уровень контрастности, давайте выберем более темный оттенок для важных слов
h1,
h2,
b {
color: #333;
}
Хотя большая часть страницы была улучшена визуально, некоторые элементы (например, фрагменты кода) все еще кажутся неуместными.
Баланс
Для исправления баланса страницы требуется несколько дополнительных касаний:
code,
pre
{
background: #eee;
}
code
{
padding: 2px 4px;
vertical-align: text-bottom;
}
pre
{
padding: 1em;
}
На этом этапе вам может потребоваться выделить вашу страницу – сделать ее уникальной.
Основной цвет
Большинство брендов имеют основной цвет, который действует как визуальный акцент. На веб-сайте этот акцент можно использовать для направление внимания на интерактивные элементы, такие как ссылки.
a
{
color: #e81c4f;
}
Но чтобы сохранить баланс, нам понадобятся дополнительные цвета.
Дополнительные цвета
Основной цвет может быть дополнен более тонкими оттенками, которые будут использоваться на границах, фонах или даже в основном тексте
body
{
color: #566b78;
}
code,
pre
{
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}
pre {
border-left: 2px solid #69c;
}
Изменив оттенки, почему бы не изменить шрифт ...
Пользовательский шрифт
Поскольку текст является основным содержанием веб-страницы, использование пользовательского шрифта еще более выделяет страницу.
Например, можно использовать «Roboto» из бесплатной службы Google Fonts:
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
body
{
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
Графика и значки могут использоваться либо как украшения для контента, либо активно участвовать в сообщении, которое вы хотите передать.
Улучшим наш заголовок хорошим фоновым изображением.
header
{
background-color: #263d36;
background-image: url("header.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: 1.2;
padding: 10vw 2em;
text-align: center;
}
Добавим логотип
header img
{
display: inline-block;
height: 120px;
vertical-align: top;
width: 120px;
}
Поиграемся со стилями текста.
header h1
{
color: white;
font-size: 2.5em;
font-weight: 300;
}
header a
{
border: 1px solid #e81c4f;
border-radius: 290486px;
color: white;
font-size: 0.6em;
letter-spacing: 0.2em;
padding: 1em 2em;
text-transform: uppercase;
text-decoration: none;
transition: none 200ms ease-out;
transition-property: color, background;
}
header a:hover
{
background: #e81c4f;
color: white;
}
И вуаля!
Мы разработали достойную страницу всего за несколько минут, следуя основным принципам веб-дизайна. Осталось только одно последнее:
Изучить CSS с помощью моего курса Вёрстка сайта с нуля 2.0
-
Создано 27.03.2018 08:53:14
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.