網頁知識與小技巧

CSS Lists, Markers, And Counters
https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/

Drop caps & design systems
https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems

Making Tables Responsive With Minimal CSS
https://bradleytaunt.com/2019/06/11/responsive-tables/

Everything You Need to Know About Date in JavaScript
https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/

THE STATE OF FLUID WEB TYPOGRAPHY
https://betterwebtype.com/articles/2019/05/14/the-state-of-fluid-web-typography/

Wrapping long words with CSS or HTML
https://www.cjcid.com/articles/wrapping-long-words-css-html/

Why we prefer CSS Custom Properties to SASS variables
https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables

How to create a Sticky Hero section
https://codyhouse.co/blog/post/sticky-hero-section

CSS can do that?
https://dev.to/ananyaneogi/css-can-do-that-18g7

Everything You Ever Wanted to Know About inputmode
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

A new (and easy) way to hide content accessibly
https://zellwk.com/blog/hide-content-accessibly/

Creating rounded triangles in CSS with clip-path
https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path

Preload, prefetch and other <link> tags
https://3perf.com/blog/link-rels/

Diagonal Containers in CSS
https://codyhouse.co/blog/post/css-diagonal-containers

Fading out siblings on hover in CSS
https://www.trysmudford.com/blog/fade-out-siblings-css-trick/

您需要了解CSS中的連字符
http://clagnut.com/blog/2395

How To Align Things In CSS
https://www.smashingmagazine.com/2019/03/css-alignment/?fbclid=IwAR3fhVu5w_cSN6zZfpQQUx7sNICpSOG77_ogdyRYY80QFKO2_UGWZun24_I

使用 colgroup 和 col 实现响应式表格
http://coderlt.coding.me/2017/11/20/table-colgroup/

Did you know that CSS Custom Properties can handle images too?
https://css-tricks.com/did-you-know-that-css-custom-properties-can-handle-images-too/

How to combine SASS color functions and CSS Variables
https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

How @supports Works
https://css-tricks.com/how-supports-works/

Position: stuck; — and a Way to Fix It
https://uxdesign.cc/position-stuck-96c9f55d9526
https://codepen.io/dannievinther/pen/pGdjPV

CSS Position Sticky – How It Really Works!
https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

Table Design Patterns On The Web
https://www.smashingmagazine.com/2019/01/table-design-patterns-web/

font-variant-numeric

font-variant-numeric: tabular-nums;

Google的UX建議指南中文版(電商零售篇)
https://medium.com/@apple30664/google%E7%9A%84ux%E6%8C%87%E5%B0%8E%E6%89%8B%E5%86%8A%E4%B8%AD%E6%96%87%E7%89%88-%E9%9B%BB%E5%95%86%E9%9B%B6%E5%94%AE%E7%AF%87-84000b076060?fbclid=IwAR3cXmjrVcAyQ2Ur20Qw27wZuCi-SWf09jOcf6vy10paaFG-7x5FJM5bKGk

When And How To Use CSS Multi-Column Layout
https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/

Multi-Line Inline Gradient
https://css-tricks.com/multi-line-inline-gradient/

border gradient
https://css-tricks.com/gradient-borders-in-css/

CSS :empty 如果有空格也會視為有子元素
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Google Fonts and font-display
https://css-tricks.com/google-fonts-and-font-display/

Handling broken images with the service worker
https://bitsofco.de/handling-broken-images-with-service-worker/

用 scss 處理顏色時例如darken()、rgba()等, css variable 不能寫hex格式…
https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency

Styling a Select Like It’s 2019
https://www.filamentgroup.com/lab/select-css.html

https://css-tricks.com/reversing-an-easing-curve/

為期一個月的網頁設計小技巧

input range style
https://css-tricks.com/sliding-nightmare-understanding-range-input/

Tiny Wins – The big benefits of little changes.
瀏覽器頁籤動態顯示
http://joelcalifa.com/blog/tiny-wins/

Why isn’t it <style src=””>?
https://css-tricks.com/why-isnt-it-style-src/

What, exactly, is the DOM?
https://bitsofco.de/what-exactly-is-the-dom/
What is the Shadow DOM?
https://bitsofco.de/what-is-the-shadow-dom/

Speed up next-page navigations with prefetching
https://dev.to/addyosmani/speed-up-next-page-navigations-with-prefetching-4285?fbclid=IwAR0yQK69BREpNImtiGwOmnpluE8O26OCU7vtrwyv_LQS8smFBd1rElaVlwo

CSS-in-JS or CSS-and-JS
https://johnpolacek.github.io/css-in-js-or-css-and-js/

利用css技巧讓照片按等比例縮放。https://blog.shinychang.net/2014/03/10/%E5%9B%BA%E5%AE%9A%E6%AF%94%E4%BE%8B%E9%9F%BF%E6%87%89%E5%BC%8F%E5%9C%96%E7%89%87/

instagram效果css
https://paper.dropbox.com/doc/–ATkFPfCe28c4uMqIP5AWibAyAg-lDdbznBosu2s35KYG4GfY

利用css製作照片特效
https://freebiesupply.com/blog/css-photo-effects/?fbclid=IwAR26SxL6X5E2KexutaibVonKppDmtL9LZq61RjBzEDmssijcO58bBdUFKWQ

border-radius 精彩變化 – codepen
https://codepen.io/enbee81/pen/LBMKqV?fbclid=IwAR1eHBHA-rtTZ-CtjoaHEZ-lsJ2mWo_jFB-00sg60k9uVv7ao4yVgup_XbI
border-radius 精彩變化 – 原文
https://9elements.com/io/css-border-radius/?fbclid=IwAR0LwD6D9E6d2wNpJz541AI-xNQiIV2eDc9tu9QSnHVKdzst3C4lo2Bj7Pw
border-radius 精彩變化 – 產生器
https://9elements.github.io/fancy-border-radius/full-control.html?fbclid=IwAR0mLEM-pRJOIQWeFff9TGnRG0fcuTvETPMbB_jqgdxCWb-wMgRhpVzRMLo#10.10.10.10-90.90.90.90-.

CSS Previous sibling selectors and how to fake them
https://medium.freecodecamp.org/how-to-make-the-impossible-possible-in-css-with-a-little-creativity-bd96bb42b29d?fbclid=IwAR1ckaxnkk1RupAN8BCyTrkIzIT60nRFaHv1EBUIIcm5vGnvxR04qZaHzmY

Google style guideline(Html, css, javascript)
https://github.com/google/styleguide
https://google.github.io/styleguide/htmlcssguide.html
https://google.github.io/styleguide/jsguide.html
https://material.io/design/color/dark-theme.html?fbclid=IwAR3zvDDAHIsjznzcdEpK6CQMXkcdlyDo_5vO43Lky3NQ1IiYO3JctGiN7Eg

Behind the Illusions – Impossibly High-Performance Layout Animations
https://slides.com/davidkhourshid/illusions#/
相關原文:How to animate box-shadow with silky smooth performance
http://tobiasahlin.com/blog/how-to-animate-box-shadow/

當使用 overflow-scrolling時,背景破圖需要在子div使用transform技巧https://stackoverflow.com/questions/18271460/fixed-positioning-z-index-issue-in-mobile-safari

custom scrollbar
客製化scrollbar的樣式
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Well-Controlled Scrolling with CSS Scroll Snap
https://developers.google.com/web/updates/2018/07/css-scroll-snap

css鬼片特效
https://tympanus.net/codrops/2017/12/21/css-glitch-effect/

multiline text ellipsis
多行文字的最後顯示"…"
https://www.consolelog.io/multiple-line-ellipsis-css-effecthttps://codepen.io/natonischuk/pen/QbGWBa

css filter
http://iamvdo.me/en/blog/advanced-css-filters

nav (menu) 太多時自動收合
https://css-tricks.com/diy-priority-plus-nav/

学习一下IE10和IE11的CSS Hack
http://www.weste.net/2013/7-5/92515.html

Google Chrome參數一覽表
http://www.minwt.com/pc/2363.html

Lazy-loading Google Maps
http://osvaldas.info/lazy-loading-google-maps

Adding Desktop Notifications to Your Web Applications
http://blog.teamtreehouse.com/adding-desktop-notifications-to-your-web-applications

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese
中文字型的宣告在css上如何使用會比較好
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

Turn Off Number Input Spinners
如何關閉input的預設樣式
https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

Determine if site is open as web app or through regular safari on ipad?
如何判斷手機上是用web app方式開啟或是瀏覽器開啟
http://stackoverflow.com/questions/6510204/determine-if-site-is-open-as-web-app-or-through-regular-safari-on-ipad

safari web app open rel=“external” in safari instead of web-app
http://stackoverflow.com/questions/23501420/safari-web-app-open-rel-external-in-safari-instead-of-web-app

搞懂X-UA-Compatible IE相容設定
http://blog.darkthread.net/post-2016-05-26-x-ua-compatible-setting.aspx

The 30 CSS Selectors You Must Memorize
英文
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
中文
http://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize–net-16048

magic of css
css的奇妙之處
http://adamschwartz.co/magic-of-css/

關於cache
http://kamranahmed.info/blog/2017/03/14/quick-guide-to-http-caching/?ref=webdesignernews.com

css空狀態 與 選擇某個項目之後 會變成的狀態
https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/

網頁字高問題 line-height
https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f

CSS Shape
https://www.smashingmagazine.com/2018/09/css-shapes/

How to use Chrome DevTools like a Pro
https://stories.jotform.com/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3

文字的風格 css
https://sparanoid.com/lab/opentype-features/

A tour of JavaScript timers on the web
https://nolanlawson.com/2018/09/01/a-tour-of-javascript-timers-on-the-web/

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.