Одна из самых полезных функций препроцессора SASS это модифицированный @import, который может собирать из нескольких файлов один, в результате чего на этапе разработки мы наблюдаем семантически разделенные .scss таблицы стилей, а на выходе всего один .css файл и один http-запрос, в том числе с возможностью компрессии. Именно об этом мой сегодняшний пост.

Здравствуйте, друзья! На моем блоге уже есть информация о всплывающих подсказках на CSS, но сегодня будем делать еще более интересный эффект, это всплывающие картинки при наведении курсора. Этот эффект имеет достаточно широкое применение, но я все чаще замечаю подобное на интернет-магазинах, где при наведении на название товара, появляется его изображение или же увеличение картинки при наведении. Конечно такие эффекты можно разнообразить с использованием JavaScript или jQuery, тем более, если у вас vps хостинг, но мы с вами воздержимся от всевозможных скриптов и будем делать всплывающие картинки только на CSS.

Всем привет. Знаете ли вы, что сделать модальное окно на CSS без использования JavaScript или jQuery вполне возможно? Недавно я показывал пример модального окна на jQuery, но сегодня будем делать такое окно на CSS3 и HTML5. С развитием этих спецификаций стало возможно делать простые модальные окна без подключения внешних библиотек и что больше всего радует, так это поддержка подобных эффектов практически всеми браузерами, естественно последних версий. Но об этом немного позже. Сейчас давайте посмотрим пример и разберемся, где можно использовать модальное окно на CSS.

Наверняка мы часто задавались вопросом о том, как выровнять какой-нибудь элемент по центру вертикально и искали что-нибудь на подобии vertically center div. И наверняка вы зачастую использовали метод “табличной верстки” — вручную присваивали table-cell, но использование “табличной” роли накладывает некоторые ограничения. Есть пара способов поизящнее: inline-block и нашумевший css flexbox!

Ни для кого не секрет, что CSS Flexible Box Model изобретена уже довольно давно, но за последние пару лет синтаксис претерпел существенные изменения, причем несколько раз. Из-за этого поддержку браузеров тоже нельзя назвать идеальной. Но сегодня мы свами попробуем собрать все воедино. Скажу сразу: поддерживаются все версии Chrome, Safari, Firefox, iOS, Android, а также Opera версии 12.1 и выше. С Internet Explorer хуже — только 10 версия. Поэтому, если хотите использовать такую модель в продакшне — придется использовать отдельную таблицу css для IE 9 и ниже (хотя это конечно же вполне распространенная практика).

Привет друзья! Хочу поделиться как сделать на CSS красивую трехмерочную меню для вашего блога или сайта. CSS-анимации помогают нам реализовать не только простые эффекты скольжения или затемнения. CSS-анимации в наши дни способны на гораздо большее.

Здравствуйте. Читая один из зарубежных сайтов, обнаружил, что ссылки на нем очень интересно оформлены, с использованием трехмерного эффекта. Сначала я подумал, что это сделано с использованием JavaScript, но заглянув в код обнаружил, что все это написано на CCS3. Если кому-то приглянулась эта забавная фишка, то установить ее себе на сайт не составит особого труда.

Здравствуйте, уважаемые читатели. Сегодня пост будет посвящен тем, кто изучает сайтостроение. На сегодняшний день язык оформления интернет-страниц (CSS) шагнул достаточно далеко. Что поделать, будущее уже наступило. И с его помощью теперь можно не только располагать элементы на странице и менять их цвет, но и применять в ним более интересные эффекты, что придает оформлению страницы совершенно другой вид. Некоторые из них мы сейчас рассмотрим.

Здравствуйте, уважаемые читатели! Пока я прекращаю тему селекторов CSS, поскольку даю информацию не только о создании сайтов, но и об их продвижении. Но, я всенепременно обязан был написать о соседних селекторах и универсальном селекторе CSS. Ведь они также служат инструментом оптимизации документа CSS, что положительно сказывается на раскрутке. В своем мануале я с помощью конкретных примеров разъясняю суть механизма применения этих селекторов.

Здравствуйте, уважаемые друзья! Не устаю призывать вас к покорению основных понятий CSS, которым принадлежат и селекторы. Если прочитаете мою очередную статью на данную тему, то узнаете, какую роль играют контекстные и дочерние селекторы CSS, а также в чем их сходство и основное различие. Контекстные и дочерние селекторы помогают сделать документ CSS оптимальным и легко читаемым. А корректно составленные CSS правила в соответствующем файле дают почву для успешной раскрутки сайта. Как видите, мелочей в продвижении проекта не существует, поэтому читайте дальше о дочерних и контекстных CSS селекторах