大家好,不知道你們是否和我一樣存在這樣的困惑呢,雖然css入門容易,但是其內容太多,好多屬性看了似是而非,覺得自己看懂了,到自己用的時候又很犯難了,看到漂亮的效果還是無從下手,這主要還是自己對新屬性實踐太少了,不能進行靈活應用,CSS總讓一些人找不到感覺。其實學好CSS真的沒有太多捷徑,和JS編程一樣,要重視對待,要多看和多練,因為現在的CSS不再是以前的CSS啦。
比如這兩本書《 CSS 權威指南第四版》,1000多頁,買了好幾個月我到現在還沒看完,文字實在太枯燥了,看完了忘,忘了繼續看,實在看不下去,不知道大家有沒有同樣的感受呢?
好了,廢話不多說,今天我們要做的一個案例就是做一個常見的例子:在不少網站右側都有一個固定浮動的留言圖標,我們點擊這個圖標,就會側滑顯示留言內容面板。你也許會說這個不簡單嗎,使用JQ就能輕鬆實現,但是我想說的,為了網站的性能,能用CSS實現的儘量不要用JS,因為現在CSS已足夠強大。
今天這個例子,我們將使用純CSS實現這個效果,這裡我們將用到” CSS checkbox hack“的技術,效果如下圖所示:
一、創建 HTML 結構
基於上面的效果圖,我們要創建三個元素,一個 checkbox 元素以及對應的 label 標記,和一個表單面板元素。
這裡用到了一個 CSS 特性值得大家關注下:<label> 標籤的 for 屬性用於指定與哪個表單元素進行關聯,擴大表單元素的點擊區域,我們點擊 label 元素標記,其對應的表單元素將會被聚焦選中。/<label>
這個特性是我們實現這個案例的技巧之一,再結合 CSS checkbox 的偽類選擇器進行留言面板的顯示與隱藏,這樣我們就可以擺脫 JS 來實現這個案例。
基於以上思路 ,我們開始動手吧,首先我們先放置 checkbox,和其對應的 label,最後添加表單面板和相關的表單元素。
我們將通過表單的 id 屬性與表單中label元素的 for 值與其關聯,最終我們完成了 HTML 結構如下段代碼所示:
<code><label>FEEDBACK/<label>/<code>
完成後的效果圖如下:
二、定義基礎的樣式
現在我們開始添加一些基礎的CSS的式,這裡我們用到了CSS自定義變量,方便我們全局修改,還有一些 reset 規則,和表單的基礎規則樣式,示例代碼如下:
<code>:root { --white: white; --gradient: linear-gradient(-45deg, #FFA600 0%, #FF5E03 50%); --form: #eeefef; --border-radius: 4px; --form-width: 500px; --form-mob-width: 320px;} * { padding: 0; margin: 0; box-sizing: border-box;}body { font: 20px/1.5 sans-serif; background: var(--white);}h1 { font-size: 2rem; text-align: center; margin-top: 20vh;} button,label { cursor: pointer;} label { display: block;} button,input,textarea { font-family: inherit; font-size: 100%; border: none;} textarea { resize: none;}/<code>
三、 定義表單元素相關樣式
1、由於 checkbox 這個元素在案例中無需顯示,我們只是用其的偽類特性結合 label 控制留言面板的顯示與隱藏,因此我們需要將其移出可視區域,記住這裡不能用隱藏屬性(display:none)。示例代碼如下:
<code>[type="checkbox"] { position: absolute; left: -9999px;}/<code>
2、接下來,我們需要添加這些CSS操作:
- 使用 fix 屬性將 checkbox 對應的 label 標籤元素固定在右側的中央。
- 垂直先顯示”FEEDBACK“文本。
- 隱藏表單面板,我們這裡將其往右移動其寬度的 100% 的距離,並垂直居中。
對應的CSS代碼如下:
<code>/*CUSTOM VARIABLES HERE*/.feedback-label,.form { position: fixed; top: 50%; right: 0;} .feedback-label { transform-origin: top right; transform: rotate(-90deg) translate(50%, -100%); z-index: 2;} .form { width: var(--form-width); max-height: 90vh; transform: translate(100%, -50%); padding: 30px; overflow: auto; background: var(--form); z-index: 1;}/<code>
小提示:
1、這裡需要強調的是 feedback-label 樣式,在其垂直變換時,我們先逆時針進行了旋轉,其 x ,y 軸的方向也是隨著旋轉的,所以是translate(50%, -100%),將其垂直居中。
2、在 form 樣式裡,我們使用 transform 方法,translate(100%, -50%) 將其移出頁面顯示區域
3、我們繼續,大家不要著急,馬上就快完成了,我們需要將頁面弄的漂亮些,添加一些樣式,示例代碼如下:
<code>/*CUSTOM VARIABLES HERE*/ .feedback-label,.form input,.form textarea,.form button { border-radius: var(--border-radius);} .feedback-label,.form button { background: var(--gradient); color: var(--white);} .feedback-label:hover,.form button:hover { filter: hue-rotate(-45deg);} .feedback-label { padding: 5px 10px; border-radius: var(--border-radius) var(--border-radius) 0 0;} form div:not(:last-child) { margin-bottom: 20px;} form div:last-child { text-align: right;} .form input,.form textarea { padding: 0 5px; width: 100%;} .form button { padding: 10px 20px; width: 50%; max-width: 120px;} .form input { height: 40px;} .form textarea { height: 220px;}/<code>
小提示:這裡我們的背景色用到了 linear-gradient() 線性漸變,實現了一個漂亮的顏色漸變背景。還有一個 CSS3 語法需要關注下:hue-rotate,色調旋轉濾鏡,方便我們改變當前的顏色。
四、使用CSS選擇器,實現表單面板的切換和隱藏
我們通過點擊 checkbox 對應的 label 標籤進行切換和顯示留言面板,這裡我們用到了 :checked 偽類,以及 ~(後續同胞選擇器)和 +(緊鄰同胞選擇器),輔助元素的選擇進行樣式變換,示例代碼如下:
<code>[type="checkbox"]:checked + .feedback-label { transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1));} [type="checkbox"]:focus + .feedback-label { outline: 2px solid rgb(77, 144, 254);} [type="checkbox"]:checked ~ .form { transform: translate(0, -50%);} .feedback-label,.form { transition: all 0.35s ease-in-out;}/<code>
這裡有幾個樣式規則我們需要聊一下:
- translate(50%, calc((var(--form-width) + 100%) * -1)); 這個樣式是不是有些複雜,其實也不難,就是多加了一個表單面板的寬度,由於旋轉後,y軸變成了水平軸,向左移動相當Y軸往上移動,因此是負值,需要乘-1。
- 第二個選擇器,我們之所以加個選中後的 outline 輪廓屬性,主要是為了方便那些習慣鍵盤操作的用戶,當其使用 Tab 鍵選擇 feedback label元素時,然後再使用 Space 空格鍵就能很方便的打開留言面板進行切換。
- 第三個選擇器,我們使用 transform: translate(0, -50%); 將 X 軸更改成0,恢復成最開始的位置,這樣我們的留言面板內容就能顯示出來。
處理響應式問題
最後,特別重點提示下我們做頁面要考慮頁面響應式適配的問題,這裡我們需要針對手機設備做一些樣式的調整,比如更改表單面板的寬度由原來的 500px 調整到 320px,以及初始字體的大小,調整成16px。
最終添加的響應式代碼如下:
<code>/*CUSTOM VARIABLES HERE*/ @media screen and (max-width: 600px) { body { font-size: 16px; } .form { padding: 15px; width: var(--form-mob-width); } form div:not(:last-child) { margin-bottom: 10px; } [type="checkbox"]:checked + .feedback-label { transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1)); }}/<code>
小節
好了,到這裡,我們的案例就全部完成了,你可以欣賞下自己完成的傑作啦,實現起來是不是很簡單呢,最後我還是建議大家還是親自動手實踐一遍,這樣才能加深對本案例用到的CSS屬性的理解。
最終完成的效果,大家可以點擊以下網址進行在線體驗:
https://www.qianduandaren.com/demo/feedback/
今天的內容就和大家分享到這裡,感謝你的閱讀,如果你喜歡我的分享,麻煩給個關注、點贊加轉發哦,你的支持,就是我分享的動力,後續會持續分享 CSS 常用案例和技巧,歡迎持續關注。
延伸閱讀
閱讀更多 前端達人 的文章