跳至內容
WMの写本
使用者工具
登入
網站工具
搜尋
工具
顯示頁面
舊版
反向連結
最近更新
多媒體管理器
網站地圖
登入
>
最近更新
多媒體管理器
網站地圖
您在這裏:
start
»
computer
»
web
»
css
足跡:
•
web
computer:web:css
本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
======CSS====== * [[https://developer.mozilla.org/en/CSS/CSS_Reference|CSS Reference]] * [[http://tympanus.net/codrops/css_reference/|CSS Reference]] * [[http://cssspecificity.com/|CSS Specificity]] * [[http://www.w3.org/TR/css3-selectors/|CSS3 Selectors]] * [[http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/|The 30 CSS Selectors you Must Memorize]] * [[http://css-tricks.com/14771-a-call-for-nth-everything/|A Call for ::nth-everything]] * [[http://css-tricks.com/useful-nth-child-recipies/|Useful :nth-child Recipes]] * [[http://www.impressivewebs.com/css-terms-definitions/|CSS Terms and Definitions]] * [[http://nimbupani.com/css-vocabulary.html|CSS Vocabulary]] * [[https://developer.mozilla.org/en/CSS-2_Quick_Reference/Units|Units]] * [[http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/|Mastering CSS Coding: Getting Started]] * [[http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/|The Principles Of Cross-Browser CSS Coding]] * [[http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm|CSS Tutorial Traditional Chinese]] * [[http://isd.tencent.com/css3/|CSS 3.0 参考手册 (中文版)]] * [[http://atedev.wordpress.com/2008/03/21/ie%E9%99%A4%E5%A4%96-counter%E5%B1%AC%E6%80%A7/|Counter屬性]] * [[http://www.quirksmode.org/css/textshadow.html|text-shadow]] * [[http://www.sitepoint.com/mastering-css3-7-cool-text-shadow-samples-you-can’t-miss/|7 Cool text-shadow Samples You Can’t Miss]] * [[http://www.w3cplus.com/css3/text-effect|CSS3 制作文字特效]] * [[http://www.midwinter-dg.com/permalink-7-great-css-based-text-effects-using-the-text-shadow-property_2011-03-03.html|7 Great CSS based text effects using the text-shadow property]] * [[http://cssglobe.com/drawing-calendar-icon-with-css3/|Drawing Calendar Icon With CSS3]] * [[http://www.azarask.in/blog/post/protecting-email-with-css/|How To Phish, Protect Your Email, and Defeat Copy-And-Paste with CSS]] * [[http://code.google.com/p/cleanstickyfooter/|Clean Sticky Footer]] * [[http://css-tricks.com/examples/ShapesOfCSS/|The Shapes of CSS]] * [[http://nicolasgallagher.com/pure-css-gui-icons/|Pure CSS GUI icons]] * [[http://www.bchanx.com/logos-in-pure-css-demo|Logos In Pure CSS]] * [[http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/|CSS: Clearing Floats with Overflow]] * [[http://davidwalsh.name/css-gradients|CSS Gradients]] * [[http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/|Beveled corners & negative border-radius with CSS3 gradients]] * [[http://jonrohan.me/guide/css/creating-triangles-in-css/|Creating Triangles in CSS]] * [[http://jtauber.github.io/articles/css-hexagon.html|CSS Hexagon Tutorial]] * [[http://forrst.com/posts/CSS3_Triangle_Gradients-XGU|CSS3 Triangle Gradients]] * [[http://lea.verou.me/css3-secrets/|CSS3 Secrets]] * [[http://css3clickchart.com/|CSS3 Click Chart]] * [[http://css3generator.com/|CSS3 Generator]] * [[http://css3please.com/|CSS3 Please! The Cross-Browser CSS3 Rule Generator]] * [[https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle|window.getComputedStyle]] * [[http://mrmrs.io/writing/2016/03/24/scalable-css/|CSS and Scalability]] ====CSSOM==== * [[https://github.com/mathiasbynens/CSS.escape|CSS.escape]] * [[https://css-houdini.rocks/|CSS Houdini Experiments]] * [[https://houdini.how/|Houdini.how]] ====Media Query==== * [[https://developer.mozilla.org/en/DOM/window.matchMedia|MatchMedia]] (JS Side) * [[https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries|Testing media queries programmatically]] * [[https://github.com/benschwarz/metaquery|metaQuery]] * [[http://glenmaddern.com/metaquery-and-the-end-of-media-queries/|Metaquery and the end of media queries]] * [[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://www.paulund.co.uk/boilerplate-css-media-queries|Boilerplate CSS Media Queries]] * [[http://www.thismanslife.co.uk/projects/lab/responsivewireframes/|Responsive Layouts, Responsively Wireframed]] * [[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?]] ====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==== * [[http://colours.neilorangepeel.com/|Colours]] * [[http://topaxi.codes/modifying-css-colors-with-the-color-function/|Modifying CSS Colors with the color() function]] * [[http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/|LCH colors in CSS: what, why, and how?]] ====Variable==== * [[http://demosthenes.info/blog/908/The-First-CSS-Variable-currentColor|The First CSS Variable: currentColor]] * [[http://codepen.io/kevinSuttle/pen/pbzxZZ|System Colors]] * [[http://philipwalton.com/articles/why-im-excited-about-native-css-variables/|Why I'm Excited About Native CSS Variables]] * [[https://pawelgrzybek.com/css-custom-properties-explained/|CSS Custom Properties explained]] * [[https://patrickbrosset.com/articles/2020-09-21-3-things-about-css-variables-you-might-not-know/|3 things about CSS variables you might not know]] * [[http://kizu.ru/en/blog/variable-order/|Variable Order]] * [[http://lea.verou.me/2016/09/autoprefixing-with-css-variables/|Autoprefixing, with CSS 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://open-props.style/|Open Props]] ===Mixin=== * [[https://blog.gospodarets.com/css_apply_rule|CSS @apply rule (native CSS mixins)]] ====Mathematical Expressions==== * [[http://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/|Getting Started With CSS calc()]] * [[https://blog.logrocket.com/flexible-layouts-without-media-queries/|Flexible layouts without media queries]] ====Cursor==== * [[http://www.quirksmode.org/css/cursor.html|Cursor Styles]] * [[http://www.sitepoint.com/css3-cursor-styles/|Introducing the New Cursor Styles in CSS3]] ====Outline==== * <code css>:focus:not(:focus-visible) { outline: none }</code> * [[https://twitter.com/SaraSoueidan/status/1335270452235792387|Create inset outlines with negative outline-offset]] ====Border==== * [[https://9elements.github.io/fancy-border-radius/|Fancy Border Radius Generator]] ====Selectors==== * [[http://galjot.si/helpful-css-pseudo-selectors|With a little help from pseudo-selectors]] * [[http://nthmaster.com/|Mastering the :nth-child]] * [[http://robdodson.me/blog/2013/11/15/the-cat-and-the-hat-css-selectors/|The Cat and the Hat CSS Selectors]] * [[http://topaxi.codes/custom-css-selectors/|Custom CSS Selectors]] * [[http://www.scottohara.me/blog/2017/05/14/focus-within.html|CSS :focus-within]] ====Pseudo Elements==== * [[https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/|The CSS "content" property accepts alternative text]] * [[http://css-tricks.com/pseudo-element-roundup/|A Whole Bunch of Amazing Stuff Pseudo Elements Can Do]] * [[http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/|List of Pseudo-Elements to Style Form Controls]] * [[http://tympanus.net/codrops/2013/05/22/examples-of-pseudo-elements-animations-and-transitions/|Examples of Pseudo-Elements Animations and Transitions]] * [[http://tympanus.net/codrops/2013/07/05/using-custom-data-attributes-and-pseudo-elements/|Using Custom Data Attributes and Pseudo-Elements]] * The escape notation <code>\a</code> in a CSS string literal indicates a line break character. <code css>::before { content: 'Figure \a' attr(title) ' '; white-space: pre-line; }</code> ====Text==== * [[http://stackoverflow.com/questions/2040788/whats-the-difference-between-line-height1-5-and-line-height150-in-css|What's the difference between line-height:1.5 and line-height:150% in css?]] * [[http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align|Deep dive CSS: font metrics, line-height and vertical-align]] * [[https://css-tricks.com/almanac/properties/h/hanging-punctuation/|hanging-punctuation]] ===Font=== * [[http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax|The New Bulletproof @Font-Face Syntax]] * [[https://meowni.ca/posts/web-fonts/|Web fonts, boy, I don't know]] * [[https://font-display.glitch.me/|Font-display]] ====Table==== * [[http://csswizardry.com/2013/11/taming-data-tables/|Taming data tables]] ====Form==== * [[http://www.sitepoint.com/html5-forms-css/|HTML5 Forms: CSS]] ====List==== * [[https://hacks.mozilla.org/2015/02/introducing-counter-styles/|Introducing @counter-style]] ====Print==== * [[https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/|Designing For Print With CSS]] * [[https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.jlsnmmzhc|I totally forgot about print style sheets]] * [[http://slodive.com/web-development/css-print-page-tricks/|15 Important CSS Print Page Tricks]] ====Display==== * [[http://www.iyunlu.com/view/css-xhtml/64.html|inline-block 前世今生]] * [[http://codepen.io/simurai/pen/evgVvm/|Wrap at sibling's width]] * [[http://blog.cloud66.com/position-sticky-problem/|position: sticky problem]] ====Float==== * [[http://perishablepress.com/margin-list-floated-image/|Force Margin/Space Between List and Floated Image]] * [[http://nicolasgallagher.com/micro-clearfix-hack/|A new micro clearfix hack]] ====Z-Index==== * [[http://philipwalton.com/articles/what-no-one-told-you-about-z-index/|What No One Told You About Z-Index]] ====Flexbox==== * [[https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/|An Interactive Guide to Flexbox]] * [[http://chriswrightdesign.com/experiments/flexbox-adventures/|Flexbox adventures]] * [[http://briandiehr.com/#/layout-editor|Flex Box Editor]] * [[https://www.flexulator.com/|Flexulator]] * [[http://philipwalton.github.io/solved-by-flexbox/|Solved by Flexbox]] * [[http://bennettfeely.com/flexplorer/|CSS3 Flexible Box Layout Explorer]] * [[http://flexboxfroggy.com/|Flexbox Froggy]] * [[http://www.flexboxdefense.com/|Flexbox Defense]] * [[http://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]] * [[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc|The Complete CSS Flex Box Tutorial]] * [[http://www.sketchingwithcss.com/samplechapter/cheatsheet.html|The Ultimate Flexbox Cheat Sheet]] * [[http://codepen.io/osublake/full/dMLQJr/|Animated Flexbox Playground]] * [[https://medium.com/@Heydon/flexbox-grid-finesse-4d22b80bfee1|Flexbox Grid Finesse]] * [[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://www.chenhuijing.com/blog/flexbox-and-padding/|Flexbox and padding]] ====Box Sizing==== * [[http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/|Inheriting box-sizing Probably Slightly Better Best-Practice]] * [[https://ishadeed.com/article/intrinsic-sizing-in-css/|Intrinsic Sizing In CSS]] ====Grid==== * [[https://www.mozilla.org/en-US/developer/css-grid/|CSS Grid and Grid Inspector in Firefox]] * [[https://cssgrid.io/|CSS Grid]] * [[http://gridbyexample.com/|Grid by Example]] * [[http://cssgridgarden.com/|Grid Garden]] * [[https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks|Grid “fallbacks” and overrides]] * [[https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/|Breaking out with CSS Grid explained]] * [[https://daverupert.com/2017/09/breaking-the-grid/|Breaking the Grid]] * [[https://bitsofco.de/understanding-the-difference-between-grid-template-and-grid-auto/|Understanding the difference between grid-template and grid-auto]] * [[https://css-tricks.com/preventing-a-grid-blowout/|Preventing a Grid Blowout]] ====Shapes==== * [[http://sarasoueidan.com/blog/css-shapes/|Creating Non-Rectangular Layouts with CSS Shapes]] ====Shadow==== * [[https://www.joshwcomeau.com/css/designing-shadows/|Designing Beautiful Shadows in CSS]] * [[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]] * [[https://tobiasahlin.com/blog/layered-smooth-box-shadows/|Smoother & sharper shadows with layered box-shadows]] * [[https://brumm.af/shadows|Make a smooth shadow, friend]] * [[http://nicolasgallagher.com/css-drop-shadows-without-images/|CSS drop-shadows without images]] * [[http://tympanus.net/codrops/2013/08/27/3d-shading-with-box-shadows/|3D Shading with Box-Shadows]] * Bottom only <code css>box-shadow: 0 4px 2px -2px gray;</code> ====Overflow==== * [[https://ishadeed.com/article/overflow-css/|Overflow In CSS]] * [[http://bocoup.com/weblog/new-overflow-default/|CSS: Should we change the default for overflow?]] * [[http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/|CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS]] * <code>-webkit-overflow-scrolling: touch;</code> * [[https://svenkadak.com/blog/scrollbar-blindness|Scrollbar Blindness]] ====Mask==== * [[http://bennettfeely.com/clippy/|Clippy]] ====Background==== * [[http://lea.verou.me/2012/04/background-attachment-local/|Pure CSS scrolling shadows with background-attachment: local]] * [[http://codepen.io/giana/pen/qmKNeE|CSS-only shimmering neon text]] * [[http://css-tricks.com/stripes-css/|Stripes in CSS]] === Gradient === * [[https://gradient.style/|CSS HD Gradients]] * [[http://leaverou.github.io/conic-gradient/|CSS conic-gradient() polyfill]] * [[http://colinkeany.com/blend/|Blend]] * [[https://www.grabient.com/|Grabient]] * use <code>rgba(255,255,255,0)</code> instead of <code>transparent</code> in linear-gradient for Firefox and Safari * [[http://keithjgrant.com/posts/2017/07/transitioning-gradients/|Transitioning Gradients]] * [[https://github.com/larsenwork/postcss-easing-gradients|PostCSS Easing Gradients]] * [[https://cssgradient.io/|CSS Gradient]] * [[https://medium.com/pixel-and-ink/avoiding-jagged-edges-on-gradients-f485cc7401f5|Avoiding jagged edges on gradients.]] * [[https://css-tricks.com/background-patterns-simplified-by-conic-gradients/|Background Patterns, Simplified by Conic Gradients]] ====Animation==== * [[http://css3.bradshawenterprises.com/|CSS3 Transitions, Transforms and Animation Tutorial]] * [[http://easings.net/zh-tw|Easing Functions Cheat Sheet]] * [[http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/|High Performance Animations]] * [[http://css-tricks.com/css-animation-tricks/|CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More]] * [[http://tobiasahlin.com/blog/curved-path-animations-in-css/|Moving along a curved path in CSS with layered animation]] ===Transition=== * [[http://leaverou.github.com/animatable/|Animatable]] * [[http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/|Experimental CSS3 Animations for Image Transitions]] * [[http://n12v.com/css-transition-to-from-auto/|CSS transition from/to auto values]] ===Tool=== * [[http://waitanimate.eggbox.io/|WAIT! Animate]] * [[http://animista.net/|Animista]] ====Transform==== * [[http://desandro.github.com/3dtransforms/|Intro to CSS 3D transforms]] * [[http://www.the-art-of-web.com/css/3d-transforms|CSS: 3D Transforms and Animations]] * [[http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/|Un-fixing Fixed Elements with CSS Transforms]] * [[http://photon.attasi.com/|Photon]] * [[http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/|Computing CSS matrix3d transforms]] * [[https://developers.google.com/web/updates/2017/03/custom-scrollbar|CSS deep-dive: matrix3d() for a frame-perfect custom scrollbar]] ===Effect=== * [[http://tympanus.net/codrops/2013/07/11/animated-books-with-css-3d-transforms/|Animated Books with CSS 3D Transforms]] ===Matrix=== * [[https://github.com/jlmakes/rematrix|Rematrix]] ====Image==== * [[http://bennettfeely.com/image-effects/|Image Effects with CSS]] * [[http://sarasoueidan.com/blog/compositing-and-blending-in-css/|Compositing And Blending In CSS]] * [[http://bitsofco.de/styling-broken-images/|Styling Broken Images]] * [[https://leanrada.com/notes/css-only-lqip/|Minimal CSS-only blurry image placeholders]] ===Filter=== * [[http://css.dzone.com/articles/css3-image-filters|CSS3 Image Filters]] ====Directional==== * [[https://github.com/tysonmatanich/directional-scss|Directional-SCSS]] ====3D==== * [[http://tridiv.com/|Tridiv]] * [[http://www.voxelcss.com/|voxel.css]] ====Interaction==== * [[https://jakearchibald.com/2017/events-and-disabled-form-fields/|Events and disabled form fields]] ====Performance==== * [[http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/|CSS performance revisited: selectors, bloat and expensive styles]] * [[https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property|Fix scrolling performance with CSS will-change property]] * [[https://web.dev/content-visibility/|content-visibility: the new CSS property that boosts your rendering performance]] =====資源===== * [[https://cssdb.org/|What’s next for CSS?]] * [[https://github.com/captainbrosset/inactive-css|Inactive CSS]] * [[http://flukeout.github.io/|CSS Diner]] * [[http://graphicpeel.com/cssiosicons|iOS Icons made in Pure CSS]] * [[http://cssicon.space/|CSS ICON]] * [[http://one-div.com/|One div]] * [[http://css4-selectors.com/|CSS4-Selectors]] * [[http://css4.rocks/|CSS4 Rocks]] * [[http://cssdb.co/|CSSDB]] * [[http://josh.github.io/css-explain/|CSS Explain]] * [[http://csstriggers.com/|CSS Triggers]] * [[http://cikonss.zzapwebdesign.com/|Cikonss]] * [[http://www.vanillacss.com/|Vanilla CSS]] * [[http://csste.st/|csste.st]] * [[http://www.adamkaplan.me/grid/|Grid]] * [[http://www.campaignmonitor.com/css/|Guide to CSS support in email]] ==示範== * [[https://github.com/bensmithett/style/|style]] * [[http://barebones.paulrobertlloyd.com/|Barebones]] * [[http://corysimmons.github.io/typographic/|Typographic]] ====教學==== * [[http://cssreference.io/|CSS Reference]] * [[http://reference.sitepoint.com/css|SitePoint CSS Reference]] * [[https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS|Writing efficient CSS]] * [[https://30-seconds.github.io/30-seconds-of-css/|30 Seconds of CSS]] * [[http://www.noupe.com/how-tos/9-css-ethics-every-designer-should-have.html|9 CSS Ethics Every Designer Should Have]] * [[https://github.com/AllThingsSmitty/css-protips|CSS Protips]] * [[http://www.w3cn.org/article/translate/2005/104.html|CSS的十八般技巧]] * [[http://minipai.tumblr.com/post/50355779525/css|你以為的CSS最佳寫法是錯的]] * [[http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/|Profiling CSS for fun and profit. Optimization notes.]] * [[http://csswizardry.com/2011/09/writing-efficient-css-selectors/|Writing efficient CSS selectors]] * [[http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/|Shoot to kill; CSS selector intent]] * [[http://csswizardry.com/2012/11/code-smells-in-css/|Code smells in CSS]] * [[http://engineering.appfolio.com/2012/11/16/css-architecture/|CSS Architecture]] * [[http://simianuprising.com/2012/02/28/dry-css-slides-from-my-confoo-2012-talk/|DRY CSS]] * [[http://www.sitepoint.com/series/css-architectures/|CSS Architectures]] * [[http://philipwalton.com/articles/dynamic-selectors/|Dynamic Selectors]] * [[https://medium.com/p/8f433689736f|Sizing (Web) components]] * [[http://tympanus.net/codrops/2013/07/17/troubleshooting-css/|Troubleshooting CSS]] * [[http://simurai.com/blog/2015/09/09/back-to-the-roots/|Back to the :roots]] * [[https://www.rtlstyling.com/|Right-to-left Styling]] ====守則==== * [[https://github.com/necolas/idiomatic-css|Principles of writing consistent, idiomatic CSS]] * [[http://cssguidelin.es/|High-level advice and guidelines for writing sane, manageable, scalable CSS]] * [[http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/|Semantic CSS With Intelligent Selectors]] * [[http://oocss.org/|Object-Oriented CSS]] * [[http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/|Object Oriented CSS, Grids on Github]] * [[http://www.slideshare.net/stubbornella/object-oriented-css|Object Oriented CSS]] * [[http://www.slideshare.net/stubbornella/what-is-object-oriented-css|What is Object Oriented CSS?]] * [[http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/|OOCSS + Sass = The best way to CSS]] * [[http://philipwalton.com/articles/the-future-of-oocss-a-proposal/|The Future of OOCSS: A Proposal]] * [[http://smacss.com/book/|Scalable and Modular Architecture for CSS]] * [[http://bem.info/|BEM]] * [[http://nicolasgallagher.com/about-html-semantics-front-end-architecture/|About HTML semantics and front-end architecture]] * [[http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/|MindBEMding – getting your head ’round BEM syntax]] * [[https://medium.com/@marcmintel/pushing-bem-to-the-next-level-with-sass-3-4-5239d2371321|Pushing BEM to the next level with Sass 3.4]] * [[http://webuild.envato.com/blog/chainable-bem-modifiers/|Chainable BEM modifiers]] * [[http://amcss.github.io/|AMCSS - Attribute Modules for CSS]] * [[http://primercss.io/|Primer]] * [[http://purple.herokuapp.com/|Purple]] * [[http://ecss.io/|Enduring CSS]] ====輔助程式==== * [[http://csspre.com/|CSS PREprocessors]] * [[computer:web:css:SASS]] * [[http://lesscss.org/|LESS]] * [[http://wearekiss.com/simpless|SimpLESS]] * [[http://leafo.net/lessphp/|lessphp]] * [[http://getpreboot.com/|Preboot]] * [[http://lesshat.madebysource.com/|LESS Hat]] * [[https://github.com/visionmedia/rework|rework]] * [[http://www.myth.io/|Myth]] * [[https://github.com/sindresorhus/grunt-myth|grunt-myth]] * [[http://tachyons.io/|Tachyons]] * [[http://learnboost.github.com/stylus/|Stylus]] * [[http://visionmedia.github.io/nib/|nib]] * [[https://github.com/jenius/rupture|Rupture]] * [[http://kouto-swiss.io/|kouto swiss]] * [[http://roole.org/|Roole]] * [[http://turbinecss.org/|Turbine]] * [[http://www.glazman.org/JSCSSP/|JSCSSP]] * [[http://the-echoplex.net/csscrush/|CSS-Crush]] * [[http://pcss.wiq.com.br/|PCSS]] * [[http://leaverou.github.com/prefixfree/|-prefix-free]] * [[https://github.com/ai/autoprefixer|Autoprefixer]] * [[http://browserl.ist/|browserl.ist]] * [[https://github.com/css/csso|CSSO]] * [[http://zmoazeni.github.io/csscss/|csscss]] (Redundancy Analyzer) * [[https://github.com/giakki/uncss|UnCSS]] * [[https://github.com/addyosmani/grunt-uncss|grunt-uncss]] * [[https://github.com/addyosmani/grunt-uncss-sass-example|grunt-uncss-sass-example]] * [[https://github.com/LearnBoost/juice|Juice]] (Inline to HTML) * [[https://github.com/geuis/helium-css|Helium]] * [[http://www.hitchjs.com/|Hitch]] * [[http://warpspire.com/kss/|Knyle Style Sheets]] (Guideline Writing) * [[https://github.com/soenkeschnoor/grunt-kss/blob/master/package.json|grunt-kss]] * [[http://jacobrask.github.com/styledocco/|StyleDocco]] (Style guide documents) * [[http://kaleistyleguide.com/|Kalei]] (Living style guide) * [[http://cburgmer.github.io/csscritic/|CSS Critic]] * [[https://github.com/thingsinjars/ghoststory|GhostStory]] * [[http://thingsinjars.github.io/cssert/|cssert]] * [[http://gridstylesheets.org/|Grid Style Sheets]] * [[https://github.com/almonk/bind|Bind]] * [[https://github.com/SlexAxton/css-colorguard|CSS Colorguard]] * [[https://github.com/filamentgroup/grunt-criticalcss|grunt-criticalcss]] * [[https://github.com/addyosmani/critical|Critical]] * [[https://github.com/postcss/postcss|PostCSS]] * [[http://pleeease.io/|Pleeease]] * [[https://github.com/jonathantneal/precss|PreCSS]] * [[https://github.com/postcss/sugarss|SugarSS]] * [[https://preset-env.cssdb.org/|postcss-preset-env]] * [[http://topaxi.codes/custom-css-selectors/|Custom CSS Selectors]] * [[https://github.com/jonathantneal/postcss-env-function|postcss-env-function]] * [[https://github.com/ben-eb/cssnano|cssnano]] * [[https://github.com/jonathantneal/postcss-write-svg|Write SVG]] * [[https://github.com/jonathantneal/postcss-short|Short]] * [[https://github.com/corysimmons/lost|Lost Grid]] * [[http://simplaio.github.io/rucksack/|Rucksack]] * [[https://github.com/twitter/css-flip|css-flip]] * [[https://github.com/css-modules|CSS Modules]] * [[https://github.com/css-modules/postcss-modules-local-by-default|CSS Modules: Local by Default]] * [[http://acss.io/|Atomic CSS]] * [[https://github.com/jsstyles/jss|JSS]] * [[http://descartes.io/|Descartes]] * [[https://github.com/ben-eb/perfectionist|perfectionist]] * [[https://vanilla-extract.style/|vanilla-extract]] * [[https://github.com/callstack/linaria|Linaria]] * [[https://compiledcssinjs.com/|Compiled]] * [[http://css-blocks.com/|CSS Blocks]] ====Framework==== * [[https://open-props.style/|Open Props]] * [[http://usablica.github.io/front-end-frameworks/compare.html|CSS Front-end Frameworks]] * [[http://css.hanzi.co/|漢字標準格式]] * [[http://typeplate.com/|Typeplate]] * [[http://purecss.io/|Pure]] * [[https://picocss.com/|Pico CSS]] * [[http://www.basscss.com/|Basscss]] * [[http://inuitcss.com/|inuit.css]] * [[https://milligram.io/|Milligram]] * [[https://github.com/necolas/suit/|Suit]] * [[http://www.blueprintcss.org/|Blueprint]] * [[http://elements.projectdesigns.org/|Elements]] * [[http://matthewhartman.github.io/base/|Base]] * [[http://daneden.me/toast/|Toast]] * [[http://xcss.antpaw.org/|xCSS]] * [[http://elasticss.com/|Elastic]] * [[http://lessframework.com/|Less Framework]] * [[http://www.columnal.com/|Columnal]] * [[http://tsi.github.io/Salsa/|Salsa]] * [[http://singularity.gs/|Singularity]] * [[http://www.muellergridsystem.com/|MUELLER]] * [[http://xycss.com/|xy.css]] * [[http://imperavi.com/kube/|Kube]] * [[http://goldilocksapproach.com/|The Goldilocks Approach]] * [[http://www.quantumoutsourcing.com/quantum-framework/|Quantum framework]] * [[http://www.yaml.de/|YAML]] * [[http://getskel.com/|Skel]] * [[http://krasimir.github.io/organic-css/|Organic CSS]] * [[https://tailwindcss.com/|Tailwind CSS]] * [[https://andybrewer.github.io/mvp/|MVP.css]] * [[https://www.bonsaicss.com/|Bonsai]] * [[https://open-props.style/|Open Props]] ===Grid=== * [[http://zengrids.com/|Zen Grids]] * [[http://simplegrid.info/|SimpleGrid]] * [[http://csswizardry.com/csswizardry-grids/|csswizardry-grids]] * [[http://builtbyboon.com/blog/proportional-grids|Proportional Grids]] * [[http://cssgrid.net/|The 1140px CSS Grid System]] * [[http://dfcb.github.io/extra-strength-responsive-grids/|Extra Strength Responsive Grid]] * [[http://rwdgrid.com/|rwdgrid]] * [[http://thisisdallas.github.io/Simple-Grid/|Simple Grid]] * [[http://onepcssgrid.mattimling.com/|One% CSS Grid]] * [[https://github.com/jaokuohsuan/ab_grid|ab grid]] * [[http://cobyism.com/gridism/|Gridism]] * [[http://www.fitgrd.com/|.Fitgrd]] * [[http://unsemantic.com/|Unsemantic]] * [[http://responsive.gs/|Responsive Grid System]] * [[http://www.columnal.com/|Columnal]] * [[http://semantic.gs/|The Semantic Grid System]] * [[http://jeet.gs/|Jeet]] * [[http://chrisnager.github.io/ungrid/|ungrid]] * [[http://colourgarden.net/avalanche/|Avalanche]] ==Flexbox== * [[http://ptb2.me/flexgrid/|flexgrid]] * [[http://flexboxgrid.com/|Flexbox Grid]] * [[http://bulma.io/|Bulma]] * [[https://github.com/WebReflection/bulma-tile|bulma-tile]] * [[https://github.com/pixelass/minus-grid|Minus minus grid]] ====便利工具==== * [[http://enjoycss.com/|EnjoyCSS]] * [[http://sandbox.juan-i.com/longshadows/|Long Shadows Generator]] * [[http://livetools.uiparade.com/|Ui Parade]] * [[http://www.blumentals.net/csstool/|Free CSS Toolbox]] * [[http://www.css3.me/|CSS3 Generator]] * [[http://gradient.inatorapp.com/|Gradiator]] * [[http://www.colorzilla.com/gradient-editor/|Ultimate CSS Gradient Generator]] * [[https://wweb.dev/resources/css-separator-generator|CSS Section Separator Generator]] * [[http://layerstyles.org/|Layer Styles]] * [[http://css3.mikeplate.com/|CSS3 Playground by Mike Plate]] * [[http://www.greywyvern.com/code/php/binary2base64|Binary File to Base64 Encoder / Translator]] * [[http://csstypeset.com/|CSS Type Set]] * [[http://css3maker.com/|CSS3.0 Maker]] * [[http://www.typetester.org/|Typetester]] * [[http://lab.xms.pl/css-generator/|CSS Frame Generator]] * [[http://csscomb.com/|CSScomb]] * [[http://www.brothercake.com/site/resources/scripts/cssutilities/|CSSUtilities]] * [[http://cssload.net/|CSSload.net]] * [[http://daneden.me/animate/|Animate.css]] * [[http://ianlunn.github.io/Hover/|Hover.css]] * [[http://minimamente.com/example/magic_animations/|Magic Animations]] * [[http://hiloki.github.io/kitecss/|Kite]] * [[http://cubic-bezier.com/|cubic-bezier]] * [[http://prefixr.com/|Prefixr]] * [[http://cssprefixer.appspot.com/|CSSPrefixer]] * [[http://www.red-root.com/sandbox/holmes/|Holmes]] (Diagnostic) * [[http://diagnosticss.github.io/|DiagnostiCSS]] * [[https://github.com/andyedinborough/stress-css|CSS Stress Test]] * [[http://pxtoem.com/|PXtoEM.com]] * [[http://specificity.keegan.st/|Specificity Calculator]] * [[http://barberboy.github.com/css-terminal/|CSS Terminal]] * [[http://border-radius.com/|CSS Border Radius Generator]] * [[http://border-image.com/|border-image-generator]] * [[http://css-tricks.com/examples/ButtonMaker/|Button Maker]] * [[http://aboutcode.net/vogue/|Vogue]] (Auto Reload) * [[http://ffffallback.com/|Ffffallback]] (Font Fallback) * [[http://needle.readthedocs.org/|Needle]] (Test) * [[http://basehold.it/|Basehold.it]] * [[http://bouncejs.com/|bounce.js]] * [[http://pesticide.io/|Pesticide]] * [[http://shrthnd.volume7.io/|CSS Shorthand Generator]] * [[https://github.com/kdzwinel/CSS-Diff|CSS Diff]] ===Consistency=== * [[http://necolas.github.com/normalize.css/|normalize.css]] * [[https://github.com/jensimmons/cssremedy|CSS Remedy ]] ===Analysis=== * [[http://cssstats.com/|CSS Stats]] * [[https://github.com/t32k/stylestats|StyleStats]] * [[https://github.com/katiefenn/parker|Parker]] * [[https://github.com/SlexAxton/css-colorguard|CSS Colorguard]] * [[https://developer.mozilla.org/zh-TW/docs/Tools/CSS_Coverage|CSS Coverage]] ===Prettifier=== * [[http://procssor.com/|ProCSSor]] * [[http://www.senchalabs.org/cssbeautify/|CSS Beautify]] ===Optimize=== * [[http://www.cleancss.com/|Clean CSS]] * [[http://www.styleneat.com/|Styleneat]] * [[http://csstidy.sourceforge.net/|CSSTidy]] * [[http://code.google.com/p/cssmin/|CssMin]] * [[https://github.com/begriffs/css-ratiocinator|CSS Ratiocinator]] * [[https://github.com/ded/sqwish|Sqwish]] * [[http://cssshrink.com/|CSS Shrink]] ===Quality=== * [[http://csslint.net/|CSS Lint]] * [[https://github.com/twitter/recess|RECESS]] * [[https://github.com/stylelint/stylelint|stylelint]] * [[https://github.com/stylelint/stylelint-config-standard|stylelint-config-standard]] * [[https://github.com/hudochenkov/stylelint-order|stylelint-order]] * [[https://github.com/sh-waqar/stylelint-declaration-use-variable|stylelint-declaration-use-variable]] * [[https://github.com/primer/stylelint-config-primer|Primer Stylelint Config]] * [[http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/|How to lint your Sass/CSS properly with Stylelint]] * [[https://maximgatilin.github.io/stylelint-config/|Stylelint Config Generator]] * [[http://immutablecss.com/|immutable-css]] ===Sprites=== * [[http://timc.idv.tw/canvas-css-sprites/zh-tw/|Canvas: CSS Sprite 製造機]] * [[http://csssprites.com/|CSS Sprites Generator]] * [[http://www.spritecow.com/|Sprite Cow]] * [[http://draeton.github.com/stitches/|Stitches]] * [[http://glue.readthedocs.org/|Glue]] * [[http://flag-sprites.com/|Flag Sprites]] * [[http://yostudios.github.io/Spritemapper/|Spritemapper]] * [[https://github.com/aslansky/css-sprite#command-line-interface|css-sprite]] ====樣板大觀==== * [[http://www.freecsstemplates.org/|Free CSS Templates]] * [[http://csszengarden.com/tr/chinese/|css Zen Garden]] * [[http://jakefolio.com/blog/2013/05/08/css-zengarden-empowering-crippling-developers/|CSS Zen Garden: Empowering and Crippling Developers]] * [[https://stylestage.dev/|Style Stage]] * [[https://nostalgic-css.github.io/NES.css/|NES.css]] * [[https://jdan.github.io/98.css/|98.css]] * [[https://botoxparty.github.io/XP.css/|XP.css]] * [[https://latex.now.sh/|LATEX.css]] * [[https://github.com/sakofchit/system.css|System.css]] ====Hack==== * [[http://browserhacks.com/|Browserhacks]] ===IE=== * [[https://github.com/nuxodin/ie11CustomProperties|CSS Variables Polyfill for IE11]] * [[http://css3pie.com/|CSS3 PIE]] * [[http://selectivizr.com/|Selectivizr]] <code css> width: 480px; /*ne-IE explorery*/ _width: 480px; /*IE 5.x*/ _w\idth: 460px; /*IE 6*/ </code> http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/ http://w3development.de/css/hide_css_from_browsers/ ==IE8== * <code>content: attr(title);</code> 必須在網頁裡已經有title這個attribute存在才會生效。 * 讓input變透明必須用<code>filter: alpha(opacity=0);</code> ===Firefox=== * Firefox 的 hidden 表單元素會莫名奇妙填上框線，這是個[[http://pennypacker.net/articles/five_bad_things_about_firefox|修正方法]] <code css>input[type=hidden] { visibility: hidden; }</code> * [[http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links|How to remove Firefox's dotted outline on BUTTONS as well as links?]] * input and button height not consistent<code css>::-moz-focus-inner { border: 0; padding: 0; }</code> ===Webkit=== * <code css>body {-webkit-user-modify:read-write}</code> ==Safari== * :hover works on iOS if the element has onmouseover like onmouseover=”" * [[https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/|CSS fix for 100vh in mobile WebKit]] (-webkit-fill-available) ====技巧==== * [[https://moderncss.dev/|Modern CSS Solutions]] * [[http://aykevl.nl/2014/09/fix-jumping-scrollbar|Fix 'jumping scrollbar' issue using only CSS]] * [[http://simurai.com/blog/2015/05/11/nesting-components/|Nesting Components]] * [[http://philipwalton.com/articles/extending-styles/|Extending Styles]] * [[http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/|How Our CSS Framework Helps Enforce Accessibility]] * [[https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/|Dealing with long words in CSS]] * [[http://codepen.io/MadeByMike/full/ZOrEmr/|Scroll Indicator]] * [[https://github.com/mladenplavsic/css-ripple-effect|Pure CSS ripple effect]] * [[https://medium.freecodecamp.org/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848|The Fab Four technique to create Responsive Emails without Media Queries]] * [[http://www.lottejackson.com/learning/nth-child-cicada-principle|Magic randomisation with nth-child and Cicada Principle]] * [[https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/|The Cicada Principle, revisited with CSS variables]] ===載入=== * [[https://master-origin-loadcss.fgview.com/test/preload.html|Async CSS w/ link[rel=preload]]] * [[https://jakearchibald.com/2016/css-loading-with-custom-props/|Control CSS loading with custom properties]] * [[https://www.filamentgroup.com/lab/load-css-simpler/|The Simplest Way to Load CSS Asynchronously]] ===定位=== * 定位物件浮起來的位置：\\ 上一層的物件使用''position:relative''，要浮起來的物件則使用''position:absolute''，\\ 就能使這層物件的定位基準點以上一層為準而浮起來。 * [[http://css-tricks.com/14745-centering-in-the-unknown/|Centering in the Unknown]] * [[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]] * [[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://www.mademyday.de/css-height-equals-width-with-pure-css.html|Height equals width with pure CSS]] * [[http://codepen.io/shshaw/full/gEiDt/|Absolute Centering in CSS]] * [[http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/|Vertical align anything with just 3 lines of CSS]] * [[http://christopheraue.net/2014/03/05/vertical-align/|All You Need To Know About Vertical-Align]] ===版面=== * [[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]] * [[http://howtocenterincss.com/|How to Center in CSS]] * [[http://www.testmycss.com/|TestMyCSS]] * [[https://github.com/csstree/csstree|CSSTree]] * [[https://www.layoutit.com/|LayoutIt]] ====文件==== * [[http://documentcss.com/|DocumentCSS]] * [[https://edwardtufte.github.io/tufte-css/|Tufte CSS]] ====清理==== * [[https://www.purgecss.com/|PurgeCSS]] =====應用===== * [[http://playground.deaxon.com/css/|CSS playground]] * [[https://github.com/zachstronaut/stop-sopa|text-shadow Box]] *Style Switcher\\ http://www.alistapart.com/articles/alternate/ *Professional drop line menu\\ http://www.cssplay.co.uk/menus/pro_dropline *Multiple Remote Linking\\ http://css-tricks.com/multiple-remote-linking-an-example-and-how-to/ *Clean Tab Bar Digg-like using CSS\\ http://woork.blogspot.com/2008/03/clean-tab-bar-digg-like-using-css.html * [[http://speckyboy.com/2011/01/03/32-javascript-alternatives-with-pure-css-updated/|32 Javascript Alternatives with Pure CSS]] * [[http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/|CSS3 Gradient Buttons]] * [[http://nicolasgallagher.com/pure-css-speech-bubbles/|Pure CSS speech bubbles]] * [[http://css-tricks.com/css3-progress-bars/|CSS3 Progress Bars]] * [[https://github.com/ivanvanderbyl/ui-progress-bar|Pure CSS Progress Bar]] * [[http://webdesignerwall.com/general/make-your-html-email-5-times-more-mobile-friendly|Make Your HTML Email 5½ Times More Mobile Friendly]] * [[http://www.we-are-gurus.com/blog/1501-create-a-3d-block-with-css3|Create a 3D block with CSS3]] * [[http://cubiq.org/building-a-pure-css-3d-city|Building a pure CSS 3D City]] * [[http://www.red-team-design.com/just-another-awesome-css3-buttons|Just some other awesome CSS3 buttons]] * [[http://webdesignerwall.com/tutorials/css3-image-styles-part-2|CSS3 Image Styles]] * [[http://webexpedition18.com/articles/useful-css-snippets/|Incredibly Useful CSS Snippets]] * [[http://codepo8.github.com/CSS3-Rainbow-Dividers/|CSS3-Rainbow-Dividers]] * [[http://www.456bereastreet.com/archive/201110/styling_button_elements_to_look_like_links/|Styling button elements to look like links]] * [[http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/|Splash and Coming Soon Page Effects with CSS3]] * [[http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/|Slopy Elements with CSS3]] * [[http://mattbango.com/notebook/web-development/pure-css-timeline/|Pure CSS Timeline]] * [[http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/|Coding up a semantic, lean timeline]] * [[http://tympanus.net/codrops/2011/12/26/css3-lightbox/|CSS3 Lightbox]] * [[http://css-plus.com/2011/02/create-a-lightbox-with-css3/|Create a lightbox with CSS3]] * [[http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/|Page Transitions with CSS3]] * [[http://www.red-team-design.com/css3-breadcrumbs|CSS3 breadcrumbs]] * [[http://tympanus.net/codrops/2012/02/21/accordion-with-css3/|Accordion with CSS3]] ===Color=== * [[http://blog.madebymike.com.au/accessible-contrast-ratios-with-less-sass/|Accessible contrast with Less and Sass]] ===Image=== * [[http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html|Cross-Browser Image Grayscale with CSS]] ===Banner=== * [[http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/|Animated Web Banners With CSS3]] ===Gallery=== * [[http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/|Filter Functionality with CSS3]] ===Slideshow=== * [[http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/|Fullscreen Background Image Slideshow with CSS3]] * [[http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/|Sliding Image Panels with CSS3]] ===Button=== * [[http://lab.simurai.com/buttons/|BonBon Buttons]] * [[http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/|Animated Buttons with CSS3]] * [[http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/|CSS Buttons with Pseudo-elements]] * [[http://css-tricks.com/youtube-popup-buttons/|YouTube Popup Buttons]] ===Menu=== * [[http://cssmenumaker.com/|CSS Menu Maker]] * [[http://www.ndesign-studio.com/blog/mac/css-dock-menu|CSS Dock Menu]] * [[http://michaelhue.com/cssdock/|CSS Dock]] * [[http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/|CSS3 Dropdown Menu]] * [[http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/|Creative CSS3 Animation Menus]] * [[http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/|Blur Menu with CSS3 Transitions]] * [[http://www.script-tutorials.com/pure-css3-slider/|Pure CSS3 Slider]] * [[http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/|How to spice up your menu with CSS3]] * [[http://jacklmoore.com/notes/css3-ribbon-menu/|CSS Ribbon Menu]] * [[http://webdesignerwall.com/tutorials/css-responsive-navigation-menu|CSS: Responsive Navigation Menu]] ===Pager=== * [[http://www.jaceju.net/blog/archives/223|[CSS] 多種分頁樣式範例]] ===Hover=== * [[http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/|Original Hover Effects with CSS3]] * [[http://designbomb.blogspot.in/2012/02/multi-directional-hover-effect-in-css.html|A Multi-Directional Hover Effect in CSS]] * [[http://jsdo.it/ksk1015/cLLl|borderとtransitionを使ったエフェクト]] ===Form=== * [[http://simurai.com/post/1155924231/css3-appearance-none|umbrUI]] * [[http://boxiedesigner.com/web-design/creating-an-html5-and-css3-form-using-the-new-form-types/|Creating an HTML5 Form Using the New Form Types]] * [[http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/|Design a Prettier Web Form with CSS 3]] * [[http://www.onextrapixel.com/2012/01/23/full-css3-html5-contact-form-with-no-images/|Full CSS3 HTML5 Contact Form with No Images]] * [[http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript|How to style a <select> dropdown with CSS only without JavaScript?]] ==Search== * [[http://azadcreative.com/2010/11/designing-search-boxes-html5-css3/|Designing Search Boxes with HTML5 and CSS3]] * [[http://webdesignerwall.com/tutorials/beautiful-css3-search-form/|Beautiful CSS3 Search Form]] ===Background=== * [[http://lea.verou.me/css3patterns/|CSS3 Patterns Gallery]] * [[https://bansal.io/pattern-css|pattern.css]] * [[http://codepen.io/noahblon/details/GKflw|Hyperspace]] * [[http://css-tricks.com/blurry-transparent-header-effect-ios7-css/|Blurry Transparent Header Effect from iOS7 in CSS]] ===Tooltip=== * [[http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/|How to create animated tooltips with CSS3]] ===List=== * [[http://www.red-team-design.com/css3-ordered-list-styles|CSS3 ordered list styles]] * [[http://css-tricks.com/how-to-create-a-notebook-design-with-css/|How To Create a Notebook Design with CSS]] ===Effect=== * [[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]]
computer/web/css.txt
· 上一次變更: 2025/04/06 17:05 由
wm
頁面工具
顯示頁面
舊版
反向連結
回到頁頂
