Cтатьи по тегу «CSS»

line-height

С помощью текста мы можем регулировать высоту строки только благодаря размерам шрифта, но что делать, если мы хотим задать высоту строки принудительно? Вот тут я должен ввести в игру следующего игрока: "line-height". 

Свойство line-height устанавливает интерлиньяж строки, т.е. попросту её высоту, а само состоит из  высоты кегельной площадки + half-leading-ов (о них позже). Рассмотрим по порядку, как это действует.

Приветствую, дорогие друзья!

Сегодня пишу эту статью для Вас (как всегда среди ночи), чтобы рассказать занимательную историю о маленьком браузере. О его плохом воспитании и — как следствие — плохом поведении. Действия которого, нарочно или нет, приносят массу проблем разработчикам. По совету Макса (a.k.a Psywalker) разделю сие повествование на три части:

• Проблема
• Решение
• Пикантные подробности

Итак, поехали!

Кнопки из фреймворка от Twitter'а — Bootstrap, которые выглядят довольно таки интересно и современно. Прекрасно поддерживаются в IE7 и выше. 

Для создания кнопок используются многие вещи из CSS3, например, такие как: border-radius, linear-gradient, box-shadow, text-shadow, rgba и т.д, для достижения удивительного эффекта.

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

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

CSS изначально был создан очень снисходительным к ошибкам. Когда браузер натыкается на нечто непонятное в CSS-файле, он испытывает минимальное "удивление", а затем продолжает как ни в чем ни бывало.

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

• Введение
• Что такое матрица?
• Трансформации и системы координат
• Расчет трансформации: математика матриц и векторов
• Составные трансформации с помощью матриц

Введение

Матричные функции — matrix() and matrix3d() — две самые головоломные в плане понимания штуковины в CSS3-трансформациях. В большинстве случаев, ради простоты и ясности, вы будете пользоваться функциями вроде rotate() и skewY(). Но всё же за каждой трансформацией скрывается эквивалентная матрица. Полезно хоть слегка понимать, как они работают, так что давайте взглянем.

Поля, отступы и границы в инлайновом форматировании

В блочном контексте форматирования поля (margin), отступы (padding) и границы (border) могут оказывать влияние на любые координаты и расположение элемента, и так же могут влиять на окружающий контекст. Но что происходит в этом плане в инлайновом контексте? Давайте разберёмся.

Спецификация сообщает нам, что в инлайн-форматировании горизонтальные margin, border и padding между инлайн-боксами учитываются, а вот вертикальные не дают никакого эффекта и не могут влиять на окружающий контекст. Да, сразу стоит уточнить, что речь идет о инлайн-боксах, создаваемых обычными элементами с display:inline (читайте первую часть цикла), а не об инлайн-блоках или замещаемых элементах вроде картинок.

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

Для тех, кому лень читать всю статью: в современном HTML нет «блочных» и «строчных» элементов. Это деление — историческая ошибка, условность и анахронизм времен конца 90-х. Что во что можно вкладывать, а что нет, определяется не тем, как элементы выглядят, а тем, что они делают. А «блочностью», «инлайновостью», любыми их комбинациями и др. чисто внешними чертами заведует только CSS.

Остальное — для тех, кто до сих пор не верит или просто желает разобраться до конца.

Последнее обновление: 05.10.2012 

Сегодня я проснулся с каким-то странным чувством. Мне как будто казалось, что что-то должно произойти. Я вошёл в скайп и не ошибся! Меня уже поджидал Илья Стрельцын (@SelenIT2) с неожиданным решением одной известной задачи, связанной с очисткой потока.

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

Итак, у вас есть резиновый лейаут и изображения, которые меняют размеры, но вам нужно заставить так же изменяться и текст. Один и тот же размер шрифта не подойдет ко всем возможным размерам экранов!

Мы привыкли думать, что для изменения размеров тескта достаточно указать значение относительно размеров базового шрифта, используя em’ы или проценты. В адаптивном web-дизайне мы пишем кучу правил и устанавливаем кучу ограничений, чтобы удостовериться, что наш лейаут хорошо отображается на различных разрешениях. Текст — это замечательная изменчивая среда, но, указав один размер не получится красиво заполнить им страницу. Мы рассмотрим несколько простых советов как добиться того, чтобы текст красиво заполнял лейаут, невзирая на размер экрана или устройство на котором он отображается.

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

В CSS появились новые значения для изменения размеров объектов в зависимости от размера области просмотра (viewport): vw, vh и vmin. Уместно рассказать об этом сейчас, т.к. эти вещи появатся уже в Chrome 20 (в сборке canary на момент написания статьи). Пока нельзя сказать, что это работает. Использовать в продакшне их пока нельзя, но довольно скоро мы сможем ими пользоваться.

Почему это так классно?

На это есть несколько причин.

Если вы когда-либо использовали списки определений (<dl>) то вы в курсе проблемы. По дефолту, у <dt> и <dd> стоит display: block. Для того, чтобы превратить их в то, что нам надо в большинстве случаев (каждая пара термина и определения на одной строке) мы обычно используем несколько техник:

• Используем разный <dl> для каждой пары: разметка доминирует над стилями, что плохо
• Float: не гибко
• display: run-in; для <dt>: плохая поддержка браузерами (не поддерживается в Firefox)
• Добавление <br> после каждого <dd> и установка термину и определению display: inline;: невалидная разметка. Нужно ли продолжать?

Ах, если бы добавление <br> было валидным… Или, даже так: что если бы мы могли вставлять <br> при помощи CSS? На самом деле мы можем!

Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.

При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?

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

Я думаю, что вы уже видели, анимированные меню с эффектом LavaLamp (на основе плагина JQuery). Сегодня я хотел бы вам рассказать, как повторить то же поведение только на чистом CSS3 (без JavaScript). В нашем меню я буду использовать CSS3 transitions (для анимации элементов). Итак, если вы готовы, давайте начинать.