CSS-параметры позволяют нам создавать много различных фигур за счет стилизации элемента. CSS3 Shapes представляет собой проект, который разделяет стили между различными фигурами, включая треугольник, алмаз, звезду, пузырек для комментария, яйцо, сердце и многие другие. Конечно же, не все эти фигуры можно применять на практике, но они отлично подойдут для повышения вашего навыка в CSS(3).

Сегодня мы начинаем серию статей, посвященных технологии LESS – динамическому языку, который использует CSS-код и, так сказать, накачивает его стероидами. LESS позволяет вам использовать переменные, mixin’ы, разветвленные правила и даже функции прямо внутри кода CSS. Это поможет вам в значительной степени ускорить процесс разработки и улучшить качество проектов. Конечно же, как и в любом деле, вам потребуются некоторые знания, но как только вы поймете суть данной технологии, вам вряд ли снова захочется использовать чистый код, без применения LESS.

Поскольку почти каждый браузер использует для некоторых свойств собственные CSS-префиксы (-webkit-, -moz- или -o-), нам обычно приходится закладывать в наши таблицы стилей их все. Дело не только долгое, но и трудоёмкое, да и объём CSS-файлов из-за этого увеличивается (а в итоге может замедлиться скорость загрузки и снизиться пропускная способность).

cssFx - это javascript-файл (объёмом в 2.5 Кб), генерирующий вендорные CSS3-свойства для старых и новых браузеров в клиентской части. Он поддерживает большинство CSS3-свойств и работает почти со всеми браузерами (в том числе, IE6).

Переключатели стилей становятся все популярнее и популярнее. CSS-стили позволяют веб-дизайнерам без труда изменять внешний вид веб-сайта. Некоторые веб-сайты используют шаблоны «дня» и «ночи», которые сменяются в автоматическом режиме в соответствии с временем суток.

В сегодняшнем руководстве мы расскажем вам о том, создать собственный время-зависимый переключатель CSS-стилей при помощи PHP, который позволит нам менять шаблоны стилей в соответствии с текущим временем суток. Также, для того чтобы немного позабавиться, мы использовали jQuery UI.

В нашем сегодняшнем руководстве мы расскажем вам о том, как создать простенькие CSS3-анимированные вкладки посредством радио-кнопок, псевдо-класса :checked и смежных комбинаторов.

Надеемся, что на данный момент вы знакомы с псевдо-элементами :before и :after, так как сегодня мы собираемся разработать нечто интересное посредством CSS! Сегодня мы покажем вам, каким образом можно создать интересный эффект для изображений.

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

(Бесплатное) веб-приложение SpritePad впечатляет своими возможностями - оно упрощает весь процесс, позволяя нам перетаскивать изображения на рабочую поверхность в любом количестве, ориентировать их там, как угодно, и применять к ним CSS-правила в режиме автогенерации.

Сейчас стало очень модно применять в дизайне сайта media queries, так как в значительной степени возросло число устройств, посредством которых люди по всему миру выходят в интернет. Следовательно, все разработчики сайтов должны стремиться к тому, чтобы их творения одинаково превосходно работали на всех устройствах. Именно в этих случаях на помощь приходит адаптивный дизайн – процесс определения, с какого устройства был произведен заход на сайт, и дальнейшая адаптация дизайна под его возможности.

В нашем сегодняшнем уроке мы будем заниматься разработкой шестеренок, анимированных посредством CSS3. Результат получится очень милым. Мы использовали слайды CSS3, анимацию и трансформации (rotate) для того, чтобы достичь подобного результата. Пожалуйста, обратите внимание, что данное демо будет работать в Firefox и Chrome / Safari (webkit).

Йен Хэнсон (Ian Hansson) - дизайнер/разработчик из Лондона - создал без применения javascript, лишь средствами CSS3 полнофункциональный адаптивный слайдер.

Он подобен javascript-слайдерам; поочерёдно отображает все фрагменты содержимого (реестра объектов), оставляя "за кадром" его излишки. Вывод на экран каждого следующего объекта задаётся «div»-элементом и предваряется анимированным сигналом во внутреннем поле. Для специализированной iOS-версии имеется дополнительный, применяемый по усмотрению пользователя javascript-"фиксатор", вообще, слайдер работает в современных браузерах хорошо.