Хабрахабр / Каскадные Таблицы Стилей / Захабренные

Каскадные Таблицы Стилей / rgba.php: изящный и миниатюрный «костыль» обеспечивает обратную совместимость с браузерами, не понимающими полупрозрачные цвета rgba(…)

Mithgol — Tue, 07 Feb 2012 06:15:39 GMT

Обеспéчение обратной совместимости rgba(…) ещё никогда не было таким простым, как copy+paste:

background: url('/rgba.php/rgba(255, 255, 255, 0.3)');
background:                rgba(255, 255, 255, 0.3);

Код rgba.php на языке PHP, которым достигается этот восхитительно простой трюк, лежит на GitHub под лицензией MIT. Занимает всего-навсего 2658 байтов.

Автор — Lea Verou. Хвала ей!

Каскадные Таблицы Стилей / Мина замедленного действия из YUI CSS Grids, или еще раз про инлайн-блоки, letter-spacing, word-spacing и браузеры

SelenIT2 — Sun, 05 Feb 2012 23:13:24 GMT

Думаю, мало кто возразит, что верстка на инлайн-блоках становится модной. Многие верстальщики, едва узнав о них, видят в них улучшенную замену float-ам, и не зря: инлайн-блоки дают куда больше свободы по части центрирования, вертикального выравнивания блоков и т.д. Не случайно недавняя детальная статья коллеги psywalkerа (css-live.ru), посвященная самой неинтуитивной для начинающих особенности инлайн-блоков, оказалась столь полезной и востребованной.

Однако комменты к этой статье высветили еще одну проблему, которая сейчас расползается по вебу, как вирус, и очень скоро может «аукнуться» на множестве сайтов. Нет, катастрофы не случится, странички не превратятся в тыкву, буквы не провалятся в черную дыру (как тут:), даже колонки не разъедутся особо. Просто при очередном обновлении Webkit-браузеров стройная сетка на некоторых страничках малость «скукожится», блоки прижмутся друг к другу и чуть сползут к левому краю, ломая красоту и огорчая дизайнеров.

Откуда я это знаю?

Каскадные Таблицы Стилей / Красивые кнопки для Twitter Bootstrap

alizar — Sat, 04 Feb 2012 22:07:23 GMT

Классное расширение для фреймворка Twitter Bootstrap v2.0 — CSS-генератор кнопок. С помощью ползунков выбираете цвет, насыщенность, яркость и выпуклость кнопки.

Потом забираете CSS-код из соседнего окошка. И больше никогда не кодируйте цвет кнопок вручную!

P.S. Ещё один генератор кнопок: Button Maker, ну и вдобавок: CSS генератор градиентов.

Каскадные Таблицы Стилей / «Загадочные отступы» между инлайн-элементами

psywalker — Fri, 03 Feb 2012 22:17:36 GMT

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

В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и, конечно же, обсудим все их стороны.

Читать дальше →

Каскадные Таблицы Стилей / [Перевод] Проблема с подсчетом браузерных «фич»

SelenIT2 — Fri, 03 Feb 2012 17:11:10 GMT

Счет в css3test.com выходит примерно равным. Я получаю почти одни и те же результаты в экспериментальном Файрфоксе и в ночных сборках Хрома (64% и 63% соответственно). Это дает мне шанс объяснить, чем такого рода тесты плохи для Веба, чтобы это не звучало ни издевкой, ни подлизыванием :-)

Корень проблемы очень прост и объясняется прямо в верху страницы:

в чем же именно?

Каскадные Таблицы Стилей / [Перевод] Оформление изображений на CSS3. Часть 2

ilyafd — Fri, 03 Feb 2012 14:20:47 GMT

В предыдущей статье про оформление изображений была затронута тема создания у картинок идеально закругленных углов, строгих теней и других графических «фишек» с помощью свойств box-shadow, border-radius и transition. Т.к. эти свойства обрабатываются некоторыми браузерами некорректно, проблема кроссбраузерности была решена обёртыванием изображения в контейнер, где оно (изображение) используется в качестве фона.

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

К счастью, обходной путь был успешно найден. О нем и будет рассказано в статье.

Читать дальше →

Каскадные Таблицы Стилей / Тестируем браузер на поддержку CSS3

py3u — Fri, 03 Feb 2012 13:29:17 GMT

Привет, Хабравчане!
Недавно наткнулся на интересный сервис CSS3Test

Читать дальше →

Каскадные Таблицы Стилей / [Перевод] Создание анимированных tooltips'ов с помощью CSS3

ilyafd — Wed, 01 Feb 2012 10:32:30 GMT

Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.

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

Каскадные Таблицы Стилей / Bootstrap 2.0 – HTML+CSS+JS UI фреймворк

Zhikharev — Wed, 01 Feb 2012 09:24:10 GMT

Вышла новая версия офигительного UI фреймворка от Twitter — Bootstrap 2.0 Для тех кто не в курсе что это, настоятельно рекомендую ознакомиться. Этот набор позволяет создавать отличные шаблоны сайтов за считанные часы (проверено на собственном опыте) на основе готовых элементов и экономить килотонны нервов на адаптации кода под разные браузеры.

Особенности Bootstrap:

Полный набор компонентов в виде стилей и анимаций поведения для элементов интерфейса
Поддержка возможностей HTML5, CSS3 (но при этом работает и в IE7!)
Поддержка идеологии 940-пиксельной сетки
Поддержка идеологии fluid-grid
Кросплатформенность — наборы стилей для десктопных и мобильных браузеров
Возможность кастомизации и добавления собственных стилей
Возможность добавлять jQuery плагины

Мастхэв для верстальщиков и проектировщиков интерфейсов!

Каскадные Таблицы Стилей / Бьющееся сердце на CSS3

makzimko — Sun, 29 Jan 2012 07:37:57 GMT

Доброго времени суток, уважаемый хабражитель! Сегодня я покажу Вам безграничные возможности CSS и научу при их помощи создать красивое пульсирующее сердце.

Читать дальше →

Каскадные Таблицы Стилей / [Перевод] 3D кнопки с помощью CSS3

shimapa23 — Wed, 25 Jan 2012 16:56:35 GMT

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Читать дальше →

Каскадные Таблицы Стилей / Браузеры запутались в блочной модели для таблиц

zapimir — Wed, 25 Jan 2012 07:39:22 GMT

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

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

Похоже, производители браузеров в гонке за количеством внедренных черновиков – забыли, что стандарты нужно не только поддерживать, но и поддерживать правильно и одинаково.

Читать дальше →

Каскадные Таблицы Стилей / [Из песочницы] Дизайн логотипа на CSS3

wcoder — Tue, 24 Jan 2012 15:11:30 GMT

Ранее мы использовали для графического дизайна программное обеспечение, например, Photoshop для разработки логотипов и иконок. Но теперь мы можем спроектировать почти все, используя возможности CSS3. Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта.

Сегодня обсудим, как создать логотип, используя основные свойства CSS3.

Читать дальше →

Каскадные Таблицы Стилей / Выравнивание иконок по базовой линии шрифта

smashercosmo — Sun, 22 Jan 2012 08:42:18 GMT

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

Читать дальше →

Каскадные Таблицы Стилей / Float'омагия: пробуем не «плавать» в спецификации, чтобы не утонуть в потоке

SelenIT2 — Fri, 20 Jan 2012 17:09:21 GMT

Недавняя статья про float-ы и реакция хабрасообщества на нее показали, что «сладкая парочка» CSS-свойств float и clear, несмотря на свою давнюю и колоссальную популярность в верстке, для многих остается чем-то загадочным и таинственным. Однако затронута в ней оказалась лишь верхушка айсберга, теряющегося в пучине мутных вод загадочной спецификации CSS 2.1. А есть и «подводные рифы», в спецификации не описанные. Не желаете ли продолжить увлекательное погружение в этот мир удивительных открытий и добраться до самого дна, полного сокровищ? Если да, то…

добро пожаловать на борт!

Каскадные Таблицы Стилей / Вышел CSS -фреймфорк YAML4 — теперь и с поддержкой HTML5

Aramaki — Thu, 19 Jan 2012 21:40:53 GMT

Сегодня начал верстать очередной сайт и по привычке пошел на www.yaml.de, чтобы скачать самую свежую версию моего любимого CSS-фремворка и… не узнал внешний вид сайта.

Оказывается вышла новая версия, которая по прежнему осталась очень компакнтной (ядро 4.6 kB) и обеспечивает хорошую поддержку браузеров

Читать дальше →

Каскадные Таблицы Стилей / Float'омания: разъяснение как работает css свойство float

JeanLouis — Thu, 19 Jan 2012 14:35:44 GMT

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

Читать дальше →

Каскадные Таблицы Стилей / [Из песочницы] LESS: программируемый язык стилей

kokis — Wed, 18 Jan 2012 13:51:56 GMT

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

Так что же такое LESS?

Каскадные Таблицы Стилей / impress.js — презентации на CSS3, рвущие шаблон

ilya42 — Wed, 18 Jan 2012 11:51:00 GMT

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

Основанный на трансформациях и переходах CSS3, javascript-фреймворк для создания презентаций impress.js выходит за рамки понятия “слайд” и позволяет строить презентации в открытом, неограниченном трёхмерном пространстве. Источником вдохновения для него послужил сервис prezi.com. Репозиторий impress.js на Гитхабе появился меньше месяца назад, но уже стал одним из самых популярных. Нетерпеливые могут посмотреть небольшую демку здесь, а остальные — создать пример необычной презентации прямо сейчас.

Читать дальше →

Каскадные Таблицы Стилей / [Из песочницы] Модальные окна на CSS

Vend3tta — Mon, 16 Jan 2012 14:12:12 GMT

В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна — popup'ы — для регистрации, авторизации, информационные окна, — всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов — тот же Shadowbox, например.

Читать дальше →