CSS не слишком сложный язык. Но даже, если вы пишите CSS долгие годы, вам, вероятно, все еще попадаются ранее неизвестные особенности языка – свойства (или значения), которые вы никогда не использовали или детали спецификации, которые вы никогда не знали.
Современным браузерам доступны все вкусности HTML5 и CSS3. К основным отличительным особенностям можно отнести свойство CSS transition. Переходы (transition) позволяют анимировать элементы страницы просто и элегантно без использования javascript.
Есть несколько точек зрения на использование отрицательных полей (margin) в CSS,
как резко отрицательное, так и сугубо положительное.
Ниже приведены полезные приемы, которые пригодятся вам при проектировании адаптивного (или, что более верно, отзывчивого) сайта. В статье затронуты следующие важные нюансы полезные для адаптивного сайта: медиазапросы (характеристики устройств), гибкие изображения, поведение полей и отступов, дополнительно говорится о высоте, описывается как использовать медиазапросы в браузерах от IE(6-8), приведено краткое описание использование мета-тега viewport.
Свойство CSS transform позволяет вам визуально манипулировать элементом, буквально трансформируя его внешний вид.
Некоторое время я размышлял об этом, и, наконец, пришло время перестать использовать объявление overflow: hidden (и overflow: auto) в качестве «очищающего» (clearfix) хака.
Для больших демонстрационных блоков в дизайне от uniqli.com используется "полосатая" анимация: при наведении мышки на блок проявляется череда сменяющихся полосок. На мой взгляд, замечательный эффект.
Свойство CSS3 box-sizing позволяет сделать то, что мы хотим. Значение border-box (в отличие от значения по умолчанию content-box) позволяет включить значения отступов и границ (но не полей) в общее значение свойства width или height.
Дело вот в чем: inline-block элементы располагаются последовательно таким образом, что между ними возникает пустое пространство.
При кодировании на плавающих блоках широко распространена следующая проблема - обертывающий блок расширяется не на всю высоту плавающего элемента.
Сегодня я покажу, как создать CSS3 lavalamp меню.
Широко распространенно ошибочное мнение о свойстве vertical-align, которое заключается в том, что, будучи примененным к элементу, свойство vertical-align меняет вертикальное положение заключенных в этот элемент элементов.
Допустим, вы зашли на Google Web Fonts в поисках бесплатного шрифта для вашего сайта. Вы находите нужный вам шрифт...
Нет необходимости объяснять, что такое подсказки. Также вы, вероятно, знаете, что они могут повысить юзабилити вашего сайта. Поэтому в этой статье мы сконцентрируемся на практической стороне.
Математика в CSS не работает.
Допустим, у вас есть элемент, который вы хотите временно спрятать. Что делать: поменять значение свойства visibility на hidden или лучше назначить свойству display значение none.
В этой статье вы узнаете, как создать важное сообщение (уведомление) при помощи CSS3 и jQuery.
В сегодняшней статье я покажу, как оформить при помощи CSS3 форму поиска (идея взята с сайта apple.com).
Я с ностальгией вспоминаю CSS2.1. Чтобы округлить углы требовалось время и знание фотошопа, однако все было просто. К тому же большинство разработчиков легко могли вспомнить дюжину свойств, не обращаясь каждые две минуты к справочнику. Спецификация CSS3 изменила все. Добавилось 116 новых свойств с различными вендорными префиксами и различным синтаксисом. Никто не вправе думать, что вы запомните все.
Как правило, когда сталкиваешься с плавающими элементами, возникают одни и те же проблемы.
Правый столбец сайта расположим при помощи отрицательного поля.
В этой статье описан процесс создания CSS3 кнопок без использования изображений.
В этой статье я продемонстрирую, как можно при помощи CSS3 и HTML5 сделать закладки для сайта.
Перед вами два примера, где разговорные облака созданы при помощи свойств CSS3.
Из этой статьи вы узнаете, как создать форму обратной связи полностью на HTML5 и CSS3.
В этой статье показано, как использовать свойство @font-face.
Теперь красивые тени можно создавать с помощью CSS3 без фотошопа.
Концепт Body Border (границы у тега body) впервые был увиден мною на сайте Джона Хика hicksdesign.co.uk.
Сегодня я расскажу о редко используемом, но чрезвычайно полезном свойстве CSS word-wrap.
Safari 4+, Chrome 1+, Firefox 3.6+, и Opera 11.10+ - все поддерживают CSS3 градиенты.
Важной частью веб-дизайна служат фоны (backgrounds и далее фоны) CSS. В свойствах(ве) фона располагают цвета и изображения, служащие фоном контента и отвечающие за эстетику сайта....
Многие используют модифицированную версию популярного сброса (RESET) от Эрика Мейера:
В предыдущей части ‘Основы CSS’ мы рассуждали о подложках, полях и блочной модели. На этот раз я попробую описать, как и с помощью каких свойств CSS задать стиль к тексту.
В первой части ‘основы CSS’ мы будем говорить о полях (margins), подложках (padding) и блочной модели.
В этой статье будут рассмотрены различные свойства, которые применяются для позиционирования элементов.
Чтобы писать детально о css, необходимо полностью понимать терминологию css.
В этой статье показано, как создать анимированное горизонтальное меню с помощью CSS3. Основные особенности этого навигацционного меню в том, что...
Галерея изображений,созданная с помощью CSS3.
Один из самых запутанных моментов в CSS это применение свойства font-size для масштабирования текста. В CSS вы имеете четыре основные единицы измерения, при помощи которых вы можете регулировать размер текста. Которая из этих четырех единиц наилучшим образом подходит для веба? Этот вопрос породил целый шквал рассуждений и споров. Окончательно ответить на этот вопрос крайне трудно, потому что сам вопрос не из простых.
Пару лет назад закругленные углы стали характерным элементом дизайна для тренда Web 2.0.