Статьи

Обычное дерево меню 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»)

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

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

Как избавиться от префикса для -webkit-device-pixel-ratio

Решили некогда вебкитовцы, что было бы полезным медиавыражение для разрешения экрана. Но вместо того, чтобы использовать уже стандартизированное выражение resolution, они изобрели -webkit-device-pixel-ratio. Медиавыражение resolution принимает лишь «количество точек на дюйм» и «количество точек на сантиметр», тогда как -webkit-device-pixel-ratio принимает «количество точек на px». Но все они в своей основе — одно и то же, поскольку 1in = 96px = 2.54cm. (Справедливости ради, не всё из этого было так понятно в 2006-м, так что простим вебкитовцам их отсебятину).

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

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

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

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

 

Введение

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

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

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

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

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

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

Адаптивные изображения и веб-стандарты на распутье

Цель решения под названием «адаптивные изображения» в том, чтобы дать конечному пользователю изображение, оптимизированное именно для него, вместо того чтобы отображать максимально большую картинку для всех потенциальных пользователей. К сожалению, на практике все не так просто, как в теории.

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

Паттерн разметки, который будет выбран в итоге, будет иметь огромное влияние на то, как разработчики будут строить сайты в будущем. И не только адаптивные сайты. Все сайты.

Сайту требуются переводчики, корректоры и просто помощники

Добрый день, уважаемые коллеги!

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

Все ваши предложения пишите на почту: psywalker@css-live.ru