CSS 文字圓標教學

圓標是網頁表現手法很常見的一種方式,尤其電商,很常見用來突顯商品特價 產品 或新產品的標籤,以下介紹圓標的製作方式

css 文字圓標

HTML

先建立一個兩層結構的HTML如下,圓標文字包裹在內層div中

<div class="circle">
    <div>TEST</div>
</div>

CSS

未方便辨識,先把兩個容器背景設為綠色及紅色的純色,這樣就能清楚了解容器範圍,並且先製作外層容器

/* 圓標外框 */
.circle {
    display: block;
    float: left;
    position: relative;
    width: 5rem;
    height: 5rem;
    background-color: green;
    display: block;
    overflow: hidden;
    padding: 5%;
    margin: 1rem;
    border-radius: 50%;
}

接著用 CSS3.0 水平垂直居中的技巧,讓文字固定於正中間

/* 圓標內容 */
.circle>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

再給文字添加一些樣式

/* 圓標內容 */
.circle>div {
    background-color: red;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

透過顏色的區分,很容易看到兩個容器的關係,最後再慢慢調整文字及圓表尺寸顏色等樣式,以下是本教學的範例

完成樣子

See the Pen 文字圓標 by VECTOR.cool 威得數位 (@ann71727) on CodePen.

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

相關文章:

READ  CSS get an element use :nth-child() not :eq()

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料