標籤: css shadow

CSS 文字圓標教學

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

HTML

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

CSS

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

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

再給文字添加一些樣式

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

完成樣子

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

[……]

閱讀更多

[懶人CSS陰影]還在用PS上陰影嗎？用CSS為你的圖片或色塊加一點變化！

在設計網頁時為了不要讓圖片或色塊死板板的，有的人會傻傻的先用Photoshop上陰影再以圖片的格式上傳，今天我們直接為圖片和色塊加上CSS吧。

CSS實在有許多好用之處，今天要來跟大家介紹小編做網站時常常使用的CSS box-shadow！

顏色從淺到深的陰影色塊

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

特殊陰影處理

HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

<div class="box effect2">
<h3>Effect 2</h3>
</div>

<div class="box effect3">
<h3>Effect 3</h3>
</div>

<div class="box effect4">
<h3>Effect 4</h3>
</div>

<div class="box effect5">
<h3>Effect 5</h3>
</div>

<div class="box effect6">
<h3>Effect 6</h3>
</div>

<div class="box effect7">
<h3>Effect 7</h3>
</div>

<div class="box effect8">
<h3>Effect 8</h3>
</div>

CSS

.box h3 {
    text-align: center;
    position: relative;
    top: 80px;
}

.box {
    width: 70%;
    height: 200px;
    background: #FFF;
    margin: 40px auto;
}


/*==================================================
 * Effect 1
 * ===============================================*/

.effect1 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}


/*==================================================
 * Effect 2
 * ===============================================*/

.effect2 {
    position: relative;
}

.effect2:before,
.effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}


/*==================================================
 * Effect 3
 * ===============================================*/

.effect3 {
    position: relative;
}

.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}


/*==================================================
 * Effect 4
 * ===============================================*/

.effect4 {
    position: relative;
}

.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: r[......]
閱讀更多