CSS Code Readability Tips Reading and writing seem to be simple actions yet they are not. When it comes to web design, these actions are vital for various reasons and they have a higher priority in the web design process. What I’m trying to say is that it is crucial to write code in a good way. That is because any other person that interacts with the code should feel comfortable with it. 1. The most important thing in CSS readability is having a good structure. 2. The number of colors is different from one site to another. 3. When you write CSS code you will have to take into consideration the time that you will loose scanning the file for certain rules. 4. Typography should be very important in every project. 5. Indentation is on of the most important aspects when it comes to readability. 6. Usually in my projects, my CSS layout is based on floats. Conclusion These steps will not give you the perfect CSS code for readability, but for certain they will make your life a lot easier.
25 Great Examples of Using Gradient Effects in Web Designs Using color gradients, or effects that transition two or more colors with one another, is one of the most popular design techniques in web design. They’re easy to create yet hard to get right. In this showcase, you’ll witness some of the best examples of using color gradients in the hopes of inspiring you in your own designs. If you’d like to learn more about color gradients, check out the tutorial called "Make High-Impact Backgrounds for Your Designs with Photoshop" which covers the use of color gradients, among other techniques. Reinvigorate Central Snowsports Mediastroika Anderbose Tim Van Damme Rise Creative Group Newism Idea Foundry atebits Icebrrg FridgeWorks Viget Extend Monterey County California Travel & Tourism avalonstar Owltastic Show & Tell Consignment love the septapus youlove.us SocialSnack Ali Felski Treemo Labs Sarah Longnecker Inner Metro Green Share your thoughts What do you think about color gradients in web design? Related content
Comment réaliser un bon formulaire HTML Depuis longtemps, je suis le passionant travail de Luke Wrobleski, le Senior Director of Product Ideation & Design chez Yahoo. En gros, il design des interfaces web, et notamment les formulaires. Ca n’a l’air de rien, mais cet élément fondamental du web est souvent négligé. Il a sorti un livre : Web Form Design: Filling in the Blanks que j’aurais acheté si je bossais encore dans le e-commerce. Luke a fait une conférence le mois dernier au MIX 09. 10 bonnes pratiques pour réaliser un formulaire Aller droit au but (Path to completion)Alignement des labels (Label alignment)Aide et astuces (Help & tips)Validation (Inline validation)Actions primaires et secondaires (Primary & Secondary actions)Actions en cours (Actions in progress)Erreurs (Errors)Input inutiles (Unnecessary inputs)Organisation du formulaire (Form organization)Engagement graduel (Gradual engagement) Préambule Les formulaires, c’est chiant. Je livre ici un résumé de la vidéo précédemment citée. 1. Mauvais exemple : Bon exemple : 2.
CSS Design: Taming Lists As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. Article Continues Below What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. Setting the stage#section2 For purposes of this article, I am using unordered lists. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Each list is simply placed inside a different DIV, and the CSS is written so that the list’s behavior is determined by the DIV it is in. Without any additional styles applied, the list is rendered in this way in the base DIV: Item 1Item 2Item 3Item 4Item 5 we’ll make a bit longer so that it will wrap
How to add file type Icons to Links with CSS | Psyked | Psyked CSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up – automatic link icons. First, a look at the end result :- Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external links. The astute of you may notice that the ‘external’ link isn’t actually external – think of it more as ‘absolute’. Attribute selectors are done with [square brackets], and can include simple conditional statements, with some options for wildcards thrown in to boot. Here’s a simple ‘absolute’ link selector – a[href="http:"] – this will target all the ‘a’ tags, with the attribute ‘href’ which is equal to “http:”. Another operator we can use is $, which means ‘ends with’. Now, styling the links is really a matter of personal preference, (and your design), but I the infamous famfamfam silk icon set will help you out here.
CSSREMIX 12 Really Useful CSS3 Tips And Techniques | Web Design Tutorials CSS 3 no doubt is amazing. I have been using slight bits of it in some of my other web projects, and I am more than pleased with it. Its simplicity runs so well with its advanced features such as rounded corner rendering and font file reading. Rounded up here are my favorite 12 Really Useful CSS3 Tips And Techniques, to help you learn new and exciting features very quickly. Please fell free to drop us a comment showcasing what you have made with CSS 3. Rounded Corners With CSS 3, you don’t have to have images for each corner (like the old days). Text Shadows & Background Sizing Learn how to add shadows to text and to size your background images using CSS 3. Using Any Custom Font This is amazing! CSS 3 Colour Learn how to create a mock-up interface using CSS 3 colour. Styling HTML Forms Learn how to style HTML forms using CSS 3′s attribute selectors. Apply Link Icons International Languages CSS 3 will introduce a large number of properties to support non Latin text. Multi-Column Layout
Use CSS Diagnostics with Stylish to find bad HTML | 456 Berea St A while ago I mentioned Obtrusive JavaScript Checker and Inline Code Finder as useful quality assurance tools that will help you find potentially obtrusive JavaScript and CSS. A similar approach to checking HTML quality is using CSS to highlight invalid or deprecated code, which I talked about in Helping your client maintain markup quality. In that post I mentioned Marco Battilana’s Big Red Angry Text and Eric Meyer’s Diagnostic Styling. Both articles contain examples of stylesheets that will highlight problematic HTML. Neal Grosskopf has taken the concept a step further and created a diagnostic stylesheet that highlights, among other things, deprecated and proprietary elements and attributes. Including a diagnostic stylesheet works fine for sites that you develop and have write access to. With Stylish installed in Firefox you can do things like easily toggle user stylesheets on and off, and specify which sites they should be applied to.
James Lai Creative - Professional Design, Usability and Programming Magentips CSS Tools: Diagnostic CSS Validation is great, but it won't catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won't complain. The syntax is valid, even if it's a broken experience. Maybe you wanted things that way, but more likely not. With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. The more advanced version, which uses the :not() syntax and outlines and so isn't suitable for IE7The IE7 version, which does much the same things but in a less straightforward manner and uses borders instead of outlines The styles for each are embedded in the demo pages, but they have a few extras meant to make the demo pages themselves understandable.
22 CSS Button Styling Tutorials and Techniques CSS button styling can be tricky and sometimes tedious. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you. Below, you will find 22 CSS Button Styling Tutorials and Techniques. Submit button should look same everywhere Link : Visit Tutorial »Description : When someone works on a website design, it is important that the look will remain same in all browsers. But creating a consistent interface for users is a constant struggle for every application designer. How to make sexy buttons with CSS Link : Visit Tutorial »Description : This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Scalable CSS Buttons Using PNG and Background Colors Link : Visit Tutorial »Description : Create dynamic CSS buttons using PNG, transparency and background colors that degrades nicely and supports full scalability. Sexy CSS Hover Button CSS Oval buttons
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.