Расширяемая форма поиска на CSS

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

Продолжить

Редактирование изображений в CSS. Часть 1: Фильтры

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

Продолжить

Создание вертикальной шкалы времени на CSS и JavaScript

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

Продолжить

CSS Эффекты при наведении элемента Caption

Сегодня я хотел бы показать вам, как создать несколько стильных эффектов при наведении для элемента caption. Идея состоит в том, чтобы создать сетку и применить к ней различные эффекты при наведении, которые будут содержать заголовок, автора и кнопку. Для некоторых эффектов, будем использовать 3D transforms.

Продолжить

Креативные стили кнопок на CSS

Сегодня я хотел бы рассказать вам про некоторые интересные стили кнопок для вашего сайта. Этот набор состоит из простых, креативных кнопок с простыми стилями и эффектами. На определенных кнопках эффекты можно увидеть при наведении, на некоторых при нажатии. Главным образом используются CSS переходы, CSS анимация и для некоторых кнопок мы используем JavaScript для добавления/удаления классов.

Продолжить

Структурирование Sass: Скажите пока неоднозначности атомарного дизайна

Атомарный дизайн представляет собой методологию с изложением разумной структуры кода для таблиц стилей. Он имеет много последователей, но я считаю его именование конвенций может быть неоднозначным. Что такое молекула? Что такое организм? Где провести грань между этими двумя понятиями? Эти конкретные вопросы, кажутся, самым большим камнем преткновения для интерпретации атомной архитектуры.

Продолжить

Как создать адаптивную форму на Flexbox

В этом уроке я покажу вам как создать адаптивную форму при помощи Flexbox. Что самое интересное, Flexbox позволяет разрабатывать нашу форму без использования каких-либо медиа-запросов.

Продолжить

SVG-анимация для появляющихся на странице элементов

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

Продолжить

CSS свойства object-fit и object-position

В этой статье мы поговорим о двух малоизвестных CSS свойствах. Они называются object-fit и object-position и оба имеют отношение к стилизации изображений или видео.

Продолжить

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.