Lightnews — Scholar-powered news

Hanfour黃

@han05l8.bsky.social

《CSS 打字機效果 - 為文字增添靈魂》

想讓你的標題更有戲劇感？來點打字機效果吧！就像讓文字擁有了生命，一個字一個字蹦出來 ⌨️

這些效果不只能用在標題，還可以用在重要提示、歡迎語等場景。記住，動畫要有意義，不是為了炫技！

專業提示：考慮使用 Web Animation API 來實現更複雜的打字效果，能獲得更好的控制性。

#前端開發 #CSS #TypewriterEffect #動畫特效

/* 基礎打字機效果 */
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #000;
animation:
typing 3.5s steps(40, end),
blink-caret 0.75s step-end infinite;
width: fit-content;
}

/* 打字動畫 */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}

/* 光標閃爍 */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #000 }
}

/* 進階多行打字效果 */
.multiline-typewriter {
display: inline-block;
overflow: hidden;
position: relative;
}

.multiline-typewriter::after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2px;
background: #000;
animation: blink-caret 0.75s step-end infinite;
}

/* 文字漸現效果 */
.fade-in-text {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

December 6, 2024 at 2:11 PM

Hanfour黃

@han05l8.bsky.social

《CSS 自定義光標 - 互動體驗升級》

還在用普通的滑鼠指標？來打造專屬的光標效果，讓你的網站互動感倍增！就像給滑鼠換了個時尚裝扮 ✨

自定義光標不只是裝飾，更是提升使用者體驗的關鍵！搭配適當的互動效果，讓你的網站與眾不同。

專業提示：記得準備 fallback 樣式，確保在所有設備上都有良好體驗。

#前端開發 #CSS #CustomCursor #互動設計

/* 基礎光標樣式 */
.custom-cursor {
cursor: pointer; /* 基礎互動提示 */
}

/* 進階自定義光標 */
.fancy-cursor {
cursor: none; /* 隱藏原始光標 */
position: relative;
}

.cursor-dot {
width: 10px;
height: 10px;
background: #2ecc71;
border-radius: 50%;
position: fixed;
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.1s ease;
}

.cursor-outline {
width: 40px;
height: 40px;
border: 2px solid rgba(46, 204, 113, 0.5);
border-radius: 50%;
position: fixed;
pointer-events: none;
transform: translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease;
}

/* 互動狀態 */
.fancy-cursor:hover ~ .cursor-outline {
width: 60px;
height: 60px;
background: rgba(46, 204, 113, 0.1);
}

/* 特殊區域光標 */
.drag-area {
cursor: grab;
}

.drag-area:active {
cursor: grabbing;
}

December 5, 2024 at 1:49 PM

Hanfour黃

@han05l8.bsky.social

《CSS Grid 進階 - 不規則版面設計》

告別死板的格線吧！Grid 的真正威力是打造獨特的不規則排版。像在玩數獨，但規則由你定義 🧩

這就像是給你的網頁元素一個自由發揮的舞台，讓它們擺脫傳統格線的束縛！

專業提示：善用 minmax() 和 auto-fill，讓你的版面在各種螢幕尺寸下都完美展現。

#前端開發 #CSS #GridLayout #版面設計

.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 1rem;
}

/* 特色區塊佈局 */
.feature-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}

.feature-2 {
grid-column: 3 / 5;
grid-row: 2 / 4;
}

/* 響應式魔法 */
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}

.feature-1,
.feature-2 {
grid-column: 1 / -1;
grid-row: auto;
}
}

/* 自動填充技巧 */
.auto-fill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-flow: dense;
}

December 4, 2024 at 1:55 PM

Hanfour黃

@han05l8.bsky.social

《CSS Scroll Effects - 滾動視差魔法》

寫網頁還在死板板的往下滾？來點滾動視差效果，讓你的網站充滿電影感 🎬

滾動不再只是滾動，而是一場視覺的盛宴！搭配適當的內容，讓你的網站變身好萊塢大片。

專業提示：記得考慮行動裝置的效能，適時簡化效果才是王道！

#前端開發 #CSS #ScrollEffects #視差滾動

.parallax-container {
height: 100vh;
overflow-x: hidden;
perspective: 1px;
scroll-behavior: smooth;
}

.parallax-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.layer-back {
transform: translateZ(-1px) scale(2);
}

.layer-front {
transform: translateZ(0);
}

/* 滾動顯示動畫 */
.scroll-reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}

.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}

December 3, 2024 at 1:29 PM

Hanfour黃

@han05l8.bsky.social

《CSS Transform - 3D 視覺饗宴》

還在用平面設計？Transform 讓你輕鬆實現 3D 效果！就像讓網頁元素學會了特技表演 🎪

加入這些 3D 效果，讓你的網頁瞬間變得更有深度！記住，適度使用才能讓網站既炫酷又不眼花。
專業提示：搭配 transition 屬性，讓 3D 變換更流暢自然，用戶體驗加分！

#前端開發 #CSS #Transform3D #視覺特效

.card-3d {
perspective: 1000px;
transform-style: preserve-3d;
}

.card-inner {
position: relative;
transform-origin: center;
transition: transform 0.6s;
}

.card-3d:hover .card-inner {
transform: rotateY(180deg) translateZ(50px);
}

/* 炫酷的立體按鈕 */
.button-3d {
transform: translateZ(0);
transition: transform 0.3s;
}

.button-3d:hover {
transform: translateY(-3px) rotateX(5deg);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

December 2, 2024 at 2:02 PM

Hanfour黃

@han05l8.bsky.social

《CSS 效能優化 - 讓網頁飛起來》

網頁載入慢得像蝸牛爬？來看看這些 CSS 優化技巧，讓你的網站速度飆起來 🚀

記住：高效的 CSS 不只是寫得對，更要寫得巧！

#前端開發 #CSS #Performance #效能優化

/* 優化選擇器 */
.bad { /* 避免過度巢狀 */
.header {
.nav {
.link { /* 太深的巢狀 */
color: blue;
}
}
}
}

.good-link { /* 扁平化選擇器 */
color: blue;
}

/* 使用簡寫屬性 */
.optimized {
margin: 10px 20px; /* 替代分別設定 */
font: 16px/1.5 Arial, sans-serif;
}

/* 避免重複宣告 */
.shared-styles {
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

December 1, 2024 at 2:34 PM

Hanfour黃

@han05l8.bsky.social

《漸層設計 - 為網頁增添色彩》

單調的純色背景已經過時啦！來學習如何用漸層創造出令人驚艷的視覺效果 🎨

有了這些漸層技巧，你的網頁立刻就能從平凡變華麗！

#前端開發 #CSS #Gradients #視覺設計

.gradient-bg {
/* 經典線性漸層 */
background: linear-gradient(45deg,
#12c2e9,
#c471ed,
#f64f59
);

/* 放射狀漸層 */
background: radial-gradient(
circle at center,
#ff9a9e 0%,
#fad0c4 100%
);

/* 動態漸層 */
background-size: 200% 200%;
animation: gradient-shift 5s ease infinite;
}

@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

November 30, 2024 at 2:11 PM

Hanfour黃

@han05l8.bsky.social

《CSS 自定義屬性 - 打造品牌主題》

想讓網站換裝更輕鬆？CSS 變數是你的最佳助手！就像把網站穿搭交給專業的造型師 👔

整個網站的風格，就靠這些變數統一調配。需要改版？修改變數就搞定！

#前端開發 #CSS #CSSVariables #主題設計

November 29, 2024 at 1:52 PM

Hanfour黃

@han05l8.bsky.social

《CSS 暗黑模式 - 護眼必備功能》

誰說暗黑模式很難實現？跟著這篇教學，讓你的網站輕鬆切換明暗主題！畢竟，我們都是愛護眼睛的好開發者 🌓

一套程式碼，雙重享受！還能配合系統設定自動切換，這就是現代化的網頁開發～

#前端開發 #CSS #DarkMode #主題切換

:root {
--bg-light: #ffffff;
--text-light: #333333;
--bg-dark: #222222;
--text-dark: #ffffff;
}

body {
--bg: var(--bg-light);
--text: var(--text-light);
background: var(--bg);
color: var(--text);
transition: background 0.3s ease;
}

body[data-theme="dark"] {
--bg: var(--bg-dark);
--text: var(--text-dark);
}

/* 系統暗黑模式自動適配 */
@media (prefers-color-scheme: dark) {
body {
--bg: var(--bg-dark);
--text: var(--text-dark);
}
}

November 28, 2024 at 6:27 AM

Hanfour黃

@han05l8.bsky.social

《響應式圖片 - 完美適配各種螢幕》

讓我們來解決困擾前端工程師多年的問題：圖片適配！像變形金剛一樣，隨時準備最佳尺寸 🤖

不同裝置、不同解析度？不用擔心！這樣設定後，圖片永遠都是最佳狀態。

#前端開發 #CSS #ResponsiveImages #圖片優化

.responsive-image {
max-width: 100%;
height: auto;
object-fit: cover;
}

picture {
display: block;
width: 100%;
}

source {
width: 100%;
}

November 27, 2024 at 12:28 AM

Hanfour黃

@han05l8.bsky.social

《動畫特效 - 讓網頁活起來》

誰說網頁一定要死氣沉沉？來點 CSS 動畫，讓你的網站充滿生命力！像施展魔法一樣簡單 ✨

添加一點動畫，你的網頁立刻變得生動活潑！記住，動畫要適度，過猶不及哦～

#前端開發 #CSS #Animation #特效設計

.magic-button {
transition: transform 0.3s ease;
background: linear-gradient(45deg, #ff6b6b, #feca57);
}

.magic-button:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}

November 26, 2024 at 2:11 AM

Hanfour黃

@han05l8.bsky.social

《CSS Grid - 二維排版的超能力》
還在為複雜的網格布局傷腦筋？Grid 系統讓你輕鬆打造報紙級的版面配置！就像在玩俄羅斯方塊，但更容易贏 🎮

Grid 就像是給你的網頁元素畫格子，想怎麼站就怎麼站，再也不怕排版跑掉！

#前端開發 #CSS #CSSGrid #版面配置

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三欄均分 */
grid-template-rows: auto;
gap: 20px;
padding: 20px;
}

.featured-item {
grid-column: span 2; /* 橫跨兩欄 */
grid-row: span 2; /* 橫跨兩行 */
background: #9b59b6;
border-radius: 8px;
}

November 25, 2024 at 3:21 AM

Hanfour黃

@han05l8.bsky.social

《Flex 終極篇 - 聖杯布局》

來挑戰前端界的終極任務：三欄式聖杯布局！用 Flex 讓它變得像喝水一樣簡單 💧

這個布局以前可是前端面試的常考題呢！現在用 Flex，就像變魔術一樣簡單～
專業提示：這個布局方案不只好用，還特別照顧了行動裝置的體驗，絕對是你的前端武器庫必備技能！

#前端開發 #CSS #HolyGrail #FlexboxMaster

.holy-grail {
display: flex;
flex-wrap: wrap;
min-height: 100vh;
}

.main-content {
flex: 1;
order: 2; /* 決定顯示順序 */
}

.sidebar-left {
flex: 0 0 200px;
order: 1;
}

.sidebar-right {
flex: 0 0 200px;
order: 3;
}

@media (max-width: 768px) {
.holy-grail > * {
flex: 1 1 100%; /* 手機版全寬顯示 */
}
}

November 24, 2024 at 2:40 PM

Hanfour黃

@han05l8.bsky.social

《Flex 實戰篇 - 打造完美導航欄》

厭倦了傳統選單的死板樣式？跟著我用 Flex 來打造一個時尚又實用的導航欄 🚀

看！這就是現代網頁該有的樣子。導航元素們排排站，還能自動調整間距，簡直完美！

#前端開發 #CSS #NavigationBar #FlexboxLayout

.navbar {
display: flex;
justify-content: space-between;
padding: 1rem;
background: #2c3e50;
}

.nav-links {
display: flex;
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}

.nav-links li a {
color: white;
transition: color 0.3s ease;
}

November 22, 2024 at 11:44 PM

Hanfour黃

@han05l8.bsky.social

《Flex 進階篇 - 響應式設計的最佳拍檔》

原來 Flex 還可以這樣玩！來看看如何運用 flex-wrap 和媒體查詢，讓你的網頁在各種尺寸下都完美展現 📱

這就像是幫你的網頁元素買了張魔法票，讓它們能自由變形又不失優雅！

#前端開發 #CSS #FlexboxAdvanced #響應式設計

.gallery {
display: flex;
flex-wrap: wrap; /* 空間不夠自動換行 */
gap: 16px;
}

.card {
flex: 1 1 300px; /* 增長、縮減、基準寬度 */
max-width: 400px; /* 別讓卡片太胖！ */
}

@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* 手機版單欄展示 */
}
}

November 21, 2024 at 11:23 PM

Hanfour黃

@han05l8.bsky.social

《Flex 排版 - 讓你的網頁元素乖乖排隊》

還在被浮動（float）搞得頭昏眼花嗎？來認識 CSS 界的超級英雄 - Flexbox！它就像是元素們的訓練教官，讓它們乖乖排排坐、吃果果 🍎

還記得以前要置中一個 div 要寫一堆莫名其妙的代碼嗎？現在只需要兩行就搞定！Flexbox 就像是一個神奇的積木遊戲，想怎麼排就怎麼排～
專業提示：掌握 flex 的概念後，排版就不再是惡夢。真的！連資深工程師都說這是他們最愛的 CSS 功能之一。

#前端開發 #CSS #Flexbox #排版特攻隊

.container {
display: flex; /* 啟動 flex 模式！*/
justify-content: center; /* 水平置中 */
align-items: center; /* 垂直置中 */
gap: 20px; /* 元素間距，整齊美觀 */
}

.item {
flex: 1; /* 讓子元素均分寬度 */
padding: 20px;
background: #e74c3c;
border-radius: 8px;
}

November 21, 2024 at 12:51 AM

Hanfour黃

@han05l8.bsky.social

《CSS 變數 - 樣式重構的救星》

還在為了改個顏色要改 50 個檔案而抓狂嗎？CSS 變數來拯救你了！就像給你的寵物取暱稱一樣，我們也能幫 CSS 屬性取個好記的名字 🐱
}

想像一下，這就像是幫你的專案建立了一個「造型指揮中心」。需要全站換色系？一行代碼搞定！維護起來不要太輕鬆～
專業提示：善用 CSS 變數不只讓你的程式碼更乾淨，還能讓團隊合作更順暢。畢竟，誰不想要一個好維護的專案呢？

#前端開發 #CSS #CSSVariables #程式碼整潔之道

:root {
--primary-color: #3498db; /* 主色調，想換就換！*/
--spacing-unit: 8px; /* 間距單位，一次到位 */
--border-radius: 4px; /* 圓角，統一好看 */
}

.button {
background: var(--primary-color);
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius);
box-shadow: 0 var(--spacing-unit) calc(var(--spacing-unit) * 2) rgba(0,0,0,0.1);
}

November 20, 2024 at 1:10 AM

Hanfour黃

@han05l8.bsky.social

《其實 CSS Grid 沒那麼可怕》

還在用 float 跟 position 疊來疊去嗎？Grid 佈局讓你的程式碼不再像套娃一樣層層疊疊。

Grid 就像樂高積木，想怎麼擺就怎麼擺。掌握這個基礎，你離前端大神又近了一步！

*看看圖片這段代碼就能完成一個簡單的網格

#前端開發 #CSS #網頁排版 #Grid佈局

.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 兩個相等的列，repeat 是偷懶神器 */
gap: 20px; /* 格子間的距離，就像你跟前任的距離一樣 */
padding: 16px;
}

/* 格子裡的內容，不用算高度了，Grid 幫你搞定 */
.item {
background: #3498db;
color: white;
padding: 20px;
text-align: center;
}

November 19, 2024 at 1:19 AM

Add to Home Screen

Light up
your news

Add to Home Screen

Light upyour news

Sign in to Lightnews

Sign up to start reading

Connect Bluesky

Connect with Bluesky

Light up
your news