Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Здесь есть возможность читать онлайн «Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки» — ознакомительный отрывок электронной книги совершенно бесплатно, а после прочтения отрывка купить полную версию. В некоторых случаях можно слушать аудио, скачать через торрент в формате fb2 и присутствует краткое содержание. Город: Москва, Год выпуска: 2013, ISBN: 2013, Издательство: Array Литагент «СилаУма», Жанр: foreign_comp, Интернет, на русском языке. Описание произведения, (предисловие) а так же отзывы посетителей доступны на портале библиотеки ЛибКат.

Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки: краткое содержание, описание и аннотация

Предлагаем к чтению аннотацию, описание, краткое содержание или предисловие (зависит от того, что написал сам автор книги «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки»). Если вы не нашли необходимую информацию о книге — напишите в комментариях, мы постараемся отыскать её.

Книга – мостик между управленцем, маркетологом, веб-аналитиком и веб-разработчиком, одинаково полезная и интересная всем, вне зависимости от уровня квалификации и опыта.
Книга, прочитав которую, вы сможете понять современный подход к интернет-технологиям!
Закончив читать эту книгу, вы пересмотрите свои взгляды на работу, код и методы ведения проектов! Все покажется вам гораздо проще, гармоничнее и интереснее.
На русском языке издается впервые.

Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки — читать онлайн ознакомительный отрывок

Ниже представлен текст книги, разбитый по страницам. Система сохранения места последней прочитанной страницы, позволяет с удобством читать онлайн бесплатно книгу «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки», без необходимости каждый раз заново искать на чём Вы остановились. Поставьте закладку, и сможете в любой момент перейти на страницу, на которой закончили чтение.

Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

Теперь, когда вы задаете длину в rem, вы можете просто умножить на 10, чтобы получить величину в пикселях. Так как 10 пикселей может быть слишком мало для основного текста, вы можете настроить какой хотите размер rem в элементе

. Потом эту величину унаследуют все элементы. Например, если вы хотите, чтобы размер текста «тела» был 15 пикселей, можете сделать следующее:

html { font-size: 62.5 %; }

body { font-size: 1.5rem; /* 15px */ }

Один единственный недостаток величин rem – их поддерживают все основные браузеры, кроме Internet Explorer (IE) 8 и его ранних версий. Как альтернативу используйте каскадность стилей и установите размер в пикселях до настройки его в rem. Это может значительно увеличить вашу таблицу стилей. Поэтому вы можете использовать раздельную таблицу стилей с условными комментариями к IE 9 и его ранним версиям, если только вам не нужна поддержка iOS 3.2, Safari 4 и старых версий Opera.

Задание ритма в rem

Теперь, когда в нашем распоряжении величина, которую, как и пиксели, легко использовать и которая гибкая, как em, создать вертикальный ритм будет намного проще. О каком вертикальном ритме идет речь? Основная идея в том, что когда вы проматываете страницу вниз, текст и элементы страницы следуют заданному ритму.

Если мы проведем вниз страницы воображаемые строки с фиксированными интервалами, каждая линия текста и каждый отступ или другой элемент страницы будет занимать одну линию или кратную ей величину линий.

Они соблюдают ритм страницы, словно басист из блюз-группы. Это уплотняет дизайн и обеспечивает правильное выравнивание элементов страницы, даже вдоль колонок. Выдерживание ритма поможет добиться визуальной последовательности в макете страницы.

Для начала мы должны настроить ритм страницы. Например, на следующей странице мы установили его в 2.3 remили 23 пикселя. Он задается в элементе body с использованием свойства line-height. Мы также установили размер шрифта ( font-size) в 1.5 rem, для того, чтобы все основные элементы типографики, кроме заголовков унаследовали его.

Удобно иметь под рукой визуальные направляющие, чтобы видеть, где вы слегка перескочили. Для этого мы создали изображение в формате SVG для показа линий с 23-пиксельными интервалами. Также мы использовали базовый сброс стилей для удаления отступов и полей, чтобы они не нарушали наш ритм:

html {

font-size: 62.5 %;

background: url(line.svg) no-repeat;}

/* reset */

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6,pre, p, th, td,

article, section, figure, img {

margin: 0;

padding: 0;

}

body {

font-size: 1.5rem;

line-height: 2.3rem;

}

Если бы в нашем тексте были только текстовые параграфы, наша работа была бы почти закончена, даже если параграфы будут сжаты друг с другом без границ.

Заставляем заголовки соответствовать ритму

Настройка параграфов была несложной, так как каждая строка текста имеет междустрочный интервал (line height) меньше, чем 23-пиксельный вертикальный ритм страницы. Но что нам делать с такими элементами, как заголовки, которым нужен размер шрифта больше, чем высота нашей строки или дополнительные отступы сверху и снизу? Мудрость здесь в том, чтобы создать комбинацию из верхнего и нижнего отступов, при этом нужно, чтобы междустрочный интервал был кратен нашему ритму:

h2 {

font-size: 2.6rem; КОД (CODE)

line-height: 4.6rem; /* две базовых величины */

margin: 2.3rem 0 0 0; /* величина ритма сверху и снизу */

}

h3 {

font-size: 2.1rem;

line-height: 2.3rem; /* базовыйритм */

margin: 2rem 0.3rem 0; /* 2 сверху + 0.3 снизу == базовый ритм

}

Неважно, сколько строк заняли наши заголовки, они всегда будут занимать точные величины, кратные ритму. Так ритм будет идти вниз по странице. Потом мы сможем применить эту технику для всех элементов страницы, таких как изображения и фрагменты кода.

Имейте в виду, что рамки тоже занимают пространство, так что вам придется рассчитать их так же, уменьшая отступы. С другой стороны, тени не занимают пространство, поэтому вы можете делать с ними все, что хотите.

Если бы мы использовали величины em в этом примере, нам нужно было бы пересчитать высоту строки и отступы ( margin), с учетом размера текста. С rem мы почти полностью можем игнорировать размер шрифта, только надо удостовериться, что высота строки достаточна, чтобы включить текст без нахлеста [42].

GEORGIA у меня на уме

Мы любим Helvetica и Georgia, но не пора ли этим почтенным шрифтам взять отпуск? Весь мир типографики открывается нам, а веб-шрифты ждут, когда мы испробуем всю прелесть их экзотики.

Читать дальше
Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

Похожие книги на «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки»

Представляем Вашему вниманию похожие книги на «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки» списком для выбора. Мы отобрали схожую по названию и смыслу литературу в надежде предоставить читателям больше вариантов отыскать новые, интересные, ещё непрочитанные произведения.


Отзывы о книге «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки»

Обсуждение, отзывы о книге «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки» и просто собственные мнения читателей. Оставьте ваши комментарии, напишите, что Вы думаете о произведении, его смысле или главных героях. Укажите что конкретно понравилось, а что нет, и почему Вы так считаете.

x