Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно, они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации.
Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных.
И вот, буквально на днях, поступили новости о выходе первого релиза рабочего черновика CSS Переменных (CSS Variables).
Рубрика «css» - 149
Как мы будем верстать, когда экраны станут многопиксельными, а пикселы еле разлечимыми
2012-04-11 в 10:46, admin, рубрики: css, ipad, браузеры, Веб-разработка, векторная графика, верстка, метки: iPad, векторная графика, верстка 
Данный пост не про конкретные решения по верстке сайтов в будущем, а сбор мнения хабрасообщества, как нам жить дальше.
Вопрос этот у меня возник не случайно. Есть интересный проект, заказчиками которого являются фанаты Айпадов и Айфонов. Им очень важно, чтобы сайт одинаково хорошо отображался и там и там. То есть ширина экрана плавает от 800 до 2000 пикселей в ширину.
Что нам делать с картинками в оформлении?
Да, сейчас все браузеры научились хорошо масштабировать сайты. Нажал Ctrl, покрутил скроллом, и твой сайт в том размере, как тебе удобно. Но если растровую картинку 30 на 80 пикселей увеличить в трое, красоты это не прибавит.
Мы в нашей рутинной работе верстальщиков уже привыкли к тому, что полностью зависим от пикселей. Мы все считаем в пикселях. Не важно, как мы встраиваем картину: в фоне или тегом Img.
Я вижу 2 принципиальных решения:
1. Использование разных файлов под конкретное разрешение, JS определяет размер экрана, предлагает определенный файл CSS, который в свою очередь подгружает нужные картинки.
2. Переход на векторную графику в оформлении сайта.
Полезные ссылки для изучения CSS анимации
2012-04-09 в 23:10, admin, рубрики: css, css3, CSS3 animation, keyframes Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.
Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев
2012-04-07 в 20:55, admin, рубрики: css, css sprites, css3, svg, Веб-разработка, метки: css sprites, css3, svg Привет.
Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.
Немного отойду от темы и расскажу предысторию.
Предыстория
Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно?
Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь.
Читать полностью »
Все о параметре border
2012-04-07 в 13:05, admin, рубрики: css, html, веб-дизайн, Веб-разработка, каскадные таблицы стилей Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?
Читать полностью »
Анимированные картинки на CSS3
2012-04-05 в 8:42, admin, рубрики: css, css3, css3 transform, css3 transition, веб-дизайн, Веб-разработка, метки: css3, css3 transform, css3 transition Доброго времени суток, уважаемые читатели! Сегодня я хочу рассказать Вам о том, как за несколько минут при помощи CSS3 создать такую вот красоту:
В чём вся красота вы поймёте попозже.
Читать полностью »
Переводим в код 5 действительно полезных шаблонов адаптивной разметки
2012-04-02 в 3:15, admin, рубрики: css, css3, media queries, responsive design, адаптивная разметка, веб-дизайн, Веб-разработка, метки: css3, media queries, responsive design, адаптивная разметкаПриветствую всех.
Недавно наш хабраколлега опубликовал интересную статью об адаптивной разметке.
Уже не далеко то время, когда мы будем уделять верстке под все разрешения намного больше внимания, нежели делаем это сейчас. Посему считаю нужным подходить к этому периоду подкованным в данном вопросе, ну или хотя бы иметь четкое представление, что это такое и с чем его едят. Запасаемся смартфонами и таблетками.
Читать полностью »
Kickstrap — форк Twitter Bootstrap с темами и бонусами
2012-03-30 в 23:32, admin, рубрики: css, html, html5, javascript, jquery, Twitter Bootstrap, uikit, Веб-разработка, плюшки, метки: css, html, html5, javascript, jquery, Twitter Bootstrap, uikit, плюшки 
Kickstrap это то, что будет если соединить Twitter Bootstrap, HTML5 Boilerplate, значки от IcoMoon и Font Awesome, добавить проверенные jQuery плагины Chosen и jGrowl, включить поддержку разных цветовых схем и тем оформления Bootswatch, дополнительную CSS сетку и вменяемую поддержку ранних версий IE.
Читать полностью »
Несколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым
2012-03-29 в 12:33, admin, рубрики: css, css3, html5, responsive web design, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: css3, html5, responsive web design, адаптивный дизайнДоброго времени суток!
Несколько дней назад, гуляя по интернету, я наткнулся на достаточно интересную подборку сайтов, которые следуют, если можно так сказать, практике под названием Responsive Web Design. В двух словах, эта практика подуразумевает создание «резинового» сайта, который будет тянуться в зависимости от размера окна вашего браузера, или же экрана вашего мобильного телефона. Итак, встречайте наших сегодняшних героев!
Читать полностью »
Адаптивная навигация: куда деть меню
2012-03-28 в 8:12, admin, рубрики: css, css3, media queries, responsive web design, Веб-разработка, метки: css3, media queries, responsive web design 
Адаптировать свой сайт под мобильные устройства уже пытаются очень многие. Используют новые возможности CSS3 и на простых сайтах и на куда более сложных. В процессе возникают некоторые сложности, причем одной из важнейших является поведение меню сайта при просмотре на маленьких экранах. Решают данную проблему, как выяснилось, несколькими способами. Для меня же данная задача недавно стала особенно актуальной, поэтому я слежу за материалами в сети, касающимися адаптивного дизайна. И недавно я наткнулся на хороший анализ существующих паттернов адаптивной навигации.
Так как я имею отношение к адаптивному HTML5-шаблону Simpliste, то решил все существующие возможности работы с навигацией испробовать на практике. Но кроме получения собственного опыта, мне удалось создать несколько наглядных примеров, доступных для использования любым желающим, а также подготовить описание процесса, познакомиться с которым будет однозначно полезно.
Читать полностью »