| 兩邊的前次修訂版前次修改
下次修改 | 前次修改
|
| computer:web:css [2021/01/30 06:11] – [Outline] wm | computer:web:css [2025/04/06 17:05] (目前版本) – [Image] wm |
|---|
| * [[https://github.com/benschwarz/metaquery|metaQuery]] | * [[https://github.com/benschwarz/metaquery|metaQuery]] |
| * [[http://glenmaddern.com/metaquery-and-the-end-of-media-queries/|Metaquery and the end of media queries]] | * [[http://glenmaddern.com/metaquery-and-the-end-of-media-queries/|Metaquery and the end of media queries]] |
| * [[http://marcj.github.io/css-element-queries/|CSS Element Queries]] | |
| * [[http://elementqueries.com/|EQCSS]] | |
| * [[https://github.com/ausi/cq-prolyfill#container-queries-prolyfill|Container Queries Prolyfill]] | |
| * [[http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/|Responsive Web Design: What It Is and How To Use It]] | * [[http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/|Responsive Web Design: What It Is and How To Use It]] |
| * [[http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries|Adaptive & Mobile Design with CSS3 Media Queries]] | * [[http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries|Adaptive & Mobile Design with CSS3 Media Queries]] |
| * [[http://timkadlec.com/2012/04/media-query-asset-downloading-results/|Media Query & Asset Downloading Results]] | * [[http://timkadlec.com/2012/04/media-query-asset-downloading-results/|Media Query & Asset Downloading Results]] |
| * [[http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%E2%80%94-or-what-base-size-do-em-based-media-queries-use/|All your base, are belong to us — or what base size do em-based media queries use?]] | * [[http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%E2%80%94-or-what-base-size-do-em-based-media-queries-use/|All your base, are belong to us — or what base size do em-based media queries use?]] |
| | ====Container Query==== |
| | * [[http://marcj.github.io/css-element-queries/|CSS Element Queries]] |
| | * [[https://github.com/ausi/cq-prolyfill#container-queries-prolyfill|Container Queries Prolyfill]] |
| | ====Scope==== |
| | * [[https://fullystacked.net/posts/scope-in-css/|An introduction to @scope in CSS]] |
| ====Color==== | ====Color==== |
| * [[http://colours.neilorangepeel.com/|Colours]] | * [[http://colours.neilorangepeel.com/|Colours]] |
| * [[https://medium.com/@WebReflection/css-local-vs-global-variables-26c965abb7a1|CSS: local VS global variables]] | * [[https://medium.com/@WebReflection/css-local-vs-global-variables-26c965abb7a1|CSS: local VS global variables]] |
| * [[https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/|The --var: ; hack to toggle multiple values with one custom property]] | * [[https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/|The --var: ; hack to toggle multiple values with one custom property]] |
| | * [[https://open-props.style/|Open Props]] |
| ===Mixin=== | ===Mixin=== |
| * [[https://blog.gospodarets.com/css_apply_rule|CSS @apply rule (native CSS mixins)]] | * [[https://blog.gospodarets.com/css_apply_rule|CSS @apply rule (native CSS mixins)]] |
| * [[http://philipwalton.com/articles/what-no-one-told-you-about-z-index/|What No One Told You About Z-Index]] | * [[http://philipwalton.com/articles/what-no-one-told-you-about-z-index/|What No One Told You About Z-Index]] |
| ====Flexbox==== | ====Flexbox==== |
| | * [[https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/|An Interactive Guide to Flexbox]] |
| * [[http://chriswrightdesign.com/experiments/flexbox-adventures/|Flexbox adventures]] | * [[http://chriswrightdesign.com/experiments/flexbox-adventures/|Flexbox adventures]] |
| * [[http://briandiehr.com/#/layout-editor|Flex Box Editor]] | * [[http://briandiehr.com/#/layout-editor|Flex Box Editor]] |
| * [[http://codepen.io/osublake/full/dMLQJr/|Animated Flexbox Playground]] | * [[http://codepen.io/osublake/full/dMLQJr/|Animated Flexbox Playground]] |
| * [[https://medium.com/@Heydon/flexbox-grid-finesse-4d22b80bfee1|Flexbox Grid Finesse]] | * [[https://medium.com/@Heydon/flexbox-grid-finesse-4d22b80bfee1|Flexbox Grid Finesse]] |
| * [[https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b|11 things I learned reading the flexbox spec]] | * [[https://david-gilbertson.medium.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b|11 things I learned reading the flexbox spec]] |
| * [[https://gist.github.com/mczepiel/0a1a7af2a30f08a825f1|Is there a flex box related, display: "ignore" concept I'm missing somewhere?]] | * [[https://gist.github.com/mczepiel/0a1a7af2a30f08a825f1|Is there a flex box related, display: "ignore" concept I'm missing somewhere?]] |
| * [[https://www.chenhuijing.com/blog/flexbox-and-padding/|Flexbox and padding]] | * [[https://www.chenhuijing.com/blog/flexbox-and-padding/|Flexbox and padding]] |
| ====Shapes==== | ====Shapes==== |
| * [[http://sarasoueidan.com/blog/css-shapes/|Creating Non-Rectangular Layouts with CSS Shapes]] | * [[http://sarasoueidan.com/blog/css-shapes/|Creating Non-Rectangular Layouts with CSS Shapes]] |
| ====Box Shadow==== | ====Shadow==== |
| | * [[https://www.joshwcomeau.com/css/designing-shadows/|Designing Beautiful Shadows in CSS]] |
| * [[http://codepen.io/bphillips201/details/JygKB|How Box-Shadow Works]] | * [[http://codepen.io/bphillips201/details/JygKB|How Box-Shadow Works]] |
| * [[http://tobiasahlin.com/blog/how-to-animate-box-shadow/|How to animate "box-shadow" with silky smooth performance]] | * [[http://tobiasahlin.com/blog/how-to-animate-box-shadow/|How to animate "box-shadow" with silky smooth performance]] |
| * [[http://css-tricks.com/stripes-css/|Stripes in CSS]] | * [[http://css-tricks.com/stripes-css/|Stripes in CSS]] |
| === Gradient === | === Gradient === |
| | * [[https://gradient.style/|CSS HD Gradients]] |
| * [[http://leaverou.github.io/conic-gradient/|CSS conic-gradient() polyfill]] | * [[http://leaverou.github.io/conic-gradient/|CSS conic-gradient() polyfill]] |
| * [[http://colinkeany.com/blend/|Blend]] | * [[http://colinkeany.com/blend/|Blend]] |
| * [[http://sarasoueidan.com/blog/compositing-and-blending-in-css/|Compositing And Blending In CSS]] | * [[http://sarasoueidan.com/blog/compositing-and-blending-in-css/|Compositing And Blending In CSS]] |
| * [[http://bitsofco.de/styling-broken-images/|Styling Broken Images]] | * [[http://bitsofco.de/styling-broken-images/|Styling Broken Images]] |
| | * [[https://leanrada.com/notes/css-only-lqip/|Minimal CSS-only blurry image placeholders]] |
| ===Filter=== | ===Filter=== |
| * [[http://css.dzone.com/articles/css3-image-filters|CSS3 Image Filters]] | * [[http://css.dzone.com/articles/css3-image-filters|CSS3 Image Filters]] |
| =====資源===== | =====資源===== |
| * [[https://cssdb.org/|What’s next for CSS?]] | * [[https://cssdb.org/|What’s next for CSS?]] |
| | * [[https://github.com/captainbrosset/inactive-css|Inactive CSS]] |
| * [[http://flukeout.github.io/|CSS Diner]] | * [[http://flukeout.github.io/|CSS Diner]] |
| * [[http://graphicpeel.com/cssiosicons|iOS Icons made in Pure CSS]] | * [[http://graphicpeel.com/cssiosicons|iOS Icons made in Pure CSS]] |
| * [[http://descartes.io/|Descartes]] | * [[http://descartes.io/|Descartes]] |
| * [[https://github.com/ben-eb/perfectionist|perfectionist]] | * [[https://github.com/ben-eb/perfectionist|perfectionist]] |
| | * [[https://vanilla-extract.style/|vanilla-extract]] |
| * [[https://github.com/callstack/linaria|Linaria]] | * [[https://github.com/callstack/linaria|Linaria]] |
| | * [[https://compiledcssinjs.com/|Compiled]] |
| * [[http://css-blocks.com/|CSS Blocks]] | * [[http://css-blocks.com/|CSS Blocks]] |
| ====Framework==== | ====Framework==== |
| | * [[https://open-props.style/|Open Props]] |
| * [[http://usablica.github.io/front-end-frameworks/compare.html|CSS Front-end Frameworks]] | * [[http://usablica.github.io/front-end-frameworks/compare.html|CSS Front-end Frameworks]] |
| * [[http://css.hanzi.co/|漢字標準格式]] | * [[http://css.hanzi.co/|漢字標準格式]] |
| * [[http://typeplate.com/|Typeplate]] | * [[http://typeplate.com/|Typeplate]] |
| * [[http://purecss.io/|Pure]] | * [[http://purecss.io/|Pure]] |
| | * [[https://picocss.com/|Pico CSS]] |
| * [[http://www.basscss.com/|Basscss]] | * [[http://www.basscss.com/|Basscss]] |
| * [[http://inuitcss.com/|inuit.css]] | * [[http://inuitcss.com/|inuit.css]] |
| * [[https://tailwindcss.com/|Tailwind CSS]] | * [[https://tailwindcss.com/|Tailwind CSS]] |
| * [[https://andybrewer.github.io/mvp/|MVP.css]] | * [[https://andybrewer.github.io/mvp/|MVP.css]] |
| | * [[https://www.bonsaicss.com/|Bonsai]] |
| | * [[https://open-props.style/|Open Props]] |
| ===Grid=== | ===Grid=== |
| * [[http://zengrids.com/|Zen Grids]] | * [[http://zengrids.com/|Zen Grids]] |
| * [[https://botoxparty.github.io/XP.css/|XP.css]] | * [[https://botoxparty.github.io/XP.css/|XP.css]] |
| * [[https://latex.now.sh/|LATEX.css]] | * [[https://latex.now.sh/|LATEX.css]] |
| | * [[https://github.com/sakofchit/system.css|System.css]] |
| ====Hack==== | ====Hack==== |
| * [[http://browserhacks.com/|Browserhacks]] | * [[http://browserhacks.com/|Browserhacks]] |
| * [[http://www.btinternet.com/~Jeff_Novis/T171_TMA_03/|有趣的置頂選單]] | * [[http://www.btinternet.com/~Jeff_Novis/T171_TMA_03/|有趣的置頂選單]] |
| * [[http://www.sitepoint.com/new-css-image-replacement-technique/|Goodbye -9999px: A New CSS Image Replacement Technique]] | * [[http://www.sitepoint.com/new-css-image-replacement-technique/|Goodbye -9999px: A New CSS Image Replacement Technique]] |
| * [[http://www.w3cplus.com/css/elements-horizontally-center-with-css.html|六种实现元素水平居中]] | * [[https://ishadeed.com/article/learn-css-centering/|Learn CSS Centering]] |
| * [[http://css-tricks.com/centering-css-complete-guide/|Centering in CSS: A Complete Guide]] | * [[http://css-tricks.com/centering-css-complete-guide/|Centering in CSS: A Complete Guide]] |
| * [[http://www.mademyday.de/css-height-equals-width-with-pure-css.html|Height equals width with pure CSS]] | * [[http://www.mademyday.de/css-height-equals-width-with-pure-css.html|Height equals width with pure CSS]] |
| ===版面=== | ===版面=== |
| * [[https://every-layout.dev/|Every Layout]] | * [[https://every-layout.dev/|Every Layout]] |
| | ===漸變=== |
| | * [[https://whistlr.info/2021/box-model-animation/|How I Learnt To Stop Worrying And Love Animating The Box Model]] |
| | * [[https://nemzes.net/posts/animating-height-auto/|Animating height: auto]] |
| =====工具===== | =====工具===== |
| | * [[https://lightningcss.dev/|Lightning CSS]] |
| * [[https://github.com/morishitter/stylefmt|stylefmt]] | * [[https://github.com/morishitter/stylefmt|stylefmt]] |
| * [[http://howtocenterincss.com/|How to Center in CSS]] | * [[http://howtocenterincss.com/|How to Center in CSS]] |
| ===Effect=== | ===Effect=== |
| * [[http://css-tricks.com/glitch-effect-text-images-svg/|Glitch Effect on Text / Images / SVG]] | * [[http://css-tricks.com/glitch-effect-text-images-svg/|Glitch Effect on Text / Images / SVG]] |
| | * [[https://codepen.io/thebabydino/pen/MWPWXXw|1 div pure CSS blinds staggered animation in 13 declarations]] |
