新手在學習CSS flex時,首要觀念就是要釐清什麼是main axis與cross axis之外,接著就是各種排列屬性,譬如:flex-direction、f...
前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...
大家早安~昨天介紹完CSS的語法和選擇器後,今天要來實際告訴大家究竟有哪些常見屬性可以使用呢? CSS文字 文字顏色 color屬性用於設定文字顏色,屬性值可以...
3D轉換跟2D轉換不同的是使用三維坐標系(多了Z軸座標) 1.三維坐標系是由三個軸共同組成的 X軸 : 水平向右 注意: X軸右邊是正值 左邊是負值 Y軸 :...
大家好!我是Steven,現在是一位下班時用閒暇時間自學前端技術的上班族,今天想分享一些我在學習過程中所領悟到的事,並且分享給你們,首先今天想聊聊如何開啟前端自...
CSS是什麼? CSS,全名為Cascading Style Sheets,中文為階層式樣式表。跟HTML一樣,CSS既非標準程式語言,也不是標記語言,而是一種...
昨天講完的CSS的文字和區塊屬性後,今天要接續介紹版面佈局的屬性,以及一個非常好用的佈局容器 - Flex,上完這堂課,你的網頁佈局就可以更加彈性囉~ 那麼,我...
以下要分享一些從金魚腦切版中及自己在切版過程中學到的一些知識點。 https://ithelp.ithome.com.tw/users/20112550/iro...
在設計網頁時通常會加一些動畫特效,吸引使用者的目光及添加與使用者的互動性。過去製作動畫時以Flash為主,CSS3也可以建立動畫,不再只能用JavaScript...
終於!我每次在修正瀏覽器相容性的時候,都會因為常見的CSS Code沒辦法移除ie那個下拉選單而困擾,這下讓我找到方法啦! //常見的移除法 select {...
border-radius 屬性中如果只指定一個值,那麼將生成 4 個圓角。但是,如果想在四個角上一一指定,可以使用以下規則: 四個值:第一個值為左上角,第...
轉換 (transform)實現元素的位移、旋轉、縮放等效果,可以簡單理解為變形。 移動 translate 旋轉 rotate 縮放 scale 1.2D...
我們先回顧一下個人履歷的成品,學完HTML和CSS後,是否能順利做出來呢? Reset CSS 其實Chrome瀏覽器內建就有一些CSS的樣式,像超連結是藍字底...
按鈕動畫->鼠標移動到按鈕上後添加箭頭標記 範例: <!DOCTYPE html> <html> <head> &...
最近切的版,圖都是SVG格式今天處理footer區塊才發現我手中沒有footer 區塊需要的白色Logo啊~~~! 面對此問題我可以有二個做法: 打開PSD原...
從大學畢業以來,就一直在平面設計的領域中探索自己,如何將自己所學變成可能回饋社會的力量,雖然不多,但不斷的努力著透過設計可以讓台灣的視覺更好,隨著智慧裝置的興起...
最近發了 月餅 的圖,朋友問我「退休和財富自由是一樣的嗎?」我說:財富自由也可以不退休呀,退不退休可以是個人興趣選擇~(不過財富不自由可能就退不了休了)欸等等,...
文章有時候太長不好閱讀該怎麼讓閱讀體驗變好呢? 如果寬度都不做調整,跟內頁一樣塞滿整頁的寬, 或者是太長沒有適度空白的空間讓讀者休息, 都是極差的閱讀體驗。 就...
CSS3 新定義了互動式動畫,這是一個很棒的改變, 提供了直接在 CSS 檔裡設定完,不需依靠 javascript 就能做出簡單的動畫, 比方說能以純 CSS...
在 day2 中有提到,我的發文內容可能比較偏向基本,因是第一次參賽,目的希望在挑戰連續發文的 30 天中,更重要的是能從中學習並累積自己的前端技術。終於來到最...
本篇介紹偽類中的狀態選取器:checked應用篇:做一個開關按鈕 :checked介紹 :checked是分類在本刊第4篇選取器 > 偽類別(pse...
使用 CSS3 的border-radius 屬性可為元素添加圓角邊框以及box-shadow 屬性可為元素添加陰影 範例: <!DOCTYPE html...
CSS3 動畫跟互動式動畫不同,互動式動畫需要使用者有執行動作才會反應, CSS3 動畫是開啟頁面後會直接自動播放,可以應用的範圍很廣, 我們先來看看是怎麼使用...
動畫 (animation) 可通過設置多個節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過渡,動畫可以實現更多變化、更多控制,連續自動播放等...
↓ 今日學習重點 ↓ 了解 RWD 的概念與常見螢幕尺寸斷點 了解 Media Queries 的使用方法 了解開發 iOS Safari 的注...
30天分享(21) - CSS3 背景 CSS3 的背景新增了兩個屬性, 1.background-size 2.background-origin 1.bac...
原生濾鏡 前面都在提說如何用 JaveScript 去改變圖像中的每個像素值來達成我們想要的效果,但其實在原生 CSS 中就有提供一些屬性來提供效果,今天我們就...
30天分享(22) - CSS3 漸層 CSS3 新增許多漸層,讓我們直接來看看使用方式 : background: linear-gradient(red,...
設計 CSS3 網頁最麻煩的就是各家瀏覽器的支援度, 如果在測試時沒跑出效果的話很可能是瀏覽器不支援, 但 CSS3 這麼多功能,該如何知道我的瀏覽器支援那些呢...