Область показа

viewbox
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно управлять вращением областью показа.

Описание

Область показа позволяет изменять отображение объекта путем наложения на него дополнительных слоев

Структура

Область показа состоит из обертки области и слоев, которые размещаются внутри нее. Это позволяет накладывать области друг на друга, изменяя внешний вид

Я внутри!
<div class="relative overflow-hidden">
    <img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-full">
    <div class="w-full h-full absolute overflow-hidden top-0 left-0 bg-p1"></div>
    <div class="w-full h-full absolute overflow-hidden top-0 left-0">
        <div class="w-full h-full flex items-cross-center content-main-center color-white text-4 bg-black bg-opacity-3">Я внутри!</div>
    </div>
</div>

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

Смотри
Как
Красиво
Получилось!
<div class="grid grid-col-2 gap-4">
    <div class="relative overflow-hidden">
        <img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-full">
        <div class="w-full h-full absolute overflow-hidden top-0 left-0 bg-p2"></div>
        <div class="w-full h-full absolute overflow-hidden top-0 left-0">
            <div class="w-full h-full flex items-cross-center content-main-center color-white text-4 bg-red bg-opacity-3">Смотри</div>
        </div>
    </div>
    <div class="relative overflow-hidden">
        <img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-full">
        <div class="w-full h-full absolute overflow-hidden top-0 left-0 bg-p15"></div>
        <div class="w-full h-full absolute overflow-hidden top-0 left-0">
            <div class="w-full h-full flex items-cross-center content-main-center color-white text-4 bg-blue-6 bg-opacity-8">Как</div>
        </div>
    </div>
    <div class="relative overflow-hidden">
        <img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-full">
        <div class="w-full h-full absolute overflow-hidden top-0 left-0">
            <div class="w-full h-full flex items-cross-center content-main-center text-4 color-blue-grey bg-white bg-opacity-9">Красиво</div>
        </div>
    </div>
    <div class="relative overflow-hidden">
        <img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-full">
        <div class="w-full h-full absolute overflow-hidden top-0 left-0">
            <div class="w-full h-full flex items-cross-center content-main-center color-text-secondary text-4 bg-yellow-6 bg-opacity-8">Получилось!</div>
        </div>
    </div>
</div>

Видео

Вы можете разместить фоновое видео в области показа.

Текст над видео
<div class="relative overflow-hidden">
    <video poster="../../video/video.mp4" autoplay="true" loop="true" muted="true" playsinline="true" class="w-full">
        <source type="video/webm" src="./animal.mp4">
        <source type="video/mp4" src="./animal.mp4">
    </video>
    <div class="w-full h-full absolute overflow-hidden top-0 left-0 transition">
        <div class="w-full h-full flex items-cross-center content-main-center color-white text-4">Текст над видео</div>
    </div>
</div>

Отображение при наведении

Используйте класс для плавности перехода используйте класс transition для дополнительных слоев.

Я внутри!
<div class="relative overflow-hidden">
    <img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-full">
    <div class="w-full h-full absolute overflow-hidden top-0 left-0 bg-p1 transition"></div>
    <div class="w-full h-full absolute overflow-hidden top-0 left-0 transition bg-black bg-opacity-3 hover:bg-opacity-0">
        <div class="w-full h-full flex items-cross-center content-main-center color-white text-4">Я внутри!</div>
    </div>
</div>

Адаптивность

Для установки адаптивности области показа, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью