7 Quick CSS Enhancements for Better User Experience The beauty in CSS is that a tiny directive can make a huge difference in how the page displays. Here are seven quick CSS snippets that will give your website more "pop" and make your user's experience more functional and enjoyable. Change Text Highlight Color The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you'd like! Prevent Firefox Scrollbar Jump Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn't reach below the fold, thus creating an undesireable "jump." Rounded-Corner Elements Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements. Print Page Breaks Don't forget that many users print off your informational pages! Attribute-Specific Icons Spice up your links by adding attribute-specific icons to your links. CSS Pointer Cursors display:block Links
Icon Fonts are Awesome Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="⇝"></span> Stats </h3> How To Use for Stand Alone Icons
Tools For Web Developers and Designers – 60 Useful Cheat Sheets For developers and web designers can be very difficult to memorize the syntax for various programming languages, especially considering that they are always constant evolution and growth, so it is normal that you forget things. Cheat sheets are reference guides with useful information, features and functions of a particular language. In this article you’ll find 60 most useful cheat sheets about HTML5, XHTML, CSS, JavaScript / Programming Languages, Databases, Subversion, Mod_rewrite, MySQL and some other useful cheat sheets. This is something that a web developer/designer can get to use every day, I’m sure that will make easy the tasks involved in web design and web development. CSS 2 Visual Cheat Sheet For the launch of Woork Up I prepared this CSS2 Visual Cheat Sheet, a useful and practical reference guide to Cascading Style Sheets Level 2 for web designers and developers. CSS Help Sheets CSS Property Index CSS3 Click Chart Web Browser CSS Support W3C-CSS current work & how to participate
When can I use... Support tables for HTML5, CSS3, etc 20 Extremely Useful CSS Tools Most of the time writing website’s CSS is enjoyable and fun job. However some of the tasks aren’t always fun. CSS tools are here to help with those not so fun tasks, and make developers job a bit easier. Variable Grid System The variable grid system is a quick way to generate an underlying CSS grid for your site. The 1Kb CSS Grid It is a very small-sized and lightweight CSS framework supporting grid system, style reset, basic typography and form styles. Grid Designer This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. CSS Lint CSS Lint is a tool to help point out problems with your CSS code. Primer CSS Just paste some HTML in the box and Primer will pull all classes and IDs to get you started with your stylesheet. PrefixMyCSS PrefixMyCSS helps you save time by letting you write your properties one way. Modernizr Layer Styles Layer Styles is a HTML5 app for creating CSS3 in a intuitive way. CSS3 Patterns Gallery Spritebox
8 examples of stunning CSS3 text effects How to Create Inset Typography with CSS3 Just two years ago, we all used Photoshop to create beautiful inset typography. Now, you can do it using only CSS3. This great tutorial will help you getting started. View tutorial: Create Beautiful CSS3 Typography Technically speaking, styling text is very simple. Create a Letterpress Effect with CSS Text-Shadow The “letterpress” effect is very popular in web design. How to Create a Cool Anaglyphic Text Effect with CSS Chris Spooner again! Text Rotation with CSS Why should text always be displayed horizontally? Text Embossing Technique With CSS One more technique I’ve done exclusively in photoshop in the past. Adding an outline to your text using the CSS3 text-stroke property Although this technique only works in webkit for now, I must admit that I really love it. CSS textured text
30 CSS Best Practices for Beginners CSS is a language that is used by nearly every developer at some point. While it's a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes. The readability of your CSS is incredibly important, though most people overlook why it's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. <editors-note> When writing CSS, most developers fall into one of two groups. Both practices are perfectly acceptable, though you'll generally find that group two despises group one! Along the lines of keeping your code readable is making sure that the CSS is consistent. Think about things like whether or not you'll use underscores or dashes in your ID's and class names, and in what cases you'll use them. <editors-note> I disagree. And the block elements:
Cheat Sheets for Front-end Web Developers Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office and can prepare you for client questions regarding web development. In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery). So go ahead – print out your favorites and pepper your workspace with these wonderful references. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. JavaScript 12. 13. 14. 15. 16. 17. mootools 1.2 cheat sheet 18. jQuery Cheatsheet 19. jQuery 1.2 Cheat Sheet 20. jQuery Visual Map – PNG Miscellaneous 21. 22. 23. These are great resources regardless of the size of your clients.
21 Amazing CSS Techniques You Should Know Cascading Style Sheets(CSS) is one of the building blocks of modern web design without which websites would have been ugly just like they were a decade ago. With time, the quality of CSS tutorials out there on the web has increased considerably. Here are 21 amazing CSS Techniques that you might not have thought could be done by CSS. 1. Cross Browser CSS SlideShow Amazing demonstration of how to create a cross browser image gallery using just CSS. 2. This tutorial demonstrates a crazy way to create an image map using just CSS. 3. Create a lighbox using just CSS with no JavaScript required. 4. Replace the submit buttons with images using CSS, degrades back to submit button if CSS is disabled. 5. Amazing tutorial on how to create an animated navigation menu using just CSS. 6. Create a tree like navigation from nested lists of links. 7. Create eye-catching titles with nice gradient effect using just CSS. 8. 9. Amazing way to create a liquid layout using negative margins 10. 11. 12. 13. 14. 15.