內容遮罩 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask">
        <div class="ts-center">
            <div class="ts-loading is-large" style="color: #FFF"></div>
        </div>
    </div>
</div>

概要

遮罩預設會是覆蓋整個父容器的大小，但也可以指定只遮蔽某半部份。妥善地與內容區塊搭配可以更改內容文字的對齊位置。

外觀

半部的

遮罩可以處於父容器的上、中、下部份。

置上遮罩

然後這裡會放一段文字。

置中遮罩

然後這裡會放一段文字。

置底遮罩

然後這裡會放一段文字。

<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-top">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置上遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-middle">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置中遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-bottom">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置底遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>

淡化的

遮罩可以處於父容器的上、中、下部份。

置上遮罩

然後這裡會放一段文字。

置底遮罩

然後這裡會放一段文字。

<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-faded is-top">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置上遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-faded is-bottom">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置底遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>

次要的

沒有背景的遮罩會顯得不重要，但可以用來呈現內容在某些物件上。

限時特價

現在購買這個蛋糕只需要新台幣 3,000 元！

<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content" style="color: #333;">
            <div class="ts-header">限時特價</div>
            現在購買這個蛋糕只需要新台幣 3,000 元！
        </div>
    </div>
</div>

模糊的

被遮蔽的內容能夠以模糊化處理。

<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-blurring"></div>
</div>

組合應用

關閉按鈕

透過搭配遮罩與關閉按鈕可以讓圖片的右上角有個常見的移除、關閉動作。

<div class="ts-image is-small is-rounded">
    <img src="image.png">
    <div class="ts-mask is-secondary is-top">
        <div class="ts-content is-compact is-end-aligned" style="line-height: 1;">
            <button class="ts-close"></button>
        </div>
    </div>
</div>

附屬資訊

圖片的右下角可以擺放時間或是檔案大小。

32 KB

<div class="ts-image is-small is-rounded">
    <img src="image.png">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content is-compact is-end-aligned">
            <div class="ts-badge">32 KB</div>
        </div>
    </div>
</div>