Blog Surfer

101 CSS Techniques Of All Time- Part 1
101 CSS Techniques designers use all the time to make their web pages just look right.

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. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy!

Update:

You can check Part2 here.

CSS Sprites

CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

• CSS Sprites: Image Slicing’s Kiss of Death- Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - CSS-Tricks
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance- Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages

---

CSS Rounded Corners

Rounded corners is one of the most popular and frequently requested CSS techniques. There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. Here are easy ways to achieve this effect.

• 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.
  Demo :
  
  
  

  ---

• Rounded corners in CSS- Simple bordered div which contained four divs that each had a background-image and that were positioned in each of the corners.
• Liquid rounded corners- For liquid design and transparent scrolling - tutorial and stylesheet
• Mountaintop Corners- easier way for creating decent rounded corners.
  

---

Image Replacements Technique

Thierry Image Placement: Image Placement vs. Image Replacement (FIR)

This technique is mostly for headlines by using CSS to replace normal HTML text, with a background image in order to achieve a particular look.Several different image replacement methods have been proposed, each with their pros and cons.

when you need image replacement you can check the Gilder/Levin Method as described by Dave Shea or, if the replaced text is linked and CSS support for IE/Mac is required, the Gilder Levin Ryznar Jacoubsen IR method.

---

Sliding Doors

Sliding Doors of CSS introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup.Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images.

---

Sliding Doors” Box– Rounded Corners for All- The goal of this technique was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. While making sure they could resize while keeping their backgrounds intact.

---

Image Text Wrap Technique

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?

This technique allows you to wrap around image text flow control to emulate magazine style page layouts.

• BIG BAER advanced CSS technique - the sandbag div.
• CSS Image Text Wrap
• Fancy text wrapping around an image

---

Equal Height Technique

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. So how can we make all columns appear to be the same height? Several techniques was introduced to solve this issue.

• Faux Columns- The simple secret is to use a vertically tiled background image to create the illusion of colored columns.
• Equal Height Columns - revisited- A method to make all columns appear to be the same height but without the need for faux column style background images.

• Equal height boxes with CSS- The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells. The basic XHTML structure looks like this:

  Here is the CSS used to make this structure behave like a table:

       .equal {            display:table;    }    .row {            display:table-row;    }    .row div {            display:table-cell;    }    

---

Turning A List Into A Navigation bar

Why use a list? Because a navigation bar, or menu, is a list of links. The most semantic way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled.

• Turning a list into a navigation bar- The markup is very simple. It’s an unordered list, with each link in a separate list item.
  
  

  ---

  
  
  

  ---

• Uberlink CSS List Menus
  
  

  ---

• CSSMenus - Horizontal and Vertical 4 Level Deep List Menu
• Listamatic
• 7 Advanced CSS Menu- A fresh round-up of 7 Advanced CSS Menus techniques, that might be useful for you in your next design project.

---

Making Headlines With CSS

Headers in Web pages–marked up with h1, h2, h3, h4, h5, or h6 elements–help the reader determine the purpose of sections in content. If your header is visually stimulating, the odds are better that the section will capture your reader’s eye.

---

• Heading Style Gallery- Want something a little more stylish for your content headings (h1,h2,…) than a different font or color? Try one of the heading styles listed here to spruce up your content.
• Typography for Headlines- Improve the typography in your headlines by being more creative, give them more ‘pop’, that sort of thing.
• Making Headlines With CSS- With a dash of design, we can utilize CSS to stylize those Web page headers to catch the reader’s eye and encourage them to read on.

---

CSS Shadows Techniques

A technique to build flexible CSS drop shadows that can be applied to arbitrary block elements that can expand as the content of the block changes shape.

• CSS Drop Shadows-Build flexible CSS drop shadows that can be applied to arbitrary block elements that can expand as the content of the block changes shape.

  

  ---

• Fun with Drop Shadows- Most of the existing techniques use negative margins, while this one is a really simple version wich uses relative positioning.
• Drop Shadows By Phil Baines- This set of tests are based on an article found on A List Apart’s technique, but with less CSS coding.
• CSS Drop Shadows II: Fuzzy Shadows- Picking up where Part I left off, in Part II designer Sergio Villarreal takes his standards-compliant drop-shadow to the next level by producing warm and fuzzy shadows.

  

  ---

• An improved CSS shadow technique- A very robust and easy-to-use technique for applying snazzy looking shadows using only Web technology and a few little image elements prepared beforehand.

---

CSS Transparency

One of the trickiest things to control, in a CSS-driven design, is the transparency of the interaction between foreground and background content.Below is a list of the best examples of the differing transparency approaches possible with CSS.

• Partial Opacity- Placing text over an image can sometimes make it difficult to read, but with Stu Nicholls’s methods the background for the text is made ‘opaque’ using various methods of opacity (including css3) and the black text is then quite readable.

  

  ---

• Cross-Browser Variable Opacity with PNG- How to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.
• Two Techniques for CSS Transparency

---

Various Link Techniques

• Showing Hyperlink Cues with CSS- The CSS Guy shows us how to get the little icons next to hyperlinks that signify if that link will take you offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7, Firefox, and Safari.
• The ways to style visited Links- CSS offers various possibilities to make links more usable and preserve text readability at the same time. We need to differentiate visited and unvisited links, but we must keep text scannable and readable.
• Link Thumbnail- Shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page.
• Iconize Textlinks with CSS- If you’re looking for more icons to implement, Alex provides a nice start.

---

Monday Inspiration: Graphics In Motion

Graphics doesn’t need to be static or fixed: it can float, jump, fly, dance around and transform in different forms. Once you set visual elements in motion, you can achieve stunning results which would be far too difficult to achieve otherwise. And in fact, there are a number of stunning examples of how this can be done.

In this post we present some excellent examples of videos in which graphics is set in motion. In most videos graphics dominates, but it can also support the content.

You might want to take a closer look

• at the category Monday Inspiration where we’ve covered some graphic motion works over the last months,
• and particularly at the article Typography in Motion which describes what effects can be achieved once the letters are set in motion.

All links lead directly to Quicktime-versions of the videos which is why you might need some traffic to load them. These pieces simply don’t deserve to be watched in low-quality on YouTube.

Graphics doesn’t need to be static or fixed: it can float, jump, fly, dance around and transform in different forms. Once you set visual elements in motion, you can achieve stunning results which would be far too difficult to achieve otherwise. And in fact, there are a number of stunning examples of how this can be done.

The so-called motion graphics is often used in ad spots, music videos and movies. However, sometimes it can also be used for data visualization or live installations (e.g. on buildings). In all these cases designers have a huge space to explore their creativity.

In this post we present some excellent examples of videos in which graphics is set in motion. In most videos graphics dominates, but it can also support the content.

You might want to take a closer look

• at the category Monday Inspiration where we’ve covered some graphic motion works over the last months,
• and particularly at the article Typography in Motion which describes what effects can be achieved once the letters are set in motion.

All links lead directly to Quicktime-versions of the videos which is why you might need some traffic to load them. These pieces simply don’t deserve to be watched in low-quality on YouTube.

Graphics In Motion

Feet Want Out
Well, that’s pretty colorful. You don’t have to be shrooming to experience mind bending psychedelicalness. See what the world looks like through the perspective of a day dreaming foot. Interesting concept, excellent execution.

Sonaka Delivery
That’s what can come out of a simple water drop. Stunning.

The War
“Design-infused storytelling. We wanted to portray the struggles between conformity and individuality; the games we play in our own minds; being a pawn in society. The artistry ultimately stems from taking two contrary things and making a third something from their collision.”

The Hours
So freaky, yet convenient and fascinating. Notice how the music perfectly fits into the scene. A music video production by Jonas Odel. [via MotionGraphics]

Lovebirds
Unique, beautiful and yet so simple. A story of two birds in this advertising spot for Motley Bird.

We Work For Them Installation
A graphic motion piece prepared for the We Work For Them promo.

Underground Spot
An advertisement of a metro. Take beneath the surface.

Natl.tv
The “Attractive Prices” spot for British Airways. Very gentle, soft play of colors. Two 30-second spots.

Siemens Blocks
Thousands of smallest blocks come up together to build the entire world. An ad spot for Siemens, by MassMarket studio.

Art Connects spot
4 independently moving screens comprise to make one large canvas in the plaza — a commons that is the gathering place for all ages. Reflecting its context the pieces are about imagination as portrayed by art and music, core experiences that connect us all.

Samaritans: Vectorscope
The transformation effects are quite impressive. Great attention to detail.

LanternFish
A compact graphic motion reference on lantern fishes. Do you know how Ipnops Murrayi in Gulf of Mexico looks like? By Adam Gault.

Zune Arts — Masks
One of the numerous Zune graphic motion movies, directed and produced by Pandapanther.

Guiness Dot
What can come out of a simple dot? A line, a drawing, a masterpiece, a world… a beer! By Psyop. [via MotionoGrapher]

Smirnoff Commercial
Excellent use of 3D in this 60-second advertising spot for Smirnoff.

Rhythm of Lines
A simple and beautiful ad spot for Audi. Simple lines can sometimes suffice. By BBH.

Magnetosphere
Probably one of the most colorful music visualizations ever created.

Sources and Resources

Mograph Wiki

MoGraph Forum

‘boards screening room

7 Advanced CSS Menu, A Great Roundup!!
New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you […]

New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you a fresh round-up of 7 Advanced CSS Menus techniques, that might be useful for you in your next design project.

---

1) Advanced CSS Menu

Check out this great CSS advanced menu tutorial by Nick La, showing us how to slice up the menu design step by step and putting them together with CSS.
Note: there is an IE6 bug where the hover effect doesn’t display properly. To fix that, you can use Javascript to specify the to display block on mouseover.

Demo

---

2) Advanced CSS Menu Trick

A new concept by altering the non navigation items on hover state which will focus the user’s attention on the item they have hovered on, and create a new look and feel for the site overall. Works perfectly in any modern browser, yet still be fully functional in your older version of IE as well.

Demo

---

3) Son of Suckerfish Dropdowns

The Famous Suckerfish Dropdowns is now back and they’re more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.

Demo

---

4) Tree Frog slide and fly menu

This menu has a vertical sliding first sub level then two flyout levels and demonstrates how it is possible to change positional styling from ‘absolute’ and off screen to ’static’ and expanding the menu vertically.

---

5) Mike’s Experiment

A useful CSS technique for providing pop-up descriptive content by extending nav menus with tool-tips, alerts, notifications, or additional info.

---

6) 8 web menus you can’t miss

8 Great CSS based Menus, you just can’t miss.

---

7) Drop Down Tabs

Drop Down Tabs comes with 5 sleek examples to let you quickly pick your favourite to use on your site. Customize each example’s CSS to modify the look as desired. We got you covered alright!

---

You can find great resources at the links below:

• 13 Styles Focuses on CSS menu design and also offers free menus for download.
• 14 Free Vertical CSS Menus designed by exploding-boy, simple and various styles.
• CSS only drop-down menu
• Deluxe CSS Dropdowns and Flyouts
• Centered Tabs with CSS

Sun Buys MySQL For $1 Billion
Reprinted from the Tech Times #182. Open source enthusiasts were reeling this week when Sun Microsystems announced that it will be purchasing MySQL AB, the company behind the development of the popular MySQL database software, for US $1 billion. The spin from both camps was positive, but what does the deal mean for web developers? And what […]

Reprinted from the Tech Times #182.

Open source enthusiasts were reeling this week when Sun Microsystems announced that it will be purchasing MySQL AB, the company behind the development of the popular MySQL database software, for US $1 billion.

The spin from both camps was positive, but what does the deal mean for web developers? And what impact is it likely to have on other open source projects?

To attempt to answer these questions, we need to look at a number of factors, including Sun’s history with open source technologies, its competitors, and the success of other open source technologies that have been commercialized.

While it’s not without its detractors, there’s no denying that Sun has a pretty solid history when it comes to involvement in the open source world. The company claims to be the biggest contributor to the open source community, a claim that, based upon its release of the Solaris source code in 2005, and the Java programming language in 2006, is difficult to refute.

But there is other evidence of Sun understanding the value of keeping software open source and free: projects like OpenOffice.org and NetBeans have healthy communities and promising road maps. In fact, if you examine Sun’s current offerings to the corporate world, the only key component missing from the portfolio (and one that competitors such as Oracle, IBM, and Microsoft already offer) is a database. MySQL, with over 10 million installations worldwide (including high-traffic sites such as Google and Facebook) is a natural fit.

One concern that web developers may have is that the licensing terms will change — what if Sun decides to start charging a licensing fee for each of the installations of MySQL?

In my opinion, this just won’t happen, simply because Sun realizes that it hasn’t bought a database — it’s bought a community. A community of employees, developers, and clients.

Related to this is the question of whether development of the cross-platform releases of MySQL will stagnate, with Sun’s energy being focused on compatibility with the Solaris platform. Here’s what MySQL’s VP of Community Relations, Kaj Arnö, had to say on the matter:

“I don’t expect (the development of MySQL on Solaris) in any way to be at the cost of other popular operating systems (Linux, Windows, Mac OS/X, other Unixes etc.) or development environments (PHP, Ruby on Rails, Perl, Python, ODBC, C++, C#, VB etc.). MySQL grew with LAMP, and MySQL without LAMP at its core is simply unimaginable. It was MySQL’s part of LAMP that interested Sun in the first place. Hence I don’t see Sun having a platform migration strategy, but to continue to be an integral part of the dot in .com.”

In short, Sun understands the business model around open source software, and it wouldn’t have invested $1 billion into a company only to screw over its users for a short-term profit when the long-term prospects — driving MySQL into the corporate arena with paid support — look so bright. There are plenty of other open source databases (PostgreSQL, for example) with comparable features and performance that customers would quickly migrate to if they were unhappy.

And as for the figure paid by Sun? While some would suggest the number was low given the size of the MySQL user base, $1 billion is a lot of money in anyone’s eyes. Let’s take a look at some other recent open source acquisitions [source]:

• US$210 million for SUSE Linux (Novell)
• US$400 million for JBoss (Red Hat)
• US$500 million for XenSource (Citrix)
• US$350 million for Zimbra (Yahoo!)

I’d say the MySQL team would be feeling pretty happy with themselves right now. Who said there was no money in open source software?

This article provided by sitepoint.com.

101 CSS Techniques Of All Time- Part2
Part 2 of our 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs. If you haven’t read Part I yet, you should read it here. Block Hover Effect Links How to Create a Block Hover Effect for a List of Links- Learn how to […]

Part 2 of our 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs. If you haven’t read Part I yet, you should read it here.

---

Block Hover Effect Links

• How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here.
• How To Make Clickable Areas Bigger - One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.
• Anchor tags for block elements- You can see a demo here.

---

Style an A to Z Index

• Anchor tags for block elements- Creating an A to Z index along the same lines that doesn’t break when you resize your text. You can see a demo here.

---

Typography Techniques

• CSS StyleFun- How to achieve various effects using css, including typography (kerning, drop caps, big 1st letter), styled block-quotes, hover opacity… nice tutorial because it gives sample code/style sheets for each thing.
• CSS Fonts, CSS Typography- Included are tutorials on how to size fonts with CSS, such as using CSS relative units, such as font size keywords, em, or % (percentage) units, along with cross-browser, cross-platform CSS font considerations.

---

CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

• CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
• Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
• Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

---

CSS Tabs

Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. Using CSS, information is loaded instantly with Ajax-based techniques. Some of the most interesting techniques we’ve found in the Web are listed below.

• Glowing Tabs Menu- uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab “glows”, by using the “Sliding Doors” technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.
• DOMTab- is a unobtrusive JavaScript CSS navigation tabs that turns a list of links connected to content sections into a tab interface.
• Control.Tabs- Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.
• Tabifier- Automatically create an HTML tab interface using plug-and-play JavaScript.

---

CSS Pullquotes

Pull quotes are commonly used in print publications to draw emphasis to a particular quote or excerpt from a document. They are quite common in magazines and newspapers and are usually short extracts from the article.

• Simple CSS Blockquotes and Pullquotes- Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes?
• Automatic pullquotes- Using JavaScript based technique to add pullquotes without having to duplicate text in the markup.
• CSS Pull Quotes- In this tutorial you will place the pullquote text in the title attribute of a paragraph or page division, and use the :before pseudo element’s ability to generate content to display the pullquote on the page.

---

CSS Blockquote

A blockquote is used when quoting text from another source, usually another blog or website. Blockquotes are intended to accommodate a larger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences.

• Quotations and citations: quoting text- When quoting text in HTML, there are several ways of marking up the quoted text. Which way you choose depends on what you’re quoting, how you’re quoting it, and how important it is for you that all browsers render the quotations the same way.
• Swooshy Curly Quotes Without Images
• Styling Blockquotes with CSS
• Blockquotes with Image

---

Star Rater Techniques

• CSS Star Rating Part Redux- Shows example of how to setup a star rating system using CSS.
• CSS Ratings Selector- Using a list item to create a star rater.
• Starbox: Rate like a star- Allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.
• Unobtrusive AJAX Star Rating Bar

---

CSS Image Pop-Up

• Cool CSS Image Pop-up- This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!
• CSS Popup Image Viewer- With the help of CSS’s “:hover” pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, “popping” up on demand.
• Pop-up images on inline links- When you hover over the link the image is then given its correct size and it pops-up, in this case beneath the link, but you can place it anywhere you like relative to the link.
• Hoverbox Image Gallery- A super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. View Example.

---

CSS Sitemaps

• Hierarchical Sitemap with Dashed Lines- This tutorial will use a nested unordered list with two levels to create a hierarchical structure where dashed lines will show the dependencies. This could be used as a sitemap or to visualize a directory. A demo can be found here.
• Sitemap Styler: Style your Sitemaps with CSS and Javascript- is a little CSS/JavaScript piece of code that can be easily applied to your sitemap list. All you have to do is include couple lines of code.A demo can be found here.
• Spruced-Up Site Maps- A nested set of clean, streamlined, semantic unordered lists.
• Sitemap Celebration
• CSS SiteMap

---

Horizontal and Vertical Centering

• Vertical Centering with CSS
• Horizontal and Vertical Centering with CSS
• Horizontal And Vertical Centering
• How to: vertical centering with CSS

---

47+ Excellent Ajax CSS Forms
Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.