CSS 彙整 - VECTOR COOL 威得數位行銷

CSS3 灰階

2018-07-19 作者 ann71727

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.gray {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: gray;

}

CSS3 鏡射

2018-07-182018-07-18 作者 ann71727

<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>

<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>

html IE
tag 出現詭異方框

2018-07-122018-07-12 作者 ann71727

客戶反映在IE結尾都有奇怪的框框，原來還有人在用IE阿？

好吧！想辦法解決

原本以為這是邊框，所以天真的想說CSS加個 border:none 就解了，果然是我太天真，完全沒動！！

Google 一下，這似乎跟網路字型的Bug有[……]

CSS 強制換行及強制不換行、強制全部、單詞、單字

2017-12-13 作者 ann71727

介紹三種換行方式

<style>

/* 強制不換行 */
div{
	white-space:nowrap;
}

/* 強制斷行 (英文單詞) */
div{
	word-wrap:break-word;
	word-break:normal;
}

/* 強制英斷行 (英文單字) */
div{
	word-break:break-all;
}

</style>

<style>

/* 強制不換行 */

div{

white-space:nowrap;

}

/* 強制斷行 (英文單詞) */

div{

word-wrap:break-word;

word-break:normal;

}

/* 強制英斷行 (英文單字) */

div{

word-break:break-all;

}

</style>

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

2017-11-122017-11-12 作者 ann71727

HTML提供了一個錨點連結的功能 (anchor tag link)，換頁或不換頁，都可以把瀏覽器卷軸自動捲到錨點位置，但如果網頁上方有一個黏頭的Header (sticky header)，RWD手機版本則習慣使用(sticky header)，Header 懸浮本文之上，可能會把錨點的元素內容遮蔽，這時我們則需要偏移(sticky header)的高度，避免錨點元素被遮蔽。[……]

CSS Calc運算

2017-10-052017-10-05 作者 ann71727

終於是等到這個功能了，CSS3增加了Calc()這個function進行數值運算，大部分用於容器寬度或高度的計算，這讓CSS的開發更快、靈活度更高並增加重複使用的可能性，Calc()還有一個很棒的優點，可以針對不同單位進行運算。

支援運算：

+
加

–
減

*[……]

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

2017-09-122017-09-12 作者 ann71727

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ，雖然jQuery跟CSS選取器(selector)有很多相似之處，但還是有些差異，在CSS中要在重複元素中獲取一個元素是用偽類 [crayon-5c111e2[……]

CSS RWD 響應式 @media 及常用尺寸速查

2018-08-052017-09-11 作者 ann71727

Meta Viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

1	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

CSS @media 參考裝置尺寸：

/* 手機直 */
@media (max-width: 480px) {
}

/* 手機橫 */
@media (max-width: 767px) {
}

/* 平板 */
@media (min-width: 768px) and (max-width: 979px) {
}

/* 平板橫 */
@media (min-width: 980px) {
}

/* 桌機 小於1200 */
@media (max-width: 1139px) {
}

/* 桌機 大於 1200 */
@media (min-width: 1200px) {
}

/* 桌機 大於 1240 */
@media (min-width: 1240px) {
}

/* 手機直 */

@media (max-width: 480px) {

}

/* 手機橫 */

@media (max-width: 767px) {

}

/* 平板 */

@media (min-width: 768px) and (max-width: 979px) {

}

/* 平板橫 */

@media (min-width: 980px) {

}

/* 桌機小於1200 */

@media (max-width: 1139px) {

}

/* 桌機大於 1200 */

@media (min-width: 1200px) {

}

/* 桌機大於 1240 */

@media (min-width: 1240px) {

}

bootstrap 4 – RWD Layout

[crayon-5[……]

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

2017-08-222017-08-16 作者 Autumn

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

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

顏色從淺到深的陰影色塊

[crayon-5c[……]

CSS li float:center 實現li水平居中對齊

2017-10-062015-05-27 作者 ann71727

在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作[……]