Web Notes Reshipment: CSS

顯示具有 CSS 標籤的文章。顯示所有文章

2015/01/16

CSS垂直&平行置中

new way 1:

.picWrap { position: relative; }

.picWrap img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

======================================================================

new way 2:

.picWrap { position: relative; display: block; }

.picWrap img {
    position: absolute; top: 50%; left: 50%;

    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}

2014/08/04

CSS SHAPE

- cross -

<div id="cross"></div>

#cross { width: 100px; height: 100px; position: relative; }

#cross:before,
#cross:after { content: ""; position: absolute; /*z-index: -1;*/ background: #d00; }

#cross:before { left: 50%; width: 30%; margin-left: -15%; height: 100%; }

#cross:after { top: 50%; height: 30%; margin-top: -15%; width: 100%;}

*****************************************************************************************

2014/03/18

youtube 影片 responsive

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

==========================================================

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

.video-container {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.JbxIKmLI.dpuf

16:9

16:9 => 100:?

100/16 = 6.25

9*6.25 = 56.25

=> 56.25% (padding-bottom)

2014/01/27

關於文字爆出去

-- text-overflow --
文字超出邊界時的處理方法，須配合 overflow: hidden; 和 white-space: nowrap; 使用。可設為：
--> overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

clip：切去超出的部分不顯示，此為預設值。
ellipsis：用 "..." 表示後面還有文字未顯示出來。
ellipsis-word：使用 "a€|" 表示後面還有文字未顯示出來。主要瀏覽器都沒支援此項。
inherit：繼承父元素的特徵值。

***************************************************************************************************

-- white-space --
文字中的空白的處理方法。空白字包括：空白，TAB，跳行字（line feed, carriage return, form feed）。可設為：

normal：連續的空白字都縮減為一個空白，長行遇到右邊界會跳行分為兩行，此為預設值。
pre：不縮減空白字，維持原狀。
pre-line：Firefox, Safari, Chrome 的定義是，連續的空白字會縮減為一個空白；跳行字（newline）保留，會跳行；長行也會跳行。IE 的定義是，連續的跳行會保留。
pre-wrap：Firefox, Safari, Chrome 的定義是，不縮減空白字；跳行字會跳行；長行也會跳行。IE 的定義是，連續的跳行字會縮減為一個跳行。
nowrap：連續的空白字會縮減為一個空白，不跳行。
inherit：繼承父元素的特徵值。

***************************************************************************************************

-- word-wrap --
指定是否可以將完整的長字分為二，以免長字超出邊界。適用於英文，通常英文用音節規則來斷字。可設為：

break-word：可以任意斷字，不依循音節規則。
normal：長字會維持原狀，超出邊界，此為預設值。
inherit：繼承父元素特徵。

使用此項，必須先將 text-wrap 特徵設為 normal 或 suppress。例外的是 IE 沒有 text-wrap，一律可以用此項。

***************************************************************************************************

-- word-break --
word-break 屬性主要是用來設定亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字的斷行規則。

normal Break words according to their usual rules
break-all Lines may break between any two letters
keep-all Breaks are prohibited between pairs of letters

2014/01/02

如何讓 div 維持正方形

如何讓 div維持正方形

利用padding可以吃 width % 的值去推開
這樣寬高就會有相同的依據

EX:
width: 50%;
height: 0;
padding-bottom: 50%; <-- 會以width為基準的20%延伸:

padding-bottom: 75%; /* 4:3 aspect ratio */

也可用 :before 或 :after 去塞一個 padding-bottom: 50%; 的東西

2012/02/08

iPad-Specific CSS

@media only screen and (device-width: 768px) {
/* For general iPad layouts */

Full »

2012/01/20

CSS Browser Hack

/***** Selector Hacks ******/

/* IE6 and below */

* html #uno { color: red }

Full »

2011/12/29

CSS垂直置中

CSS垂直置中

以下共有五種方式

每種使用方式各有其優、缺點，端看自己要置中的內容是「區塊」或是「文字」來取捨。

Full »

2011/04/12

CSS更改滑鼠游標

在某些瀏覽器下欲放上自己設計的滑鼠游標時, 必需要給他第2個值才能work

ex:
div {cursor:url(coin.ico), default;}

2011/01/06

hasLayout

序言:
如果你是一位網頁設計師, 并遵從W3C的網頁規格設計網頁的話, 那麼你一定很頭痛. 因為你漂亮的, 自豪的作品,
在 Internet Explorer 上運行的時候, 不是支離破碎就是慘不忍睹. 為甚麼呢? 因為Internet Explorer
在設計的時候, 沒有完全考慮到W3C國際標準的問題. 所以, 只有在firefox, Safari, Chrome 這些符合W3C
標準的瀏覽器, 你的設計才可以”抬頭做人”. 為了應付IE在顯示網頁的問題(IE Bugs), 很多設計師創造了很多
的hack(美國口語:對付的意思)來補救他們的設計.

Full »

善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

CSS 的 table-layout 屬性有兩個可以設定的值：

automatic - 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )

Full »

當利用CSS hover 產生彈出清單效果時IE6問題

當利用CSS hover 產生彈出清單效果時
例如:
#leftNavi div ul{display:none;}
#leftNavi div:hover ul{display:block;}

Full »

2010/12/01

單一去掉iframe直向或橫向捲軸的方法

我們知道如果IFRAME不要有捲軸出現，在IFRAME裡面加入 SCROLLING="NO" 即可，
但是無法控制只讓直向或橫向捲軸消失，因此以下有個變通的方式，即是透過CSS屬性去控制。

Full »

2010/11/16

隨記

hr 的 text-align 預設值為 center

Full »

2010/10/15

解決chrome字體最小12px限制

div {

-webkit-text-size-adjust:none;

}

將此語法加入要呈現的位置即可

2010/05/31

CSS Scrollbar

2010/04/16

list-style-type CSS2

.cl0 {list-style-type: none;}
.cl1 {list-style-type: disc;}
.cl2 {list-style-type: circle;}

Full »

2010/03/25

ie6, ie7 不認得 inline-block 解決辦法

重複設定元素的 display 兩次, 先設定 *inline-block 再設定 inline,

ie6 與 ie7 即可使用 inline-block

div1{
display:inline-block;
}

div1{
*display:inline; <---*號為hack for ie6 and ie7, 這樣才不影響其他browsers
}

2010/03/09

ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser.

About

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Full »

SEARCH !!

2015/01/16

2014/08/04

2014/03/18

2014/01/27

2014/01/02

2012/02/08

2012/01/20

2011/12/29

2011/04/12

2011/01/06

2010/12/01

2010/11/16

2010/10/15

2010/05/31

2010/04/16

2010/03/25

2010/03/09