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

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

Comment

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 | 下載測試頁面

Comment

Multi-Level Drop-Down Menu for CSS


 

STYLE CSS

CSS設定裡/*---show---*/註解中的內容為下拉選單主要呈現的效果。

(/*---show---*/之外的CSS樣式可自行更換。本人製作最簡單的格式給各位,為在教學使用上較易理解。)

Comment

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

Comment

關閉Chrome 12px字體大小限制

網頁設計時檢查遊覽器相容,發現設定12px以下字體,在goole chrome遊覽器卻都無效,上網查了一下結果,原來chrome遊覽器的預設限制最小字體為12px。
查詢了一下解決方法,就如下面的簡單語法,將chrome字體大小的限制關閉。

*PC桌面版的Chrome27正式取消了-webkit-文字大小調整屬性的支持,實際上是修正了原有的錯誤
 

-webkit-text-size-adjust:none;

 

Comment

Copyright © 2018 ucamc