101 CSS Techniques Of All Time- Part 1 Jan 13 2008 CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right. Today we are presenting a round-up of 101 CSS techniques designers use all the time. CSS Sprites CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. CSS Sprites: Image Slicing’s Kiss of Death- Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. CSS Rounded Corners Rounded corners is one of the most popular and frequently requested CSS techniques. Even More Rounded Corners With CSS- Single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you could want. Image Replacements Technique Thierry Image Placement: Image Placement vs. Sliding Doors Image Text Wrap Technique Equal Height Technique Why use a list? Homepage
NoSIMcard.com Absolute Positioning Inside Relative Positioning A page element with relative positioning gives you the control to absolutely position children elements inside of it. To some, this is obvious. To others, this may be one of those CSS "Ah-ha!" Here is a visual: The relative positioning on the parent is the big deal here. Might not look like a big deal in this small example, but it really is a significant change. Once you "wrap" your head around this concept (rim-shot) you will find little uses for it all over the place, and start noticing examples of other places using it. How about some examples? I'd be delighted. View Demo Download Files Share On equal height columns by Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. The problem with equal height columns In the example above we have three columns each with a different amount of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. A floated container div will always be the height of it's floated contents This is the central principle behind this equal column height method. Three column HTML div structure
Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED. Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables
CSS Cheat Sheet (V2) - Added Bytes by Dave Child The second version of the CSS Cheat Sheet, a quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information. Get It Today! Including: - CSS Selectors and Pseudo-Selectors - CSS Properties - CSS Units - CSS Box Model Buy Now - Pay What You Like! Overview The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. What's New? There are a few small changes from the first version of the CSS Cheat Sheet (which you can still download if you prefer). The content is largely unchanged. Selectors Given the number of possible selectors in CSS, it is no wonder some people often become confused. Pseudo-Selectors Pseudo-selectors are used when defining styles for elements that either do not exist, or are in a particular state. Units CSS allows the author to define dimensions and colours in many different ways, which can be especially useful when combined with media types. More information on units in CSS. Box Model
Download 21 Free Fun Fonts Download 21 Free Fun Fonts Here is an Awesome collection of Fun Free 21 Fonts that you can download for yourself which you could use for your next project of web, graphic, logo, or banner design. In this Free list of fonts you’ll be able to find Fun Free Fonts that resemble the theme for Terminator, Ice Age, Bugs Life, Star Wars, Batman, Coca Cola, Ferro Rosso, Hawaii, Flowers, Walt Disney, Hollywood, Jurassic Park, Tron, and more. 1. – Walt Disney Font 2. – Harabara Font 3. – Decker Font 4. – Circuitry Font 5. – Hawaii Lover Font 6. – Ferro Rosso Font 7. – Coca Cola Font 8. – Republika Font 9. – Jurassic Font 10. – Blomster Font 11. – Broken Font 12. – Insect Font 13. – Feena Casual Font 14. – Hollywood Hills Font 15. – Caribbean Font 16. – Terminator Font 17. – A Bug’s Life Font 18. – Ice Age Font 19. – Star Vader Font 20. – Tron Font 21. – Batman Font Want to become a pro in Fonts and Typography? Written or Posted by vlad3368 I am an Enthusiast of Computer Graphics, Web Graphics, SEO, and Codes.
10 CSS-Lifesavers For Efficient Web Design 10 CSS-Lifesavers For Efficient Web DesignCSS has been hailed and cursed by many web designers and developers around the world. On one hand, it makes our lives easier by separating content from style, which makes the entire process much more organized and easier to deal with. On the other hand, CSS has it's fair share of quarks, misunderstandings, and overall issues that bare some explanation. Today, we will go over 10 CSS lifesavers and tips for a more efficient web design process. 1. The z-index property can be extremely useful when utilized properly. The secret to using z-index properly, is positioning. Check out the where can I learn more section below for some great links and screencasts on z-index. How can it help? Quite simply, it can help by providing the functionality it was meant to, layer objects/elements in a specific order. Where can I learn more? Glad you asked! 2. The background property is one of the most frequently used properties of the CSS spec. 3. Good news. 4. 5. 6. <!
CSS Media Queries We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types