Как правильно создать и использовать маску?

Question

[lightalex]

Всем привет!
Есть макет слайдера - hkar.ru/DWXV
Понадобилось сделать левую часть через маски (то есть исходником будет полноценное изображение, а не заранее обрезанное)
Как правильно создать, а затем наложить маску?

Answer 1

[hime2]

А в чем проблема ? Вариантов куча, можно в яндексе посмотреть.

1.Просто создать 2 блока, позиционирование их наложить друг на друга и через z-index уже управлять, кто выше, кто ниже. Самый простой варианты.

2.Псевдоклассы, можно через них. собственно (:before и :after) не забываем указывать свойство контейнер.
3. Что еще на ум приходит, js canvas.
4. css clip-path.
5. Свойство mask
6. Вот ссылки: читай и на хабре
Способов куча, какой именно вам подойдет, я не знаю.
Наберите просто в яндексе, работа с масками css

У каждого способа свои положительные стороны и недостатки.
Можно выбрать js, проблем особых не будет, но самое практичное, это 1й вариант.
Я использую много какие, чаще всего это простая вставка через css, в таком случаи манипуляции ограничены. Так что надо с начала помещать svg а потом через css пилить

Comments

[lightalex]

Я не совсем понимаю как можно сделать левую часть с помощью первого и второго способа
Можете объяснить?
Возможно вы не совсем поняли что мне требуется

[hime2]

Да не, я понял. Если страничка генерируется динамически, то проблем вообще нет.
Что сложно, писать я уже не буду, спать ухожу.
Но суть такова





.content{
position: relative ;
z-index:1;
/*указываем все остальное, размеры итд*/
}
.mask{
position:absolute;
z-index:3;
background: url();
/*указываем все остальное, размеры, позиционирование, итд*/
}
.img{
position: relative ;
z-index:2;
/*указываем все остальное, размеры итд*/
}

второй:





Прописываем все то, только для
.img:before{
content:url(mask.png);
position:absolute;
z-index:3;
/*если родителям не задать position: relative ; вообще не сработает*/
}

да вроде как все.
svg лучше в base64, но тогда вес увеличится.
так что надо брать 1й вариант и запихивать туда, а то если будешь подгружать через css, манипулировать не получится. Dom и все такое

[hime2]

сучка, всю разметку снес.

[hime2]

короче не хочет он, даже с тегом code

[hime2]

пилится контейнер, что бы объединить все, он будет родителем. дальше создается див для маски, закрывается, сам по себе див пустой ну и дальше новые дивы для картинок, можно для каждой картинки свой див, можно все картинки в один див, от сайдера зависит.

[hime2]

ты css не знаешь