CSS 文字圓標教學

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

HTML

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

CSS

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

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

再給文字添加一些樣式

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

完成樣子

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

[……]

閱讀更多

CSS 選擇器,模糊查找匹配元素

CSS選擇器中沒有所謂的「萬用字元(*)」,可以透過一些方式接近模糊查詢方式,查找匹配屬性或值的元素

歸納出幾種用法

下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值

使用範例:

See the Pen
CSS 選擇器,模糊查找匹配元素
by VECTOR.cool (@ann71727)
on CodePen.

[……]

閱讀更多

CSS3 鏡射

<style>

/* 水平鏡射 */
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}

/* 垂直鏡射 */
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
}

</style>

 [……]

閱讀更多