:::

5. 用CSS3美化區塊

一、將區塊標題部份改為自動樣板

  1. 區塊標題其實有許多進階變化,例如用進階區塊即可替區塊標題加上圖片或隱藏區塊等效果。

  2. 若要自己去轉換那些功能其實挺複雜,所以,可以用已經寫好的區塊標題樣板檔來取代之。

    <div class="blockHead">
        <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
    </div>

     

  3. 該自動樣板檔只有處理一些特殊技法,並不會對標題外觀有任何處理。

  4. 該樣板會也產生<h3 class="blockTitle">的內容。

二、新增網頁字體

  1. 可在css檔中加入一些不同的網頁字型

    @import url("https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css");

     

  2. 若不夠用,可以至 https://github.com/max32002?tab=repositories 來取得更多字型

  3. 以內海字體為例https://github.com/max32002/naikaifont,只要在css檔加入:

    @font-face {
        font-family: naikaifont;
        src: url(https://cdn.jsdelivr.net/gh/max32002/[email protected]/webfont/NaikaiFont-Regular-Lite.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/[email protected]/webfont/NaikaiFont-Regular-Lite.woff) format("woff");
    }

     

  4. 如此,便可在font-family 中使用名稱為 naikaifont的字體

  5. 範例:https://50plus.cwgv.com.tw/articles/19681

三、關於CSS前綴(或辨識碼)

  1. CSS標準還未確定前,部分瀏覽器已根據草案先實現了部分功能,此時會先加上前綴讓使用者可以先使用該功能,等CSS定案,即可將前綴拿掉。

  2. -msIE-mozFirefox-webkitchromeEdgeSafari-oOpera

  3. 若想知道某些宣告樣式在各個瀏覽器的支援程度如何,可以參考:https://caniuse.com

四、先大致修改區塊樣板樣式

  1. 先讓每個區塊間隔開來,並指定好區塊標題的大小,剩下的細部樣式可後續再來慢慢調整:

    .block { margin-top: 1rem; margin-bottom: 3rem; }
    .blockTitle { height: 2.5rem; font-size: 1.5rem; }

     

五、用圖片或漸層當作文字顏色

  1. 這是利用背景裁剪(background-clip)來做成的效果

    .blockTitle {
        font-family: HanWangMingBlack;
        background-image: linear-gradient(to right, #49533f, #A5BB8F);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    1. 首先,字型先挑選粗一點的字型,例如: HanWangMingBlack

    2. linear-gradient()則是CSS function之一,用來製作漸層效果,第一個參數是設定角度或方向,預設是to bottom(上到下),詳細請參考:http://www.w3big.com/zh-TW/css3/css3-gradients.html

    3. webkit-background-clip並不是一個所有瀏覽器的支持的樣式,所以,請加上前綴,設定text是設定依照文字的形狀來裁剪背景之意。

    4. -webkit-text-fill-color則是用來填入文字顏色,其作用和color一樣,但優先權比color高,我們用之來將文字設為透明,如此,才能看到被剪下的背景。

六、替文字加框

  1. 若想讓文字可以更清楚,加外框是蠻常見作法:

    .blockTitle {
        font-family: naikaifont;
        color: #F5F4E9;
        text-shadow:  0px 2px #36626b, 2px 0px #36626b, -2px 0px #36626b, 0px -2px #36626b, -2px -2px #36626b, 2px 2px #36626b, 2px -2px #36626b, -2px 2px #36626b;
    }
    1. 主要是利用八次各個方向的 text-shadow文字陰影來兜成外框。

  2. -webkit-text-stroke也可以做外框字,不過,該樣式會把框加在文字內緣,並不美觀。

七、讓同一區域的區塊可以輪流套用不同效果

  1. 準備幾張底圖,打算讓文字置中,並套用不同底圖,先將共同的部份設好:

    .blockHead {
        text-align: center;
    }
    
    .blockTitle {
        height: 2.5rem;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        font-family: naikaifont;
        color: #F5F4E9;
    }

     

  2. 當有標題時,height就會生效,height可以設為底圖的高度。若沒有文字,height0,如此可避免標題被隱藏的區塊跑出一個空底圖。

  3. 接著將套用的底圖設定及外框顏色分別做成四個樣式(.bbg1~.bbg4):

    .bbg1 {
        text-shadow: 0px 2px #804454, 2px 0px #804454, -2px 0px #804454, 0px -2px #804454, -2px -2px #804454, 2px 2px #804454, 2px -2px #804454, -2px 2px #804454;
        background: url('../images/bbg1.png') no-repeat ;
    }

     

  4. 配合底色,外框顏色分別設為:#804454#36626b#6b6b1e#3c583d

  5. 底圖設為不重複,並設為從左邊、下方為主來顯示完整底圖圖檔

  6. 在樣板部份,修改xotpl\block.tpl,並利用Smartycycle語法來依序套入不同樣式:

    <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>">
        <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
    </div>

     

八、讓中間區域的標題靠左

  1. 由於底圖並不大,但中間區域頗大,因此標題若置中,文字會跑出底圖之外,因此修正之:

    #page_center .blockHead { text-align: left; padding-left: 1rem; }

     

九、針對手機畫面自動調整標題對齊方式

  1. 在電腦上看目前應該沒什麼問題,但手機模式看會發現標題置中並不美觀,因此,最好是電腦模式下標題置中,但在手機模式下標題可以靠左(類似中間區塊那樣)。

    @media only screen and (max-width: 768px) {
        .blockHead { text-align: left; padding-left: 1rem; }
    }
    1. 利用@media可以定義在某裝置於指定條件下自動套用定義好的樣式

    2. only screen設定僅作用在螢幕上當寬度小於768px時就將標題向左對齊,並空1字。

    3. http://www.w3big.com/zh-TW/cssref/css3-pr-mediaquery.html

十、CSS的擬類別(需注意順序,不然不會有效果

  1. :link 尚未瀏覽過的超鏈結

  2. :visited 已經瀏覽過其內容的超鏈

  3. :hover 滑鼠移到該元件上

  4. :active 滑鼠點下該元件的瞬間

十一、CSS的偽元素 (用::和擬類別做出區隔,但其實一個:也是可以用的。 )

  1. ::first-line 元素中的第一行(僅用於區塊級元素)

  2. ::first-letter 元素中的第一個字(僅用於區塊級元素)

  3. ::before 在元素前(需和content一起使用)

  4. ::after 在元素後插入內容(需和content一起使用)

  5. ::placeholder 元素的佔位符號

  6. ::selection 元素被標記的狀態

十二、替區塊加上設定按鈕

  1. 我們希望若目前的登入身份是有管理權限的,那麼,當滑鼠移過標題時,就顯示設定工具。

  2. 修改xotpl\block.tpl,在引入標題樣板的下方加入按鈕設定:

    <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>">
        <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
        <{if $xoops_isadmin}>
            <a href="<{$xoops_url}>/modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>" class="blocktool"></a>
        <{/if}>
    </div>

     

  3. 記得判斷$xoops_isadmin的值,以確保只有管理員能看到

  4. 區塊設定的連結位置為

    <{$xoops_url}>/modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>

     

  5. 記得加上class樣式,如: blocktool,以便作為CSS挑選器

  6. 暫時不在連結中填入內容,因為我們希望它在特定情況下才出現

十三、利用::before ::after讓網頁元素無中生有

  1. 比較簡單的作法:先至https://www.flaticon.com下載個24x24的圖檔,如:gear.png

  2. 利用::after,搭配 content,在挑選器後面新增該圖檔即可。

    .blockTitle { 略; display: inline-block; }
    .blocktool::after { content: url(../images/gear.png); }

     

  3. 為了讓圖片可以排在標題右邊,標題的顯示模式必須改為 inlineinline-block才行

十四、在CSS中使用FontAwesome圖示

  1. https://fontawesome.com/v4.7.0/icon/cog

  2. 若想在CSS中使用FontAwesome,可以用FontAwesome UniCode來達成。

  3. 每個 FontAwesome的圖示都有對應一個UniCode,一樣利用 content,並於UniCode前加一個 \ 即可。

    .blocktool::after{
        font-family: "FontAwesome";
        content: "\f013";
        color: white;
        font-size: 1.5rem;
        margin-left: 1rem;
    }

     

  4. 由於他是文字,所以,一樣設定大小及顏色,並可套用任何的文字樣式效果。

  5. 若想滑過標題才出現設定按鈕,只要利用:hover即可做到此效果:

    .block:hover .blocktool::after { 略 }

     

十五、CSSposition位置概念

  1. position:static「靜態」這是網頁的預設值。

  2. position:relative 「相對」指的是相對該元素原來所在的位置(下一個元素並不會隨之起舞),可用 topbottomleftright來調整該元素位置。

  3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置(此元素會飄起來,下一個元素會當作它不存在一樣遞補其位置),一樣可用 topbottomleftright來調整該元素位置。position:absolute搭配z-index,可以將元素進行上下排列。一般而言,z-index預設值為0

  4. position:fixed「固定」指的是相對於整個視窗最左上角的位置(此元素也會飄起來,下一個元素一樣當作它不存在而遞補其位置),可用 topbottomleftright來調整該元素位置,不管視窗如何捲動,永遠保持在固定位置(可用來做浮動視窗)。

  5. position:relative包著position:absolute的時候,後者就會以前者的位置為基準,而非整個視窗。

十六、讓滑鼠滑過標題時不再跳動

  1. 先在.blockTitle的上一層.blockHead中加上position:relative

    .blockHead {
        position: relative;
        text-align: center;
    }

     

  2. 然後在.blocktool::after中加入position: absolute即可

    .block:hover .blocktool::after {
        略
        position: absolute;
    }

     

  3. 利用這種方法,可以替區塊加入許多工具喔!例如關閉區塊、或直接連到進階區塊等。


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

23人線上 (8人在瀏覽線上書籍)

會員: 0

訪客: 23

更多…