goTOP
CSS
December 5, 2022
因為重新安裝系統,最近常常增加自己的部落格內容,以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多,需要做些CSS視覺修改,好分辨在眾多的標題與文章間的視覺修正,好讓閱讀者有較好的視覺引導

▼發現電腦版需要點修正(修改前,青色箭頭部分無 ▶)
點擊在新視窗中瀏覽此圖片

▼手機版還算清楚,所以沒有動到手機版的視覺修正
點擊在新視窗中瀏覽此圖片

▼使用chrome檢視這行程式碼
點擊在新視窗中瀏覽此圖片

▼按F12後,找到這段程式碼,應該是之下的 h4
點擊在新視窗中瀏覽此圖片
April 15, 2021
點擊在新視窗中瀏覽此圖片
為了客戶要在就程式中加上某些功能,又不能動到inc模組的狀況下,改變CSS版型,就只能動用更新的CSS3設定來輔助顯示。如果沒有事前的定義,除了first-child, last-child 的方法,之外 nth-child(n)也是不錯的用法,但是要多注意上層的 Class 定義,才能完美定義出自己想要的CSS3樣式。

以table tr 元素為例:
odd:為奇數
nth-child(odd)

tr:nth-child(odd){background:#808080}

even:為偶數
tr:nth-child(odd){background:#808080}


n可放入數字:以 ul li 元素為例:
前方開始的用法:
:nth-child(n)

August 23, 2018
最近做一個案子,並非一般型態的網站,必須大量使用程式碼來控制圖像位置與顯示,其中之一就是在 a:hover 或是其他元素 :hover 之下,同時指定多重指定一個以上的位置同時顯示不同元素,在以前一定要靠 Javascript +其他方式來寫,現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示,可以在上層加上區塊元素(div)使用 position 來做文字元素(i or a or span)定位相對位置,應該就可以解決了,當然這裡只是簡單的範例。
點擊在新視窗中瀏覽此圖片

範例參考:點這裡
July 25, 2018
跟工程師討論後,他想要使用JavaScript來呈現動畫效果,我也有另外一套方式,將在行進中的動畫改變成不同圖片的方式,來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置(碰撞與否),但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗,可愛吧?!
▼這一個連貫的動作,由三張GIF所組合而成(因連動手機版版面限制。1.向右走至200px,2.向左走至0px,3.到原點踏步)

May 28, 2018
這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎,做下筆記。
▼電腦版介面
點擊在新視窗中瀏覽此圖片
▼手機版介面 (以ICON做區別)
點擊在新視窗中瀏覽此圖片
May 28, 2018
說明:在CSS 的Class名稱中,只要包含「test」便改變屬性設定
點擊在新視窗中瀏覽此圖片
中文範例:點這裡
CSS部分:

div[class*="test"]{
  background:rgba(255,0,0,1.00);
  color: #ffffff;
}


分頁: 1/6 第一頁 1 2 3 4 5 6 下頁 最後頁 [ 顯示模式: 摘要 | 清單 ]