徐嘉裕(Neil Hsu)的工作心得網誌!

之前寫過一篇【 用CSS做出來一個文字漸層+文字白框+文字陰影的LOGO區塊，CSS最終解法並符合無障礙 】的工作心得，但經過多次實際驗證，filter: drop-shadow方法雖然較為美觀，但在行動瀏覽或是平板，容易觸發 GPU 合成層，導致版面異常(畫面上下空白)，裝置發燙等耗電等問題，因此經改良後，改用CSS LOGO 描邊陰影字工法能維持與原本 filter: drop-shadow相同的效果，且手機平版不會異常，方法如下： 以下是使用-webkit-text-stroke/text-shadow做出來的文字效果，幾乎能90%還原PSD設計效果 文字的PHP常數增加data-storke設定 define('_THEME_LOGO_02','<div class="logo_01_box" aria-hidden="true" tabindex="-1" data-storke="桃園市" >桃園市</div><div class="logo_02_box" aria-hidden="true" tabindex="-1" data-storke="快樂" >快樂</div><div class="logo_03_box" aria-hidden="true" tabindex="-1" data-storke="國民小學" >國民小學</div>'); 注意： aria-hidden="true"：視覺文字不給讀報軟體讀。 - tabindex="-1"：避免視覺文字進入 TAB 流。 data-storke：提供 CSS content:attr(data-storke); 使用。 外層已有可讀 aria-label 或 sr-only，不要讓同一段校名被讀兩次。 CSS 核心寫法 #toplogobox{ position:relative; width:980p...

由於原本Google提供的@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&display=swap'); 會有阻塞渲染問題，導致 CSS 檔案載入變慢，瀏覽器必須先下載完 CSS，再解析到 @import，再去下載字體，這會增加網頁出現「空白字體（FOIT）」的時間。 基於效能優化，2026年建議改用CSS的@font-face自訂字體方法，也就是把字體放在自己的伺服器讓用戶載入網站字形，效能比@import方法要好，穩定性也更高，以下是完整建立@font-face方法說明。 1、先去fonts Google選擇需要的開源字體並下載 https://fonts.google.com/ 2、下載回來後解壓縮字形檔，因該是.ttf格式，建議改成 woff2格式會「比較穩」 .woff2 是現代瀏覽器標準壓縮過（小很多）Google Fonts 主力格式，以下網站可以更改字形副檔名格式 https://cloudconvert.com/ 點選Select File再選擇From my computer 選擇電腦中要改檔案的.ttf上傳後，選擇改為 woff2 Convert後等轉換完成，將.woff2 下載回來 3、在自己網站根目錄建一個fonts資料夾，然後吧字形檔貼入(例如cwTeXHei.woff2)，接者再fonts資料夾中建一個.htaccess 貼上以下防熱連設定，避免字形資源被人拿去白漂 RewriteEngine On # 只處理字型檔 RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC] # 空 referer 放行：直接開檔、本地測試、某些瀏覽器情境 RewriteCond expr "%{HTTP_REFERER} == ''" RewriteRule .* - [L] # localhost / 127.0.0.1 放行：只在目前主機就是本地端時成立 RewriteCond %{REQUEST_URI} \.(woff2|woff|ttf|otf)$ [NC] RewriteCond %{HTTP_HOST} ^(localhos...

網站符合無障礙已經是當今的趨勢了，所以在設計LOGO動畫上不能再用傳統的canvas動畫，因為圖片沒版法自流動，無法符合無障礙AA的CRTL+200放大版面流動效果，只能全部改為CSS+純文字，問題不是在動畫，而是如何用CSS至少能做出70%能像PSD圖檔那樣的文字效果，美觀也是要兼顧，經過努力研究與資料參考，終於寫出來這個【文字漸層+文字白框+文字陰影】CSS效果，如下圖： 以下就是整個代碼結構 透過F12撈出來的HTML結構 <div id="logoimgbox2" aria-label="桃園市立富岡國民中學" > <span aria-hidden="true" tabindex="-1" class="logo_01" data-storke="桃園市立" >桃園市立</span> 略.......................... </div> 說明 aria-label是給讀報軟體用的讀報資訊 aria-hidden="true" tabindex="-1" 是讓讀報軟體不要讀取容器中的文字，因為用了 ::before建構一個文字在底層，同樣文字被讀報兩次會被列缺失 data-storke是給CSS ::before的: attr(data-storke);用的 以下為CSS代碼 #logoimgbox2 {     position: absolute;     top: 44px;     left: 174px;     color: #181818;     font-size: 290%;     word-break: break-all;     font-family: Noto Sans TC;     font-weight: 600;     filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .5));  // 文字陰影(黑色)     letter-spacing: 0.6rem; } #logoimgbox2 .logo_...

今天要說的這個功能其實就跟FB粉絲團管理後台的左右收合選單是一樣的原理，也就是當選單開啟時，在選單以外的任何地方發生點擊事件觸發選單收合，但於選單內發生的點擊不產生作用，除非點選關閉按鈕，像下圖這樣 這裡分享一個好用的jQuery  function，原生的code是這樣 $(document).mouseup(function (e) { var container =$("#leftmenu"); // 這邊放你想要排除的區塊 if (!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } }); 當點擊發生在#leftmenu以外的地方就會關閉區塊，但會有一個問題，如果使用css動畫效果時(滑動/移動)，不管是開啟還是關閉任意點擊，動畫一樣會被觸發，這樣效果上就會有問題了，所以做了以下調整! $(this).mouseup(function(e) { if ($("#leftmenu").css("left") == '0px') {  //以開啟時的left的位置做判斷 var container = $("#leftmenu"); // 這邊放你想要排除的區塊 if (!container.is(e.target) && container.has(e.target).length === 0) { $("#leftmenu").css({ "animation-name": "leftclose", "left": "-350px"  //關閉時的left的位置 }); } } }); 紅字部分增加了以css樣式的狀態為判斷依據，這裡用 0px 表示選單是開啟狀態，點擊任意區塊可以出觸發code關閉選單，反之選單為收合狀態時left為 -350px...

在做網頁編排最常見的問題就是CSS的list-style-type無法產生中文數字如一、二、三，如果直接吧內文加上中文數字沒段行還好，字太多時會分切兩行，第二行的文字開頭會對齊左邊基線，像下圖這樣 如果有強迫症的人看了會很不舒服，解決方法就是吧內文的一、二、三拿掉，然後再標題的dt標籤用before建構內容+nth-child()判斷列數產生一、二、三，就可以做出像以下的排版方式，第二行由數字後開始顯示。 這樣就美觀多了~遇到處女座的客戶也不會有問題，製作方法如下 1、HTM:結構吧內文標題的一、二、三拿掉 (紅字為標題) <dl> <dt>以學生為中心：發展以學生為中心，教學優先的核心價值。培養學生新三好運動。</dt> <dd> 1.把書讀好：養成終生學習的能力<br /> 2.身要練好：養成終生運動的能力<br /> 3.人要做好：養成終生反省的能力 </dd> <dt>以專業為依歸：教師有專業、行政有效能。</dt> <dd> 1.活力行政：力持「依法行政、穩健成長」的經營要領。<br /> 2.專業教師：提升教師教學專業能力，形塑專業形象。<br /> 3.建立專業社群之學校文化，建立團隊學習機制，以專業對話、團隊學習的機制，落實教學品質保證。 </dd> <dt>愛、榜樣與熱誠：打造「溫馨校園、全人教育、終身學習」的辦學環境。</dt> </dl> 2、CSS部分加上以下CODE dt{ position: relative; font-size: 115%; padding: 10px 0px 10px 50px; color: #174960; line-height: 170%; } dt:nth-child(1)::before{ position: absolute; left: 0px; content:"一、"; } dt:nth-child(3)::before{ position: absolute; left: 0px; content:"二...

 如果要做一個像下圖這樣的風車順時鐘一直重複選轉 可以用以下的CSS方法達成： HTML結構 <div id="bottompagerimg"> <div id='windmillbox01'></div> //旋轉風車圖片 <div id='windmillbox02'></div>  //底下支架 </div>   CSS結構 #bottompagerimg {  //物件父層BOX設定 position: absolute; width: 282px; height: 306px; right: 89px; top: -289px; z-index: 20; } #windmillbox01{  //風車設定 position: absolute; top: 0px; width: 276px; height: 276px; background: url(../../img/blocks/shiangan_46.png) no-repeat left top; animation-duration: 3.5s; /*執行時間*/ animation-fill-mode: forwards;    animation-name: windmillbox; animation-timing-function: linear;  /*相同的速度*/ animation-iteration-count: infinite;  /*動畫重複執行*/ z-index: 5; } @keyframes windmillbox {  //風車動畫 0% { transform:rotate(0deg); } 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } } #windmillbox02{   //風車支架設定 position: absolute;  width: 20px; height: 120px; bottom...

CSS物件垂直置中如果是以前只能用table td屬性中的vertical-align: middle;來定義，後來有CSS3可以透過假表格( display:table-cell;)吧div指定為table屬性後使用vertical-align: middle;但我覺得還是非常不好用，這裡分享兩個css3物件垂直置中的方法讓大家參考一下! 例如我們要做像以下的標題樣式 如果文字多顯示兩行，文字少顯示一行，但都必須垂直置中。 HTML結構  <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div></div>  <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字</a></div></div> 方法1，使用transform來垂直置中 transform CSS 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。 參考資料來源： https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform #titlebox{ position: relative; height: 132px; background: #ffffff url(../../img/unit/) no-repeat left top; text-align: center; font-size: 200%; overflow: hidden; } #titlebox div{ position: relative; top:50%; transform:translateY(-50%); padding: 0px 20px; max-height:105px; overflow: hi...

如果要用jQuery的mouseenter(滑鼠滑入)及mouseleave(滑鼠滑出)來執行物件動畫，會遇到一個問題，假使mouseenter時物件因該要跑到left：80px的位置才算動畫完成，mouseenter則回到left：0px的位置，但在動畫未執行完成user又快速的在執行區塊滑入滑出，就會變成動畫亂跳的情況!! 舉例來說，像下面這張圖三個物件是尚未mouseenter觸發前的狀態 滑鼠滑入其中一個按鈕會觸發mouseenter動畫事件，物件往左上移動 滑鼠滑出執行區會觸發mouseleave動畫事件，物件往右下移動，返回原本位置 js-code應該是這樣 //mouseenter $("body").on("mouseenter", "#indexblocksbox01", function (){ $(this).css("cursor", "pointer"); $(this).css({"animation-name":"indexbox1","animation-duration":"0.4s","left":"160px","top":"53px"}); $("#title01btn").css({"animation-name":"indexbox2","animation-duration":"0.4s","background-color":"#FFFFFF","color":"#E77C00"}); }) //mouseleave $("body").on("mouseleave", " #indexblocksbox01", function (){ $(this).css("cursor", "...

在開發不規則佈景時需要用到隨物件調整CSS的top位置的功能，原本都是用JQuery計算在輸出的，後來發現原來css也能做數值運算，用calc() 這樣就能在smarty迴圈中定義的css並給予計算，然後自動調整物件的top位置，基本上來說只要式css的物件樣式都能計算 例如： top: calc(60px + <{$a}>px); <{$a}>為迴圈數預設為1，這樣每回圈一次top的數值+1輸出即為61,62,63...... 也還能作其他的計算 width: calc(50% + 8px) /* 意思是 50% 的寬度 + 上 8px */ width: calc(50% + -8px) /* 意思是 50% 的寬度 + 上 -8px，也等於 '50% - 8px' */ +：加 -：減 *：乘。其中一個運算參數必須是數字 (number) /：除。除數必須是數字，除數不可為零，會造成 HTML 解析錯誤。 有需要的朋友參考看看! 參考教學： https://5xruby.tw/posts/css-calc/ 工作心得撰寫： 徐嘉裕 Neil hsu

CSS的nth-child其實是很好用的，但唯一的限制是指定的物件必須為相連，而且無法對子物件做樣式設定，例如以下結構就無法用nth-child來定義.thumbnail的樣式! <ul class="row"> <li class="col-md-4"> <div class="thumbnail"><img>......略</div> </li> <li class="col-md-4"> <div class="thumbnail"><img>......略</div> </li> <li class="col-md-4"> <div class="thumbnail"><img>......略</div> </li> </ul> 物件必須相連，nth-child是用物件的順序來定義樣式的，如果要做以下的效果固定迴圈3個區塊3種樣式用nth-child是無法實現的!! 當然是還有解決方法，Xoops是使用smarty樣板引擎，在foreach裡面用<{cycle values="box01,box02,box03"}>來定義class也是可以，但如果有做了AJAX的分類切換功能，那被切換的頁面是讀ajax.php，所以smarty的cycle又不能用了，無法兼顧。 最終的解決辦法還是要靠PHP，利用迴圈吧固定1.2.3的倍數整除後回傳數值，然後再輸出到樣板或直接輸出PHP上，這樣就沒問題了!寫了一個自動分3區塊樣式的function有需要的朋友參考看看! //PHP-CODE function blocksclassbox($key="",$i="",$type="",$prefix=""){ $nthchilds="...

最近需要幫客戶做一個jQuery區塊特效，就是點了按鈕左區塊會往左滑出內容區，然後再點一次按鈕左區塊又會往右滑回內容區， 這裡比較特殊工法的是利用修改name值來判斷區塊開啟還是關閉，這樣也能使用.css()來控制區塊的移動特效，方法如下： //html結構 <div id='leftboxdiv'> <div id='switchbtn' name=' go '></div>  //name值預設是go 內容內容內容內容內容內容內容內容內容內容內容 </div> //js-code //滑入滑出左區塊 $(document).ready(function(){ $("#switchbtn").click(function(){ if($(this).attr("name")=="go"){ $("#leftboxdiv").css({"animation-name":"leftboxdivgo","left":"-293px"}); $(this).attr('name','back');  //吧name值改成back }else{ $("#leftboxdiv").css({"animation-name":"leftboxdivback","left":"0px"}); $(this).attr('name','go');    //吧name值改成go } }); }); //css #leftboxdiv{ position: absolute; width: 293px; height: 1076px; background: url(../../img/blocks/travelerliving-commodity_01.png) repeat ...

在使用CSS的position: fixed浮動區塊最常遇到的問題就是無法指定位置，position: fixed的左右邊距是以瀏覽器的總寬度來做計算，所以假使您在1440px解析度設的position: fixed;位置是正確的，但如果吧解析度放大或縮小時，fixed區塊位置就會跑掉，例如下面圖示! 假使瀏覽器解析度為1440px，左右fixed區塊剛好在兩邊! 可是如果吧解析度改成1920，內容區#tpl-content寬度不變還是1280px，可是左右區塊卻是以瀏覽器的總寬度為主，因此就會變成下面這樣： 解決的方法就是用js來計算指定物件對齊左右邊距，方法如下： js部分 $(window).load(function() { var position = $('#tpl-content').offset(); var x = position.left;  //取得#tpl-content容器的left位置 var r =$('#tpl-content').width(); $("#leftframe").css("left", x-80+"px");  //計算左區塊位置 $("#righttframe").css("left", x+r+"px");  //計算右區塊位置 }); css部分 //左邊浮動區塊 #leftframe { position: fixed; top: 0px; width: 80px; height: 800px: background: url(../../img/frame/01.jpg) repeat-y left top; } //右邊浮動區塊 #righttframe { position: fixed; top: 0px; width: 80px; height: 800px: background: url(../../img/frame/02.jpg) repeat-y left top; } 這樣即使瀏覽器設成19...

如果要讓物件垂直置中，像是下面圖這樣的呈現!#content在父容器#box的垂直中間 基本上可以用css的 vertical-align: middle;，但這方法只能在table的td中使用，如果是div就無效了，後來上網查了一下資料發現css3有更好的方法能能決這問題，就是吧#box定義為table，吧#content定義為td，這樣就能用 vertical-align: middle;來垂直置中對齊物件了，真是好方便阿，方法如下： 結構 <div id="box">     <div id="content">         垂直置中物件內容     </div> </div> CSS #box {     display: table; } #content {     display: table-cell;     vertical-align: middle; } 這樣就OK了阿，有需要的朋友參考看看喔!! 參考資料來源： http://muki.tw/tech/css-div-center/ 教學撰寫： 徐嘉裕 Neil hsu

之前如果要做像這樣奇偶數的特效，通常都是透過PHP程式判斷迴圈奇偶數之後帶出odd及even數值傳值到樣板輸出成id，再定義CSS樣式，當然也能用SMARTY內建函數 class="<{cycle values="odd,even"}>來做出判斷。 不果現在有更快的方法，連程式都不用寫了直接前端CSS就能做出來了，就是用nth-child()選擇器來判斷奇偶數，範例如下： //HTML結構 <div id='boxdiv'> <li>內容內容內容內容內容內容內容內容內容內容內容</li> <li>內容內容內容內容內容內容內容內容內容內容內容</li> <li>內容內容內容內容內容內容內容內容內容內容內容</li> <li>內容內容內容內容內容內容內容內容內容內容內容</li> <li>內容內容內容內容內容內容內容內容內容內容內容</li> <li>內容內容內容內容內容內容內容內容內容內容內容</li> </div> //CSS語法 #boxdiv li:nth-child(odd) { background:#ff0000; } #boxdiv li:nth-child(even) { background:#0000ff; } //輸出結果 這樣自動就能判斷奇偶數值並顯示CSS樣式，簡單好用又節省效能，有需要的朋友可以參考看看!! 教學撰寫： 徐嘉裕 Neil hsu

從我開始設計網站到現在，就知道用CSS的border參數是無法畫出表格斜線的，但隨者CSS的發展到CSS3之後，已經延伸出一種可以畫出像以下範例的表格斜線的方法： 就是使用線性漸變的方法(linear-gradient)來實現，在IE10以上跟Google及火狐都能正常顯示，其實方法也不會很困難，以下為製作表格斜線的範例，大家可以參考看看。 表格結構部分 (看紅字即可) <thead> <tr> <th> <div class="slash"> <div class='slash01'>年級</div> <div class='slash02'>科別</div> </div> </th>   略............. </tr> </thead> css樣式部分  .slash{   position:relative;   width:100px;   height:40px;   box-sizing:border-box;   line-height:120px;   background: linear-gradient( 135deg , transparent 49.5%, #212121 49.5%, transparent 50.5%, transparent 50.5%); } .slash01{ position: absolute; top: -50px; } .slash02{ position: absolute; top: -25px; left: 50px; } 135deg 為傾斜角度，設45deg則為則斜線會左右顛倒， #212121 為斜線的顏色，其他都設為transparent透明即可。 .slash01跟.slash02都設為absolute(浮動)，顯示位置可以按實際需求調整(left and  top)。 這樣至...