Как сделать дырку в любом элементе сайта при помощи CSS. Полупрозрачность частей фото, видео, текста

Как сделать дырку в любом элементе сайта при помощи CSS. Полупрозрачность частей фото, видео, текста 🏆 Мой СУПЕР-Курс по программированию в Тильде: Курс-ПРОГРАММИСТА-на-TILDA-от-Чайника-до-ПРОФИ-за-2-часа-p583848367 Скорая помощь по Тильде (и не только): Разовая-консультация-1-час-p304431003 ================= ЗАРАБАТЫВАЙТЕ НА МОИХ ВИДЕО: ОПИСАНИЕ: ================= В этом ролике я покажу как делать дырки в любых элементах сайта. Это могут быть прямоугольные дырки или круглые или овальные или вот такие сложные чередования полосок, на которые можно порезать элемент. В качестве элемента может быть любой рисунок, фотография, просто закрашенный цветной блок и даже текст и даже видео. Способ годится для любых сайтов, где Вы имеете доступ к исправлению программного кода. Я покажу на примере Тильды, но у Вас это может быть Wordpress, Joomla, Битрикс – всё что угодно. Суть способа заключается в том, что мы накладываем на объект маску, которая придаёт прозрачность отдельным областям объекта. В отличие от реальной жизни когда мы закрываем маской лицо, здесь всё наоборот: то есть где маска непрозрачная, там объект будет виден, а где маска прозрачная, там и объект будет прозрачный. Реализуется это очень простым программным кодом, а именно – с помощью CSS-свойства mask-image, в котором используется градиент. Вот накидал я в ZERO-блоке Тильды разные элементы, и в чистом виде они выглядят обычно. Добавляем блок Т123 – HTML-код, и туда добавляем новый стиль. Назовём его hole – (типа по-английски – дырка) и чтобы задать этому стилю свойство mask-image, пишем его в фигурных скобках. А далее в параметрах свойства mask-image указываем что это будет линейный градиент - to right – то есть слева направо, начинается маска чёрной (то есть – black) в нулевой позиции, и она будет такой же чёрной (а значит - непрозрачной) до 20-ти пикселей от начала. То есть получится что начиная от левого края все 20 пикселей нашего элемента будут непрозрачными, и мы будем видеть этот кусок элемента (неважно что за элемент – фотография, видео или текст). Далее начинается прозрачный участок, поэтому указываем transparent (по-английски – это значит прозрачный), и участок этот начинается тут же, на 20-ти пикселях от левого края. Для разнообразия покажу Вам что можно использовать не только пиксели, но и проценты, и продлим этот прозрачный участок например до 80-ти процентов ширины нашего элемента. Ну и оставшиеся 20 процентов пусть будут снова непрозрачными, то есть, пишем опять black, начинаем на 80-ти процентах и заканчиваем на 100. Таким образом мы прошли всю ширину нашего элемента слева направо и указали на каких участках он будет непрозрачным, а на каких – прозрачным и получили два непрозрачных края – слева и справа – и прозрачную середину. То же самое надо сделать сверху вниз, чтобы сделать непрозрачными верхний и нижний края. Поэтому ставим запятую и добавляем линейный градиент, направленный to bottom – то есть сверху вниз. И в нём также указываем непрозрачные и прозрачные области. Закрываем всё это точкой с запятой – и наша маска готова! Обратите внимание: если Вы делаете это на Тильде, то Тильда все свои элементы оборачивает в блоки, поэтому надо вот здесь дописать div, потом всё вот это скопировать и в копии div заменить на img. Если Вы этого не сделаете, то работать будет, но криво. Например, когда назначите анимацию своим элементам, то будут глюки. А с такой конструкцией всё будет работать прекрасно. Осталось нашим элементам присвоить созданный стиль. Заходим в редактирование ZERO-блока, правой клавишей мыши кликаем на нужном элементе и выбираем пункт Add CSS Class Name – добавить имя CSS-класса. Справа появляется окошко, которого раньше не было, и туда вписываем имя нашего стиля hole. Сохраняем, публикуем – и получаем дырявые элементы. Ключевые слова: дырка в тексте дырка в изображении дырка в видео полупрозрачный текст полупрозрачное изображение полупрозрачное видео полупрозрачность элементов полупрозрачный сайт вырезать текст вырезать изображение вырезать видео css полупрозрачность градиент css градиент wordpress градиент битрикс градиент joomla градиент zero блок градиент в тильде