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

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

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

В CSS нумерованный список может быть с латинскими и греческими буквами. А вот русских букв для списка нет. Нам это обещают в CSS3, но когда в реальности браузеры начнут поддерживать эту возможность никому не известно. Так что не станем пассивно ждать этого момента, и с помощью возможностей CSS3 добавим русские буквы в наш список прямо сейчас.

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

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

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

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

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

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

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

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

В Рунете большой популярностью пользуется комплект Denwer, проект Дмитрия Котерова. Объяснить популярность, пожалуй, можно активной русскоязычной поддержкой на форуме, а также подробным руководством по установке и использованию, опять же на русском языке. Плюс автоматизированная система по созданию виртуальных хостов на локальном компьютере. В остальном, Denwer проигрывает другим комплектам по части удобства применения и управления. То, что Denwer морально устарел понимают и его разработчики, дав жизнь новому проекту под именем Endels. Фактически, это тот же Denwer, сохранивший свои удобные штучки, но работающий в современных операционных системам и с новой оболочкой.

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

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

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

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