В модулях спецификации CSS3 найдётся множество скрытых жемчужин. В этой статье мы взглянем на calc() — невероятно полезное свойство, которое может изменить ваш подход к вёрстке сайта.

Функция CSS3 calc() в первую очередь используется для вычисления длины, чисел, углов, времени перехода или анимации, а также частоты звука. Тем не менее, она позволяет смешивать типы значений — это мощная идея в CSS.

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

Посещая Интернет вы увидите ряд сайтов, которые используют калькулятор для расчёта разных вещей, таких как: погашение ссуды, ставки по ипотечным кредитам, налоги, страхование и многое другое. До сегодняшнего дня у вас не было способа семантической разметки результата таких вычислений. Встречайте — элемент <output>! В этой статье мы расскажем об этом элементе и некоторых связанных с ним трюках JavaScript. Расщёлкнем этот орешек.

По роду занятий, сталкиваясь с потребностями начинающих вебмастеров сверстать каркас страницы интернет магазина строго по прихотям заказчика, приходится время от времени подсказывать какие-то мелочи и помогать в нахождении лёгких решений нетипичных задач.

Одна из таких — используя только обожаемую заказчиком DIV-ную вёрстку и вообще не привлекая JavaScript, дать колонкам сайта автоматическое выравнивание высоты по наиболее заполненной колонке, подобно тому как это происходило бы в нелюбимой табличной вёрстке.

Ниже предлагаю элементарное решение на основе всего двух объявлений в стилях сайта и одного обёрточного контейнера в теле страницы. Решение валидно для множества браузеров, кроме IE6-IE7, и при удалении одного свойства из стилей, привнесённых этим решением, может быть преобразовано под браузеры без поддержки CSS3.

В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.

Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background. Естественно, колонки будут иметь разную высоту, которая зависит от их содержимого, но за счёт одного фона создаётся иллюзия одинаковых по высоте колонок.

У этого метода есть следующие недостатки.

• Сложно быстро поменять цвет колонок, поскольку это делается не через код, а в графическом редакторе.
• Рисунок создаёт дополнительный запрос к серверу и увеличивает время загрузки страницы.
• Метод имеет сложности в макетах с резиновыми колонками, особенно, когда их больше двух.

В целом, минусы не очень существенны и многие разработчики готовы с ними мириться. Но есть решение изящнее — использовать CSS3, в частности, градиенты. Хотя никаких градиентов в данном случае не видно, они подходят как нельзя лучше из-за того, что позволяют делать не только плавные, но и резкие переходы цветов.

После прочтения этой статьи у многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color, которые применялись к элементам с полосами прокрутки (вроде body), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

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

Animate.css делает кодирование чуть более сносным. Просто выберите эффект, посмотрите его в действии, скачайте код и добавтье пару классов к вашему HTML-элементу. Вы можете скачать весь CSS-файл, содержащий 2500 строк или создать пользовательский файл используя только необходимые эффекты.

Друзья, htmlbook.ru обновил движок и заодно дизайн. Также изменена структура сайта и отредактированы все материалы, плюс добавились новые задачи в разделе Практикума.

Если заметите какие-то ошибки, пишите о них в комментариях к этой заметке или лично мне по почте vlad@htmlbook.ru.

Добавлен новый тест для проверки основ знаний по HTML5. В тесте всего десять простых вопросов, прохождение занимает минуту.

В виде приложения под Андроид доступен справочник «Рецепты CSS», в котором собраны ответы на популярные вопросы, касательно оформления элементов веб-страниц. Все рецепты систематизированы по категориям, содержат таблицу поддерживаемых браузеров, пример и результаты выполнения примера в браузере.

Приложение платное, стоит 1$.

Коллеги, часто ли вы слышите вопрос "Как стать хорошим верстальщиком?"? Лично я постоянно! Мне задавали этот вопрос неоднократно, и каждый раз мне приходилось давать урезанные ответы, которые порой оставляли ещё больше вопросов у новичков.

В этой статье я решил исправиться и поведать читателям свой путь обучения, который я считаю наиболее правильным и эффективным.

К дополнению справочника по CSS, в качестве приложения под Андроид выпущена книга Вёрстка веб-страниц. Если кто ещё не читал, то устанавливайте бесплатно и знакомьтесь.

Перейти к приложению на Google Play

Эта книга, написанная создателями css-live.ru (Максимом Усачёвым aka psywalker и Ильёй Стрельцыным aka SelenIT), посвящена одной из самых важных и вместе с тем самой загадочной, неизученной, неоднозначной и полной неочевидных сюрпризов стороне действующей спецификации CSS — визуальному форматированию текста.