CSS - Articles

css

http://www.sitepoint.com/migrating-flexbox-cutting-mustard
http://www.sitepoint.com/solving-layout-problems-css-table-property
http://sarasoueidan.com/blog/compositing-and-blending-in-css/
http://www.sitepoint.com/using-helper-classes-dry-scale-css
http://www.websiteoptimization.com/speed/tweak/overlay/
http://www.sitepoint.com/managing-css-stacking-contexts-hostile-environment/
http://www.sitepoint.com/css-post-processing-pleeease
http://www.sitepoint.com/you-can-do-that-with-css/
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
https://the-pastry-box-project.net/addy-osmani/2014-January-19
http://www.sitepoint.com/introducing-ccss-component-css/
http://modernweb.com/2014/03/31/paralyzed-by-choice-in-front-end-development/
http://www.sitepoint.com/are-we-ready-to-use-flexbox/
http://www.sitepoint.com/screencast-css-adjacent-sibling-selector
http://www.sitepoint.com/negative-space
http://www.sitepoint.com/12-little-known-css-facts
http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Absolutely-positioned-box-inside-a-
http://www.sitepoint.com/optimizing-css-stylesheets-recess
http://www.sitepoint.com/10-web-predictions-2013-results
http://www.sitepoint.com/java-applets-obsolete-still-part-web
http://www.sitepoint.com/10-web-predictions-2014/
http://www.sitepoint.com/power-em-units-css
http://conditional-css.com/
http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods
http://css-tricks.com/almanac/properties/w/word-break/
http://css-tricks.com/almanac/properties/t/text-overflow/
http://css-tricks.com/quick-css-trick-using-span-to-break-up-words-in-urls/
http://css-tricks.com/set-font-size-based-on-word-count/
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
http://css-tricks.com/line-clampin/
http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

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:
http://css-tricks.com/snippets/css/using-font-face/
http://completeusability.com/readable-type-usable-type-part-1/
http://completeusability.com/readable-type-usable-type-part-2/
http://www.sitepoint.com/3-principles-for-perfect-typeface-pairing/
http://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon
http://www.sitepoint.com/cross-browser-web-fonts-part-3
http://www.sitepoint.com/typography-cheat-sheet
http://www.sitepoint.com/15-rules-making-accessible-links
http://www.sitepoint.com/top-5-best-new-fonts-2013/
http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/
http://www.sitepoint.com/use-cross-browser-web-fonts-part-2/
http://dev.opera.com/articles/view/setting-web-type-to-a-baseline-grid/
http://alistapart.com/article/howtosizetextincss
http://topfunky.com/baseline-rhythm-calculator/
http://ia.net/blog/the-web-is-all-about-typography-period/
http://24ways.org/2006/compose-to-a-vertical-rhythm/
http://alistapart.com/article/settingtypeontheweb
http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/
http://www.sitepoint.com/podcast-175-typography/
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
http://designfestival.com/the-best-new-fonts-of-2012-so-far/
http://www.instantshift.com/2012/05/21/type-discipline-you-were-never-taught/
http://www.smashingmagazine.com/2012/05/21/how-to-choose-the-right-face-for-a-beautiful-body/
http://www.1stwebdesigner.com/resources/text-replacement-tricks/
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
http://www.designjuices.co.uk/2010/08/advice-guide-website-typography/
http://www.alistapart.com/articles/fonts-at-the-crossing/
http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-gothic-blackletter-typographic-design
http://www.sitepoint.com/blogs/2010/09/09/avoiding-typecasting-in-the-marketing-world/
http://www.sitepoint.com/blogs/2010/09/10/behind-the-geek-out-scenes-fancy-fonts-and-jaunty-input-fields/
http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography
http://css-tricks.com/adding-stroke-to-web-text/
http://www.smashingmagazine.com/2010/09/13/expressive-web-typography-useful-examples-and-techniques/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
http://www.instantshift.com/2012/04/12/study-of-font-styles-and-best-uses-for-each/
http://www.webdesignerdepot.com/2011/08/the-most-popular-fonts-used-by-designers/
http://blog.creativityden.com/smashing-slab-serif-typography/
http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
http://www.webm.ag/2010/02/23/how-to-font-replacement/
http://www.smashingapps.com/2010/02/26/photofont-webready-a-revolutionary-font-converter.html
http://www.littleboxofideas.com/blog/tutorials/how-do-i-implement-font-face
http://www.lukew.com/ff/entry.asp?1026
http://wiki.novemberborn.net/sifr/
http://www.mikeindustries.com/blog/sifr/
http://www.webdesignerdepot.com/2012/06/sizing-type-with-lucas-sequences/
http://www.lukew.com/ff/entry.asp?1584
http://www.alistapart.com/articles/cssatten/
http://www.alistapart.com/articles/real-web-type-in-real-web-context/
http://www.alistapart.com/articles/on-web-typography/
http://www.alistapart.com/articles/more-meaningful-typography/
http://www.instantshift.com/2012/07/18/creating-effective-websites-using-typefaces
http://www.smashingmagazine.com/2012/07/24/one-more-time-typography-is-the-foundation-of-web-design/
http://www.instantshift.com/2012/07/25/best-font-resources-for-web-design-and-tips-for-implementation
http://fontfabric.com/multicolore-free-fonts/
http://www.webdesignerdepot.com/2012/06/leading-space-is-just-as-important-as-words/

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/

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License