Автор

Эффект заливки иконок

Эффект заливки иконок


Эффектный эффект наполнения ваших значков, который можно использовать для создания простой страницы, выглядит круто и динамично.

 

ДЕМО
ИСХОДНИКИ

 

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

 

Создание структуры

Прежде чем погрузиться в код, я попытаюсь объяснить, что стоит за этим ресурсом. Там нет продвинутой техники CSS, это все о создании правильных активов / значков и игре с позиционированием элементов. Я начал с создания значков с нуля в Adobe Illustrator. Теперь важно сделать прозрачную область значка, который вы хотите заполнить:

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

Чтобы убедиться, что это на 100% ясно, предлагаю пример, чтобы показать вам процесс анимации:

Тем не менее, структура является просто неупорядоченным списком. Я создал 2 пустых элемента списка, которые будут использоваться для создания большего количества места сверху и снизу содержимого.

<ul>
<li class="cd-service cd-service-divider"></li>

<li class="cd-service cd-service-1">
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet..........</p>
</li> <!-- cd-service -->

<li><!-- ... --></li>

<li class="cd-service cd-service-divider"></li>
</ul>

 

Добавление стиля

2 цветных прямоугольника внизу были созданы как ::before и ::after псевдоэлементов тела. Как вы можете видеть, я добавил переход CSS3 к одному из них, потому что мы собираемся изменить его цвет в jQuery, пока содержимое прокручивается. Значки всегда ::before селекторами. Поскольку разделительная линия под значками - другой .svg-файл - должна реагировать и изменять ее высоту в соответствии с содержимым, я добавил ее также как псевдоэлемент, с расстоянием от вершины, равным высоте значка.

body::before, body::after {
  /* the 2 underneath colored sections */
  content: '';
  position: fixed;
  /* trick to remove some annoying flickering on webkit browsers */
  width: 89.8%;
  max-width: 1170px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  height: 50%;
  z-index: -1;
}
 
body::before {
  top: 0;
  background-color: #f4bd89;
  transition: all 0.8s;
}
 
body::after {
  top: 50%;
  background-color: #71495b;
}
 
.cd-service {
  position: relative;
  z-index: 2;
  min-height: 50px;
  margin-left: 56px;
  background-color: #3e253c;
  padding: 1em 1em 4em;
}
 
.cd-service::before, .cd-service::after {
  content: '';
  position: absolute;
  width: 56px;
  right: 100%;
  z-index: 2;
}
 
.cd-service::before {
  top: 0;
  height: 50px;
  background-repeat: no-repeat;
}
 
.cd-service::after {
  top: 50px;
  bottom: 0;
  background-image: url("../img/cd-pattern-small.svg");
  background-repeat: repeat-y;
}
 
.cd-service.cd-service-1::before {
  background-image: url("../img/cd-icon-1-small.svg");
}
 
.cd-service.cd-service-2::before {
  background-image: url("../img/cd-icon-2-small.svg");
}
 
.cd-service.cd-service-3::before {
  background-image: url("../img/cd-icon-3-small.svg");
}
 
.cd-service.cd-service-4::before {
  background-image: url("../img/cd-icon-4-small.svg");
}

 

Обработка событий

Дополнительным эффектом, который мы хотели достичь, является изменение цвета заполнения при прокрутке. Чтобы сделать это, для каждого элемента списка .cd-service мы создали класс для элемента body:

body.new-color-1::before {
	background-color: #c06c69;
}
 
body.new-color-2::before {
	background-color: #bf69c0;
}
 
/*other classes .new-color-n here*/

Это означает, что если у вас есть элементы списка .cd-service, вам нужно создать (n-1) классы для тела.

Когда пользователь начинает прокручивать, как только в окне просмотра отображается значок .cd-service-2, мы хотим, чтобы значки, заполняющие цвет, менялись (это первое изменение цвета заполнения), поэтому мы назначаем класс .new-color-1 телу , То же самое делается для всех остальных разделов .cd-service-n.

Наконец, когда в окне просмотра отображается новый .cd-section, мы назначаем ему класс .focus, чтобы выделить его содержимое.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Эффект заливки иконок

Представляю вашему вниманию два генератор градиента на CSS. С помощью онлайн градиент генераторов css Вы сможете создать фон (background) для вашего сайта блога или проекта. Сервисы просты в управлении и имеет интуитивно понятный интерфейс и гибкие настройки которые максимально позволяют получить тот результат который вам необходим.


Эффект заливки иконок

Ссылки для разбивки на страницы просто позволяют пользователям просматривать ваш контент. Действительной альтернативой является бесконечная прокрутка, хотя она имеет сильные и слабые стороны, о которых следует помнить.


Эффект заливки иконок

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


Эффект заливки иконок

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close