CSS文字垂直置中圖片文字對齊align-self: center

CSS圖片垂直至中與文字對齊指的是什麼意思??如下圖顯示,文字自動對齊圖片中間。

使用CSS排版類似以下圖片與文字版面時,通常會使用圖片向左浮動後,圖片就會因為脫離區塊,文字就會靠上圖片。這樣的情況文字是靠最上層區塊,邊緣開始排列下來,有時在設計上的需求並不理想。

Posted in CSS

Continue Reading

Comment

CSS3 蘋果官網範例文字隱藏color: transparent

CSS3可對顏色做透明,也就是說你在設計網頁上,想要將文字隱藏起來可使用color: transparent這個方法。

蘋果官方網站在CSS設計上,下圖紅色區塊,也是使用這個方式將連結文字隱藏,在對區塊設備背景圖。達到網頁內容有文字,對搜尋有幫助,但在視覺呈現上使用較有彈性的,圖片文字做為背景顯示。

Posted in CSS

Continue Reading

Comment

CSS3 print 列印紙張大小分頁邊框大小方法

CSS3列印解決許多問題,如@media print可對列印頁面做不同的CSS顯示樣子,設定邊框與頁輸出列印的紙張大小調用,都可以很客製化的去製作所需要的呈現的列印頁面,並且想讓某段落分到下一個頁面,也可用pag-break-after:always;,強制分頁。

以下簡單的範例展示這些CSS3很棒的功能。

<style>
@page {
 margin: 1cm; /*print邊界*/
 size:210mm 148mm; /*列印紙張大小*/
	}
	.print{
	page-break-after:always; /*print分頁面*/
	}
	@media print{
	.imgs{
	width: 100px;
	}
	}
</style>

範例展示:(可按下遊覽器列印來預覽列印頁面結果)

Demo | 下載測試頁面

Posted in CSS

Comment

使嵌入的內容工作在響應式設計:Responsive YouTube Vimeo Google Map Embed

在網頁上崁入YouTube iframe視頻時遇到了一個小問題,我需要在YouTube視頻大小取決於100%自動縮放,好使得我的網頁RWD設計能完整呈現。但是當我加入了嵌入代碼,視頻有一個固定的高度和寬度,你可能會認為設定CSS iframe width:100%寬度,視頻就會依照這樣設定,自動向周圍的容器調整,這好了!事實並非如此,寬度是可以100%自動縮放,但是高度就是沒辦法自動100%縮放。

Posted in CSS

Continue Reading

Comment

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses