Хабрахабр: Метки / css

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

makzimko — Fri, 10 Feb 2012 21:18:34 GMT

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

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

Веб-стандарты / [Перевод] Призыв к действию: вы нужны Открытому Вебу сейчас!

SelenIT2 — Thu, 09 Feb 2012 12:19:33 GMT

От переводчика: увидев вчера новость о том, что другие браузеры собираются ввести поддержку -webkit-экспериментальщины (тут), я испытал схожие чувства и смог произнести одно лишь слово «МаCSSаракш!». Поэтому, увидев в твиттере ссылку на эту статью Дэниела Глазмана, я посчитал необходимым перевести ее для Хабра. Буду благодарен за внимание и ваши мысли по этому поводу!

Рабочая группа CSS, W3C, производители браузеров и Открытый Веб нуждаются в вас, буквально в каждом из вас. Эта статья написана Дэниелом Глазманом, сопредседателем рабочей группы CSS: часть до «Это не должно случиться» передает официальное обсуждение внутри этой рабочей группы. Члены рабочей группы, участвующие в дискуссии, включают представителей Adobe, Apple, Disruptive Innovations, Google, HP, Microsoft, Mozilla, Opera и WWW-консорциума (W3C). Вторая часть статьи — целиком моя.

Не так давно, IE6 был сверхдоминирующим браузером в Вебе. Веб был переполнен сайтами, работающими только в IE6, и другие браузеры, их пользователи, были в отчаянии. IE6 мертв, те времена прошли, все производители браузеров, включая саму MS, ликуют. Прошли? Не совсем… IE6 ушел, проблема осталась.

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

MODx CMS / [Из песочницы] Sass плагин для MODX

onengine — Tue, 07 Feb 2012 07:32:55 GMT

Начинающим: удобный инструмент для верстки, создание и понимание работы плагинов в MODx.

Sass — правильный CSS

Многое (если не всё), чего не хватало старому доброму CSS (вплоть до CSS3), реализовано в расширенном формате написания каскадных таблиц стилей — Sass. Не зря приверженцы Ruby on Rails (откуда берет корни Sass) ласково называют его «синтаксический сахар».

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

Не отстаем от тенденций современности

Для тех, кто программирует на PHP в условиях CMS MODx, предлагается создать плагин, который будет следить за наличием и изменениями в sass-файлах и автоматически (ре)генерировать соответствующие css-файлы, подключаемые в шаблоне.

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

Блог компании Mail.Ru Group / Как мы разрабатывали темы для Почты

AndrewSumin — Fri, 03 Feb 2012 12:13:36 GMT

Летом 2011 года мы внедрили новый дизайн Почты Mail.Ru. Интерфейс изменился не только визуально, но и был полностью переделан в техническом плане, что в разы ускорило его быстродействие и удобство. Но еще это было необходимо для реализации очень желанной для пользователей фичи — тем оформления интерфейса. О том, как мы внедряли темы в Почте, хочу рассказать в этом посте.

Подробности и забавная статистика о самых популярных темах

jQuery / [Перевод] Facebook Timeline

wcoder — Wed, 01 Feb 2012 19:04:48 GMT

Facebook Timeline делает большую революцию в мире социальных сетей, придает новый вид для пользовательских профилей. Сегодня, посмотрим как просто можно реализовать этот проект с помощью jQuery и CSS.

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

PHP / [Из песочницы] Дай пять или еще один PHP/CSS фреймворк

cuhuak — Thu, 26 Jan 2012 13:21:44 GMT

Иногда, делая самую простую задачу, хочется, чтобы код решения был структурирован. На ум сразу приходят фреймворки. Фреймворков много, и есть здесь из чего выбрать. Но почти все из них являются очень громоздкими для решения небольших задач и имеют кучу документации, в которой еще нужно разобраться. В итоге затея с фреймворком сразу же отпадает, и пишется свое импровизированное решение со своей структурой. Highfive framework (или далее h5) пытается решить подобные ситуации, предоставляя каркас для простого приложения.

Сам фреймворк едва умещается на один экран монитора и является просто идеей и минималистичной ее реализацией. Состоит всего из четырех функций (view, action, pdo, wtf) и нескольких каталогов с файлами.

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

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

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

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

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

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

Персональные блоги / Очень доходчиво об HTML, CSS и прочих UI

4vanger — Tue, 24 Jan 2012 07:28:19 GMT

Очень своеобразные иллюстрации на тему пользовательских интерфейсов. Осторожно — в основном всё nsfw.

Автор Exey Panteleev — его блог

HTML5 / Mac OS X Lion воссоздали на HTML5 и CSS3

PavelPV — Mon, 23 Jan 2012 07:33:59 GMT

Mac OS X Lion воссоздали на HTML5 и CSS3 (если быть честным воссоздали совсем не всю ОС). Чудо доступно по ссылке: www.alessioatzeni.com/mac-osx-lion-css3

Веб-разработка / [Перевод] Подборка html/javascript/css инструментов и библиотек от SmashingMagazine

alrusdi — Mon, 23 Jan 2012 05:36:07 GMT

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

Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Веб-разработка / CSS 3D эффекты

Isis — Wed, 18 Jan 2012 00:48:48 GMT

Стивен Виттенс переработал свой сайт Acko.net. Виттенс применил 3D функции CSS 3 и небольшую часть JavaScript для создания ошеломляющего 3D заголовка страницы.

Чтобы увидеть 3D в действии вам надо использовать браузер WebKit (Safari или Chrome) т.к. пока только они поддерживают CSS 3D эффекты. В других браузерах, которые еще не поддерживают 3D эффекты сайт все равно нормально просматривается. Чтобы увидеть полный 3D эффект обязательно прокрутите страницу.

Виттенс в своем блоге подробно написал как он создал 3D эффекты и даже сделал 3D редактор, с которым вы можете поиграть.

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

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

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

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

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

Каскадные Таблицы Стилей / [Из песочницы] Оформление тултипов со стрелками на CSS с помощью символов

Dionisiy — Fri, 13 Jan 2012 14:00:03 GMT

Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.

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

Каскадные Таблицы Стилей / Интересные -webkit CSS свойства

rsboarder — Wed, 11 Jan 2012 16:28:45 GMT

Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда.

Остальных прошу под кат

Веб-стандарты / «Баг»-не-баг нецентрирования рисунков атрибутом align=center

spmbt — Sat, 07 Jan 2012 17:16:32 GMT

Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах W3C. Это — . Обнаружилось, что часть авторов «наивно» пользуется этим атрибутом, потому что другого редактор Хабра просто не предоставляет. Как ни странно, в части браузеров этот атрибут на Хабре поддерживается, хотя эксперименты с чистыми тестовыми страницами показывают, что чудес нет, в img он не работает.

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

клац-клац

Каскадные Таблицы Стилей / [Из песочницы] Изменение ширины элемента с «шагом» в несколько пикселей

ariser — Mon, 12 Dec 2011 09:49:34 GMT

Заранее оговорюсь, что чистым CSS здесь, к сожалению, обойтись не получится: Firefox и IE8+ слишком точно (да-да, в данном случае это плохо) производят вычисления ширины блоков. Однако для этих браузеров дописывается нехитрый скриптик в пару строк, если таки надо достичь идеала, хоть это и портит всю прелесть.

Для тех, кому лень читать всё, ссылка на окончательный вариант: jsfiddle.net/XeFTr/11/

В чем суть?

Суть в том, что иногда необходимо отобразить на странице резиновый блок с несколькими дочерними элементами, причем потомок должен быть либо виден целиком, либо не виден вообще. Самый простой пример — лента каких-нибудь картинок с прокруткой и стрелочками по бокам. Очень некрасиво смотрится выглядывающее из-под «overflow: hidden» изображение, обрезаннное сбоку. Выход — заставить ширину обёртки всегда быть кратной скольки-то пикселям.
Разумеется, если ширина потомков разнится от элемента к элементу, то этот способ не имеет смысла.

Как это работает?

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

Эту штуку описывал в лебедевском скринкасте Сергей Чикуёнок еще в 2008 году, в контексте исправления бага с «прыгающими» блоками в IE6. Однако я, к своему удивлению, так и не нашел описания этой презабавной технологии на Хабре.

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

Visual Studio / Валидация CSS в Visual Studio 2010 с помощью расширения CSSCop

XaocCPS — Fri, 09 Dec 2011 17:42:44 GMT

Задача проверки файлов определения CSS-стилей, поиска в них ошибок и нарушений рекомендаций работы со стилями стала еще легче с новым расширением CSSCop для Visual Studio 2010 (название дано по аналогии с анализатором кода FxCop).

После установки расширения выберите требуемый для анализа файл CSS и в контекстно меню нажмите пункт “Run CSSCop”.

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

Хабрахабр: Метки / css

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

Веб-стандарты / [Перевод] Призыв к действию: вы нужны Открытому Вебу *сейчас*!

MODx CMS / [Из песочницы] Sass плагин для MODX

Sass — правильный CSS

Не отстаем от тенденций современности

Блог компании Mail.Ru Group / Как мы разрабатывали темы для Почты

jQuery / [Перевод] Facebook Timeline

PHP / [Из песочницы] Дай пять или еще один PHP/CSS фреймворк

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

Персональные блоги / Очень доходчиво об HTML, CSS и прочих UI

HTML5 / Mac OS X Lion воссоздали на HTML5 и CSS3

Веб-разработка / [Перевод] Подборка html/javascript/css инструментов и библиотек от SmashingMagazine

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

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

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

Веб-разработка / CSS 3D эффекты

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

Каскадные Таблицы Стилей / [Из песочницы] Оформление тултипов со стрелками на CSS с помощью символов

Каскадные Таблицы Стилей / Интересные -webkit CSS свойства

Веб-стандарты / «Баг»-не-баг нецентрирования рисунков атрибутом align=center

Каскадные Таблицы Стилей / [Из песочницы] Изменение ширины элемента с «шагом» в несколько пикселей

В чем суть?

Как это работает?

Visual Studio / Валидация CSS в Visual Studio 2010 с помощью расширения CSSCop

Веб-стандарты / [Перевод] Призыв к действию: вы нужны Открытому Вебу сейчас!