• Главная
  • »
  • CSS
  • »
  • CSS: Использование overflow в качестве маски

CSS: Использование overflow в качестве маски

Дата: 12.06.2017 в 10:41, Категория: CSS
  • 2710
  • 6
CSS: Использование overflow в качестве маски

Самое сложное для начинающего HTML-верстальщика — это работа с анимацией. Особенно, в самом начале осилить такие свойства как animation или keyframes, начинающему разработчику бывает довольно непросто. Думаю, многим знакома эта ситуация, когда пользуешься какое-то решением и тебя вроде все устраивает. Но, возникает неожиданная потребность внести какие-то правки, после которых все идёт к чертям. Основная проблема в данной ситуации кроется не только в том, что вы не прочли какие-то книги по HTML, CSS или JS. Проблема кроется в отсутствии самого важного — это практики (кэп). Я, конечно, мог бы описать в данной статье о том, как и на чём практиковаться, но эта статья немного о другом.

Единственное, что я могу вам посоветовать, это разработать свой проект. Нет разницы, что это за проект и какой там будет код, просто начните его разрабатывать. Придумайте идею для вашего проекта и попробуйте её реализовать. Если придумать идею для вас сложней, чем её реализовать, то посетите Behance или Dribble. Итак! Я немного отошёл от темы. В данной статье, я хочу рассказать о том, как создать маску с помощью overflow для нескольких слоёв. У нас будет два слоя, в одном из которых будет анимация при наведении. Я хочу подробно разобрать данную реализации, чтобы начинающим разработчикам было понятно, как создаётся такая анимация. В качестве примера, я решил показать вам то, как я сделал кнопку скачивания файла для одного из проектов. Пример не особо большой, но, я постараюсь разобрать его как можно подробней. Я заранее подготовил макет этой кнопки (изобр. ниже).

Как вы можете заметить, слева имеется синий круг. В этом слое, у нас будут находиться 2 иконки. Иконка «archive» и иконка «download». При наведении на этот слой, иконка «archive» будет спускаться, то есть исчезать из области видимости. Сверху на центральную позицию, будет становиться иконка «download».

# Как это происходит?

Прежде чем использовать такую или подобную анимацию в своих проектах, вам нужно понять «как это происходит». Чтобы поэтапно реализовать эту анимацию, нужно определить точку начала и конца каждого элемента. Прежде всего, создадим область в которой будет реализована анимация. Это будет наш синий круг. [codepen=archakov,RgaxzM]

# Поэтапная реализация

    .download-btn__icon {
        border-radius: 50%;
        background-color: #3baaf5;
        width: 48px;
        height: 48px;
        overflow: hidden;
        position: relative;
    }

Давайте теперь подробно разберем код выше:

  • border-radius: 50%; - делаем полное округление для данного элемента.
  • background-color: #3baaf5; - задаем цвет фона (синий).
  • width: 48px; height: 48px; - ширина и высота по 48px
  • overflow: hidden; - запрещаем внутренним элементам выходить за пределы допустимой области (48px).
  • position: relative; - устанавливаем положение элемента относительно его исходного места.

Чтобы наглядно продемонстрировать вам то, как будут задаваться все эти свойства, посмотрите гифку ниже.

Отмечу, что код не работает точь-в-точь, как на гифке выше. Последовательность установки свойств, не играет никакой роли на то, как будет выглядеть элемент. Отлично! Теперь мы поняли как будет выглядеть наш круг и какие свойства он имеет. Далее, нужно вставить внутрь этого элемента, две иконки. Иконка «download» и «archive». Иконки будут формата SVG.

Иконки я скачиваю с сайта iconfinder.com. Оттуда же я взял эти две иконки, которые скоро нам пригодятся. Элемент у нас есть (синий круг), теперь вытаскиваем код из каждой SVG картинки и вставляем его внутрь нашего элемента.

<svg id="archive-icon" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1088 832q0-26-19-45t-45-19h-256q-26 0-45 19t-19 45 19 45 45 19h256q26 0 45-19t19-45zm576-192v960q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-960q0-26 19-45t45-19h1408q26 0 45 19t19 45zm64-448v256q0 26-19 45t-45 19h-1536q-26 0-45-19t-19-45v-256q0-26 19-45t45-19h1536q26 0 45 19t19 45z"/></svg>
    <svg id="download-icon" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-383.000000, -213.000000)"><g id="file-download" transform="translate(383.000000, 213.500000)"><path d="M14,6 L10,6 L10,0 L4,0 L4,6 L0,6 L7,13 L14,6 L14,6 Z M0,15 L0,17 L14,17 L14,15 L0,15 L0,15 Z" id="Shape"/></g></g></g></svg>

Я убрал лишнее из <svg> элементов и задал каждому свой уникальный идентификатор (#download-icon и archive-icon). Чтобы иконки могли позиционироваться в любую точку без смещения соседних элементов, нам нужно установить каждому <svg> элементу, свойство position: absolute. Только после установки этого свойство, элемент будет абсолютно позиционироваться вне зависимости от того, есть ли рядом с ним элемент или нет.

.download-btn__icon svg {
        position: absolute;
}

Но, не все так просто. Чтобы эти иконки не только позиционировались абсолютно допустимой области, но и были по центру, нам нужно указать свойства: width (ширину), height (высоту), left (положение по левому краю) и top (положение по верхнему краю). Чтобы придать плавность каждому свойству, требуется указать свойство transform (трансформирование), для более точного центрирования элемента. Ну и не забываем, что нам нужна плавность (transition).

.download-btn__icon svg {
        position: absolute;
        width: 18px;
        height: 18px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s;
}

Вот таким образом, у нас и центрируются SVG иконки. Теперь, когда наши иконки находятся по центру, нужно каждую из них расставить так, чтобы при наведении, иконка загрузки появлялся сверху вниз, а иконка архива, с центра вниз. Мы уже ограничили область для нашей анимации, теперь нужно установить псевдокласс на родительский элемент, то есть на синий круг. Давайте установим псевдокласс :hover для класса .download-btn__icon так, что если мы наводим на этот элемент, иконка архива, уходит плавно вниз.

.download-btn__icon:hover svg#archive-icon {
        top: 100%;
        opacity: 0;
}

При наведении, свойство спускается top = 100%, а прозрачность элемента opacity = 0. То есть, наш элемент плавно спускается и исчезает.

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

.download-btn__icon svg#download-icon {
        top: 0%;
        opacity: 0;
}
.download-btn__icon:hover svg#download-icon {
        top: 50%;
        opacity: 1;
}

Начальная позиция иконки загрузки, будет top = 0%. При наведении на синий круг, top = 50%, то есть в центре.

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

Как вы можете заметить, я выделил края синего круга — красным цветом. Это как вы прочитали в самой картинке — overflow. То есть, это допустимая область для внутренних элементов. На гифке ниже поочерёдно продемонстрированы все применяемые свойства.

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

P.S.: Как оказалось, подобные статьи писать довольно не просто. Думаю, будут писать такой подробный разбор раз в месяц. Есть ещё многое из того, что я хотел разобрать.