Архив тегов: CSS

ИКФ: высота строки, часть 5 (7-я публикация цикла «Тайны CSS2.1″)

В комментариях (1, 2) к предыдущей публикации нашего цикла внимательные читатели указали, что не все браузеры одинаково (по спецификации) определяют базовую линию для инлайн-блоков и инлайн-таблиц. Сюрприз: две наиболее заметные ошибки — в браузерах на движке webkit, которые всегда славятся хорошей поддержкой модных CSS-новинок. Вот эти ошибки:

1. Overflow инлайн-блоков не влияет на положение их базовой линии (ссылка на баг).

2. Инлайн-таблицы выравниваются не по базовой линии первой строки, а по нижней границе всей таблицы. Этот баг уже исправлен и ближайшие релизы вот-вот начнут вести себя по спецификации.

line-height для замещаемых элементов

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

(далее…)

Яйца на CSS

Простые и свежие CSS3 Яйца сделаны с помощью border-radius и прямоугольного элемента div. В создании фигуры яйца использованы два значения свойства border-radius, разделённые слешем. Для примера: border-radius: 50% 40% / 50% 80%; будет создана искажённая овальная фигура (посмотрите этот пример на тестовой площадке).

(далее…)

ИКФ: высота строки, часть 4 (6-я публикация цикла «Тайны CSS2.1″)

line-height для инлайн-блоков и инлайн-таблиц

Несмотря на то, что инлайн-блоки (inline-block), так же как и инлайн-таблицы (inline-table) входят в инлайновое форматирование строк, они имеют свои особенности, которые отличаются от особенностей обычных инлайн-элементов или текста. Это довольно-таки интересно и нам следует о них поговорить.

Эти боксы — особенные: снаружи они ведут себя как неразрывные инлайн-боксы (наподобие отдельных слов текста), но внутри у них — свои собственные, обособленные блочные «миры», блочные контексты форматирования (о них мы расскажем в скором будущем). У инлайн-блока всё его содержимое представляет собой такой «блочный мир» (поэтому он и инлайн-блок), а у инлайн-таблицы отдельный блочный контекст создается каждой ячейкой. И в каждом из этих «маленьких блочных миров» могут находиться собственные лайн-боксы, а в них — инлайн-боксы, как обычно.

(далее…)

Обычное дерево меню CSS

Настоящие CSS-ниндзя не используют JavaScript, когда им необходимо соорудить дерево меню. А вместо этого они используют некоторые псевдо-классы CSS3 и кое-какие псевдо-селекторы из CSS2

Разметка HTML заполнена неупорядоченными списками (ul) для формирования структуры дерева, флажков для всех неконцевых нод, радио кнопки для концевых нод и элементов <label>. Как вы можете заменить, элементы <ul> размещаются справа после элементов <input> (которые в свою очередь размещаются справа после элементов <label>) и затем ul легко выбирается в CSS, используя сестренский селектор "+" вместе с CSS3 селектором :checked (чтобы помочь нам открыть различные ноды папки/деревья). CSS-код действительно мал, что просто замечательно.

Я сделал некоторые изменения в оригинальном дереве меню. Смотрите оригинальную статью и демо здесь. Кроме того проверьте этот документ для получения информации о всех CSS селекторах.

(далее…)

Простые CSS3 кнопки в стиле Github

Простые CSS3 кнопки в стиле Github! Главный трюк заключается в использованием свойства border-radius наряду с линейным градиентом из CSS3.

Эти кнопки не будут отображаться в Internet Explorer 8 и ниже, т.к. в этих браузерах нет поддержки CSS3 градиентов, закругления углов и теней для текста. А в IE9 нет поддержки CSS3 градиентов, хотя в нём можно воспользоваться специальным градиентным фильтром, который работает именно в IE6-9.

(далее…)

Круглые светящиеся кнопки

Пара Милых Круглых Светящихся Кнопок сделаных на CSS3!  Для левой кнопки мы использовали плавную анимацию с помощью CSS3 свойства transition, которое создаёт плавный переход между двумя состояниями :hover и  :active. 3D эффект достигается благодаря правильному использованию таких свойств, как box-shadow, border и gradient.

С помощью свойства border-radius мы предал кнопкам круглую форму.  Анимация не будет работать в браузерах IE 6-9, т.к. в них нет её поддержки.

(далее…)

ИКФ: высота строки, часть 3 (5-я публикация цикла «Тайны CSS2.1″)

line-height для инлайн-элементов

Элементы с display:inline, как мы уже знаем, создают инлайновые боксы. В главном они ведут себя так же, как обычный текст, но могут иметь собственный фон, границы и т.п. Как же влияет line-height на них? Это мы прямо сейчас и выясним.

(далее…)

Скажем «нет» ложному жирному

Перевод статьи "Say No to Faux Bold" из журнала A List Apart, автор — Alan Stearns, переводчик — GreatRash

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

(далее…)

ИКФ: высота строки, часть 2 (4-я публикация цикла «Тайны CSS2.1″)

line-height

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

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

(далее…)

Чиним решение SelenIT-а по очистке потока, или Новый lol над Opera 12.00

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

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

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

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

(далее…)

Кнопки Twitter Bootstrap

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

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

(далее…)

ИКФ: высота строки, часть 1 (3-я публикация цикла «Тайны CSS2.1″)

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

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

(далее…)

Как CSS обрабатывает ошибки

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

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

(далее…)

Изучаем матрицы трансформаций в CSS

 

Введение

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

(далее…)

Введение в инлайновый контекст форматирования (ИКФ): основные понятия (2-я публикация цикла «Тайны CSS2.1″)

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

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

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

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

(далее…)