CSS - Articles - Khai's personal knowledge vault.

CSS - Articles

https://heypresents.com/talks/be-the-browser-s-mentor-not-its-micromanager
https://www.courier.com/blog/how-we-built-react-components-for-any-front-end
https://www.youtube.com/watch?v=sNYVqfRwX1A
https://www.nngroup.com/articles/using-grids-in-interface-designs/
https://bradfrost.com/blog/post/the-many-faces-of-themeable-design-systems/
https://meiert.com/en/blog/minimal-social-markup/

https://css-tricks.com/a-couple-of-use-cases-for-calc/ - done reading
https://tympanus.net/codrops/css_reference/calc/ - done reading
https://developer.mozilla.org/en-US/docs/Web/CSS/calc - done reading
https://www.htmlgoodies.com/html5/css/using-the-css3-calc-function.html - done reading
https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
https://bitsofco.de/how-calc-works/ - done reading
https://zellwk.com/blog/responsive-vertical-rhythm/
https://github.com/less/less.js/issues/974
https://developers.google.com/web/updates/2012/03/CSS-layout-gets-smarter-with-calc
https://www.designedbyaturtle.co.uk/2012/smart-css-layouts-with-calc/

https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/
https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/

https://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/
https://css-tricks.com/almanac/properties/b/box-sizing/
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
https://css-tricks.com/almanac/properties/c/content/
https://css-tricks.com/fun-viewport-units/
https://css-tricks.com/making-custom-properties-css-variables-dynamic/

https://tympanus.net/codrops/css_reference/resolution/
https://tympanus.net/codrops/css_reference/frequency/
https://tympanus.net/codrops/css_reference/time/
https://tympanus.net/codrops/css_reference/length/
https://tympanus.net/codrops/css_reference/number/
https://tympanus.net/codrops/css_reference/box-sizing/
http://zerosixthree.se/create-css-grid-using-calc/
https://www.sitepoint.com/creative-grid-system-sass-calc/
https://drafts.csswg.org/css-values/#calc-notation
https://tympanus.net/codrops/css_reference/custom-properties/

Accessibility:
http://www.sitepoint.com/5-things-learned-accessibility
http://www.sitepoint.com/ux-making-readable-lists

Background Images (See also the links under the Full Page Background Image):
https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
http://davidwalsh.name/css-fixed-position-background-image
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm - How Do you Stretch a Background Image in a Web Page
http://www.vanseodesign.com/css/css-background-property/
http://css.maxdesign.com.au/listamatic/vertical05.htm - Using CSS background images for bullets
http://www.sitepoint.com/video-scalable-backgrounds-css

Buttons:
http://speckyboy.com/2010/02/15/20-css3-tutorials-and-techiques-for-creating-buttons/ - 20 CSS3 Tutorials and Techiques for Creating Buttons
http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/ - Create a Button with Hover and Active States using CSS Sprites
http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ - Liquid & Color Adjustable CSS Buttons
http://speckyboy.com/2009/12/30/15-tips-and-techniques-for-styling-the-button-element/ - 15 Tips and Techniques for Styling the button element
http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/ - 22 CSS Button Styling Tutorials and Techniques
http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/ - Creating bulletproof graphic link buttons with CSS
http://designlovr.com/beautiful-photoshop-like-buttons-with-css3/ - Beautiful Photoshop-like Buttons with CSS3
http://www.tripwiremagazine.com/2010/03/35-essential-submit-button-enhancements.html - 35+ Essential Submit Button Enhancements
http://sixrevisions.com/web_design/a-look-into-registration-buttons-in-web-design/ - A Look into Registration Buttons in Web Design
http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/ - Call to Action Buttons: Examples and Best Practices
http://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/ - “Call to Action” Buttons: Guidelines, Best Practices and Examples
http://www.bestdesigntuts.com/40-effective-call-to-action-buttons/ - 40+ Effective Call to Action Buttons
http://blog.echoenduring.com/2010/03/17/create-a-colourful-web-button-with-css/ - Create a Colourful Web Button with CSS
http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/ - CSS3 Gradient Buttons
http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/ - 20 Awesome jQuery Enhanced CSS Button Techniques
http://aext.net/2010/08/an-effective-guide-to-call-to-action-buttons/ - An Effective Guide to Call to Action Buttons
http://blog.mivamerchant.com/713/create-reusable-button-classes-with-css-and-background-images/
http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

Form elements:
http://www.sitepoint.com/screencast-building-smarter-ui-interactions-using-checked/
http://www.suburban-glory.com/blog?page=140 - Replace a form submit button with an image using just CSS
http://bradfrost.com/blog/post/single-field-credit-card-input-pattern/

Color:
http://buildinternet.com/2010/02/flexible-color-schemes-in-layouts-with-rgba/

Clearing Floats:
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/ - Saying Goodbye to the overflow: hidden Clearing Hack
http://www.positioniseverything.net/easyclearing.html - How To Clear Floats Without Structural Markup
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ - Simple Clearing of Floats
http://www.mezzoblue.com/archives/2005/03/03/clearance/ - Clearance
http://annevankesteren.nl/2005/03/clearing-floats - Super simple clearing floats
http://carsonified.com/blog/design/everything-you-know-about-clearfix-is-wrong/ - Everything you Know about Clearfix is Wrong
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ - The New Clearfix Method
http://www.positioniseverything.net/easyclearing.html - How To Clear Floats Without Structural Markup
http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/ - Lessons Learned Concerning the Clearfix CSS Hack

Font Stack:
http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/
http://webdesign.about.com/od/fonts/qt/how-to-choose-a-font-stack.htm
http://css-tricks.com/snippets/css/font-stacks/
http://www.sitepoint.com/eight-definitive-font-stacks/
http://www.awayback.com/revised-font-stack/
http://www.codestyle.org/servlets/FontStack
http://www.slideshare.net/maxdesign/css-fontstacks

Font Size:
http://css-tricks.com/css-font-size/
http://www.alistapart.com/article/howtosizetextincss
http://www.alistapart.com/articles/howtosizetextincss/
http://www.maxdesign.com.au/articles/relative/
http://www.sitepoint.com/css-font-sizing-tutorial/
http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
http://css-discuss.incutio.com/wiki/Font_Size
http://web.archive.org/web/20001109070700/http://www.alistapart.com/stories/fear4/ - Give me pixels or give me death
http://www.sitepoint.com/new-css3-relative-font-size/
http://snook.ca/archives/html_and_css/font-size-with-rem
http://css-tricks.com/rems-ems/
http://css-tricks.com/viewport-sized-typography/
http://css-tricks.com/the-lengths-of-css/
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
http://www.w3schools.com/cssref/css_units.asp
http://usabletype.com/css/font/sizes/
http://usabletype.com/styles/sizes/
http://www.alistapart.com/articles/lowvision

Font Weight:
http://www.webtype.com/info/articles/fonts-weights/

Full Page Background Image:
http://css-tricks.com/how-to-resizeable-background-image/ - How to resize background image
http://www.threestyles.com/tutorials/an-in-depth-look-into-csss-background-attribute/ - An In Depth Look Into CSS Background Attributes
http://css-tricks.com/perfect-full-page-background-image/ - Perfect Full Page Background Image
http://css-tricks.com/how-to-resizeable-background-image/ - How To: Resizeable Background Image
http://www.reencoded.com/2009/08/23/website-background-images-examples-and-implementation/ - Website Background Images : Examples and Implementation
http://www.noupe.com/design/scalable-full-body-backgrounds-in-web-design.html - Scalable Full Body Backgrounds in Web Design
http://css-tricks.com/perfect-full-page-background-image/ - Perfect Full Page Background Image
http://www.squidoo.com/how-to-use-css-for-background-image-hacks - How to Use CSS for Background Image Hacks?

Gradient Text:
http://webdesignerwall.com/tutorials/cross-browser-css-gradient
http://webdesignerwall.com/tutorials/css-gradient-text-effect
http://www.tizag.com/cssT/background.php
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/ - Quick Tip: Pure CSS Text Gradients - done reading

Image Replacement:
http://www.hongkiat.com/blog/dynamic-image-replacement-practical-techniques-and-tools/ - Dynamic Image Replacement: Practical Techniques and Tools
http://css-tricks.com/rethinking-css-image-replacement/ - Rethinking CSS Image Replacement
http://www.mezzoblue.com/tests/revised-image-replacement/ - Revised Image Replacement
http://css-tricks.com/css-image-replacement/ - Nine Techniques for CSS Image Replacement
http://stopdesign.com/archive/2003/03/07/replace-text.html - Using background-image to replace text
http://www.kryogenix.org/code/browser/lir/ A new image replacement technique
http://www.devarticles.com/c/a/Web-Style-Sheets/Image-Replacement-CSS-Techniques/ - Image Replacement CSS Techniques
http://articles.sitepoint.com/article/image-replacement-state-scope - A New Image Replacement Technique: The State Scope Method
http://www.wellstyled.com/css-replace-text-by-image.html - Replacing Text By An Image
http://css-tricks.com/text-blocks-over-image/ - Text Blocks Over Image
http://www.sitepoint.com/new-css-image-replacement-technique/
http://www.noupe.com/design/the-mobile-web-css-image-replacement-for-retina-display-devices.html
http://www.askthecssguy.com/2009/06/css_image_replacement_for_imag.html - CSS image replacement for… images

Line Height:
http://css-tricks.com/fun-line-height/
http://www.giantisland.com/Resources/CSSLineHeightUnits.aspx
http://www.slideshare.net/maxdesign/line-height
http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

Lists, Bullets, and Menus:
http://www.cssnewbie.com/easy-css-dropdown-menus/
http://www.cssnewbie.com/horizontal-dropdown-menus/
http://www.webdesignerwall.com/tutorials/advanced-css-menu/
http://www.3point7designs.com/blog/2007/12/advanced-css-menu-trick/
http://buildinternet.com/2009/09/quick-tip-simplify-list-margins-with-css/ - Simplify List Margins with CSS
http://css-tricks.com/style-a-list-with-one-pixel/ - Style a List with One Pixel
http://perishablepress.com/press/2009/08/16/sexy-html-list-tricks/ - Sexy HTML List Tricks
http://www.sitepoint.com/blogs/2009/03/31/techy-treasures-5-fudging-css-counters-in-internet-explorer/ - Techy Treasures #5: Fudging CSS Counters in Internet Explorer
http://devsnippets.com/article/styling-your-lists.html - Styling your Lists: 20+ Brilliant How to’s and Best Practices
http://www.wpdfd.com/issues/82/list_style_inspiration/ - A Stripe of List Style Inspiration
http://www.commonknowledge.net.nz/2010/08/lists/ - Lists - are they letting me down?
http://css.maxdesign.com.au/listamatic/vertical05.htm - Using CSS background images for bullets
http://www.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/ - Styling HTML Lists with CSS: Techniques and Resources

Opacity and Transparency:
http://css-tricks.com/transparency-in-web-design/ - Transparency in Web Design
http://blog.creativityden.com/having-fun-with-transparency/ - Having fun with transparency
http://acidmartin.wordpress.com/2010/11/21/using-rgba-to-prevent-the-css-opacity-inheritance-from-parent-to-child-elements/ - Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements
http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
http://www.creativepro.com/article/view-source-make-web-site-elements-partially-transparent - Make Web Site Elements Partially Transparent

Overflow:
http://css-tricks.com/the-css-overflow-property/

Positioning:
http://www.barelyfitz.com/screencast/html-training/css/positioning/ - Learn CSS Positioning in Ten Steps
http://css-tricks.com/all-about-floats/ - All About Floats
http://www.virtuosimedia.com/tutorials/css-rounded-corner-menus CSS Rounded Corners Menus (has a good explanation of positioning)
http://css-tricks.com/containers-dont-clear-floats/ - Why Containers Don’t Clear Themselves
http://www.positioniseverything.net/ordered-floats.html - Source Ordered Columns
http://www.positioniseverything.net/floatmodel.html - Float model
http://thecssblog.com/tutorials/stopping-the-css-positioning-panic-part-2/ - Stopping the CSS positioning panic (Part 2)
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ - CSS Float Theory: Things You Should Know
http://css.maxdesign.com.au/floatutorial/ - Floatutorial
http://www.complexspiral.com/publications/containing-floats/ - Containing Floats
http://css-tricks.com/the-css-overflow-property/ - The CSS Overflow Property
http://css-tricks.com/video-screencasts/40-how-z-index-works/ - How z-index works (Screencast by CSS-Tricks)
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ - The Z-Index CSS Property: A Comprehensive Look
http://reference.sitepoint.com/css/z-index - z-index (SitePoint)
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ - Absolute, Relative, Fixed Positioning: How do they differ?
http://www.evowebdev.com/blog/2009/12/creating-a-faux-background-image-with-absolute-and-relative-position/ - Creating a Faux Double Background with Absolute and Relative Position
http://stackoverflow.com/questions/227738/is-there-an-upper-limit-to-z-index-values-in-web-browsers - Is there an upper limit to z-index values in web browsers?
http://www.cssnewbie.com/argument-against-faux-absolute-positioning/ - An Argument Against Faux Absolute Positioning
http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/ - Image Floats without the Text Wrap
http://chrisiona.com/fixedposition/

Pseudo selectors:
http://www.tutcity.com/css/the-mysterious-pseudo-class.21999.html

Negative z-index:
Negative z-index do not work in Firefox, but if you add “position:relative;left:0px;top:0px;z-index:0″ to the body it will.

Reset:

Use normalize.css

http://www.maxdesign.com.au/articles/css-reset/
http://www.vcarrer.com/2010/05/css-mini-reset.html - CSS Mini Reset
http://www.vcarrer.com/2010/11/css-mobile-reset.html - CSS Mobile Reset
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://www.ejeliot.com/blog/85
http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
http://snook.ca/archives/html_and_css/no_css_reset/
http://developer.yahoo.com/yui/reset/
http://css-tricks.com/poll-results-what-css-reset-do-you-use/
http://mondaybynoon.com/2008/04/21/why-i-like-and-use-reset-css/
http://code.google.com/p/chaoss/
http://thinkvitamin.com/design/setting-rather-than-resetting-default-styling/

Rounded Corners:
http://www.pxleyes.com/blog/2010/03/4-ways-to-get-rounded-corners-using-css/ - 4 Ways to Get Rounded Corners Using CSS
http://www.w3.org/Style/Examples/007/roundshadow - Rounded corners and shadowed boxes
http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/ - Rounded Corners Without Images
http://www.html.it/articoli/nifty/index.html - Nifty Corners: rounded corners without images
http://www.cssplay.co.uk/boxes/snazzy.html - Snazzy Borders
http://www.spiffycorners.com/ - Spiffy Corners
http://www.alistapart.com/articles/mountaintop/ - Mountaintop Corners
http://www.redmelon.net/tstme/4corners/ - Doug's 4 Rounded Corners
http://articles.sitepoint.com/article/rounded-corners-css-javascript - Rounded Corners with CSS and JavaScript by Simon Willison
http://www.mikeindustries.com/blog/archive/2005/02/sifr-2.0-release-candidate-4 sIFR - Scalable Inman Flash Replacement by Mike Davidson
http://thecssblog.com/tutorials/creating-rounded-corners-the-deviant-arts-way/ - Creating rounded corners (the “Deviant art’s” way)

Selectors:
http://www.typesett.com/2009/09/css-selectors-a-guide-to-the-common-the-rare/ - CSS Selectors
http://www.yourinspirationweb.com/en/are-you-using-all-of-the-available-css-selectors/ - Are you using all of the available CSS selectors?
http://www.yourinspirationweb.com/en/why-you-should-know-the-new-css3-selectors/ - Why you should know the new CSS3 selectors?
http://www.yourinspirationweb.com/en/do-you-know-there-are-other-ways-of-using-css-selectors-part-1/ - Do you know there are other ways of using css selectors? (Part 1)
http://www.yourinspirationweb.com/en/do-you-know-there-are-other-ways-of-using-css-selectors-part-2/ - Do you know there are other ways of using CSS selectors? (Part 2)
http://css.maxdesign.com.au/selectutorial/index.htm - CSS Selectors
http://css-tricks.com/attribute-selectors/ The Skinny on - CSS Attribute Selectors
http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html
http://www.sitepoint.com/blogs/2010/09/07/contiguous-sibling-selector/ - Contiguous Sibling Selector
http://snook.ca/archives/html_and_css/css-parent-selectors - Why we don't have a parent selector

Specificity:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ - CSS Specificity: Things You Should Know
http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/ - CSS Specificity And Inheritance
http://www.standardista.com/css3/css-specificity/

Text Effects:
http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css - How to create cool anaglyphic text effect with CSS

Print:
http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/

page revision: 47, last edited: 20 Jul 2022 18:16

Edit Tags History Files Print Site tools + Options

Khai's personal knowledge vault.

Materials on this site are not original. When possible, references to original articles are listed on each page.

Other interesting sites

小猫沙盒

WQA

Sygnus Figment Registry

Blank Template