Ref. noupe.com

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:

      <div class="equal">    <div class="row">    <div class="one"></div>    <div class="two"></div>     <div class="three"></div>    </div>    </div>    

  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.

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

Text and the way it looks is a major part of any design. A great design can be cheapened if the text on the page looks wrong. Any logo is almost entirely text. From water to fire, these 51 tutorials will show you how to create any style of text you want.

1. Aqua Text
   Re-create the font style that Mac OSX is famous for.
   
2. 3D Cliff Text
   Make text that looks like it’s a part of the land.
   
3. Matrix Style Text
   Take the red pill and learn how to create text in the style of The Matrix.
   
4. Brick Text
   Create text that looks like it was chipped out of a brick wall.
   
5. Set Your Text On Fire
   An advanced tutorial that shows how to create realistic flaming text.
   
   
6. Explosion Effect
   Explode your text with this tutorial.
   
7. Spiderman 3 Style Text
   Create text in the style of the Spiderman 3 logo.
   
8. Colorful Light Burst Effect
   Create text that looks as if it’s bursting out.
   
9. Web 2.0 Sticker Text Effect
   Another Web 2.0 style text effect, but this one looks as if it was a sticker.
   
10. 3D Text
    Another tutorial showing how to create 3D text from a different perspective.
    
11. Worn Rubber Stamp Text
    Make text look as if were stamped on a page.
    
12. Chalk Text Effect
    Text that looks like chalk on asphault.
    
13. Blown Out 3D Text
    3D text in the style of 3D films.
    
14. Create A Professional Looking Logo
    A tutorial showing how the use of gradients and shadows can create professional looking text.
    
15. Shiny 3D Text
    Another 3D tutorial that shows you how to create a reflective logo.
    
16. Reflective Liquid Type
    Create text that looks like reflective water.
    
17. Shiny Floor Effect
    Make it look like your text is being reflected from a shiny floor.
    
18. Water Text
    This tutorial shows you how to create text that looks like water on any background.
    
19. Grungy, Slimey Text
    Use this tutorial to make text look as if it emerged from a swamp.
    
20. Chrome Metal Effect
    Create a beveled chrome font effect.
    
21. Gold Plated Text
    A tutorial showing how to make your text look gold plated.
    
22. Graffiti Text With Photoshop
    Create realistic looking graffiti on structures like walls.
    
23. Transparent GLass Lettering
    Very shiny and transparent lettering good for many uses.
    
24. Swirl Text
    Create a bright swirl using text.
    
25. Highlight and Shadow Effect
    Create text with a pixelated, mosaic background.
    
26. Glowing Gel Text
    Glowing text that looks like gel.
    
27. 3 Stroked Text
    Stylized text that looks layered.
    
28. Icy Cold Effect
    Text that looks like ice is creeping up around it.
    
29. Very Stylish 3D Pixel Text
    Make pixelated text that looks 3D.
    
30. Chrome Text
    Make chrome text that looks like it’s gleaming.
    
31. Rusted Slime Effect
    Make your text look like rust is coming down from it.
    
32. Worn and Torn Text Effect
    Text that looks worn out and falling apart.
    
33. Dreamy Text Effect
    Create text like something out of a dream.
    
34. Schocking Text
    A text effect that looks as if bolts of electricity are coming out of it.
    
35. Furry Text
    Use brushes to create text in any pattern.
    
36. Realistic Stone Effect
    Create text that looks like it was carved out of stone.
    
37. Gutsy Text
    Create text that looks like it contains intestines.
    
38. Soft, Plastic Text
    Plastic text that looks great on any dark background.
    
39. Turf Text
    Blend any style text into turf.
    
40. Diamond Text
    Bling out your text with diamonds.
    
41. Molten Lava Blast Effect
    Use gradients and layer styles to create molten lava text.
    
42. Mossy Effect
    Text that looks as if moss is growing on it.
    
43. Ice Text
    Lettering that looks like it’s frozen stiff.
    
44. Plastic Effect
    Make your text look like it’s wrapped in shiny plastic.
    
45. Fragmented Tiles Text Effect
    Put layered tiles on the inside of your text.
    
46. Zoom Text
    Give your text a little zoom blur.
    
47. Pixel Text
    Create beveled text without layer styles.
    
48. Image Inside Text
    Add an image to the inside of your text.
    
49. Gold And Ruby Text
    Make gold text that looks like it contains jewels.
    
50. Girly Bling Text Effect
    Sparkling letters in a feminine style.
    
51. Halftone Effect
    Surround your text with a halftone style.
    

Adobe Flash is an excellent technology that allows developers to add interactivity and smooth animations to web pages. Its popularity is so immense that you’ll find many websites dedicated to helping developers interested in Flash.

In this article, you’ll find 12 wonderful websites that’s worth a bookmark if you’re looking into sharpening your Flash development skills. For each entry, you’ll find three tutorials from the website so that you can see what’s in store for you.

1. kirupa.com

kirupa.com is a site that features excellent Flash tutorials (as well as Silverlight, ASP.net, PHP, and Photoshop). There are plenty of well-written, detailed tutorials and articles pertaining to Flash sectioned into seven categories including Basic Drawing, Special Effects, Server-side Flash, and Game Development.

Tutorial examples:

• Simple Page Transitions
• Creating and Animating Clouds
• Falling Text

2. gotoandlearn.com

Some people learn best by visualization and following along with the instructor step-by-step in real-time. If you’re the type that prefers to learn by watching instructional videos, check out gotoandlearn.com – a website by Lee Brimelow that offers free Flash video tutorials.

Tutorial examples:

• ActionScript 3 Sound Basics
• Creating 3D Carousels
• Creating Flash Tooltips

3. gotoAndPlay()

gotoAndPlay() is dedicated to providing resources for Flash game developers. It’s a community that has a forum, interviews from professional developers, and reviews of books and resources. It also has tutorials and articles about Flash game development that can be filtered by topic, expertise, and type.

Tutorial examples:

• Developing a space shooter game
• Skeletal Animations
• How to protect SWFs from decompilers?

4. Adobe - Flash Developer Center

Adobe’s Flash Developer Center is a community for Flash developers. Here, you’ll find tutorials, articles, and related resources about Flash. You should also check out the ActionScript Technology Center for articles on specifically about ActionScript.

Tutorial examples:

• Using ActionScript to pause and loop the timeline in Flash
• Drawing with the Pen tool
• Creating a 3D button animation for Flash

5. Flash Kit

Flash Kit is one of the biggest and oldest community dedicated to Flash development. With over 600,000 members, you won’t have a hard time finding people with a similar interest in Flash. There’s a forums section, free resources that you can download and use in your Flash projects, and a large tutorials section that includes 18 categories.

Tutorial examples:

• Making movieclips point at the mouse
• Move a sprite with the keyboard
• How to use hitTest in a simple game

6. ActionScript.org

ActionScript.org is a site that provides resources and information pertaining to Flash, Flex, and ActionScript. They have a fairly active Forums section as well as an ActionScript Library that currently has over 700 objects you can download.

Tutorial examples:

• Drawing Shapes with AS3
• Simple reflection effect with AS2
• Physics in ActionScript 3.0

7. Flash and Math ActionScript 3 Tutorials

Flash and Math has a great collection of tutorials on AS3. They cover basic to advanced topics so that Flash developers of any level can find something they can read and learn from. Many of the tutorials include the source files for download.

Tutorial examples:

• Drag-and-Drop in Flash CS3
• Tween Tricks in Flash CS3 and ActionScript 3
• Simple 3D Drawing in Flash CS3 and ActionScript 3

8. Flash Tutorials on Pixel2Life

Pixel2Life, according to the site, is the "largest tutorial index catering to graphic designers, webmasters and programmers". With over 40,000 indexed tutorials, you’ll find many links to tutorials in their Flash Tutorials section.

Indexed tutorial examples:

• Creating a Basic Flash Website (AS3 Version)
• Actionscript 3 Timer Class
• Stars animation above the city

9. Flash Perfection

Flash Perfection is a website with a large collection of Flash tutorials, tips, and tricks from various websites. Flash Perfection has 23 categories to help you find information more quickly.

Indexed tutorial examples:

• Atmospheric Steam
• Optimizing your Flash SWFs
• Quick and Easy Zoom Effect in Flash

10. metah.ch

metah.ch has some awesome video tutorials on Flash, ActionScript, Flex, and AIR. Files associated with the tutorials can be downloaded and used in your own projects.

Tutorial examples:

• Introduction to Loop and Event in AS3
• Connecting AS3 with a Database
• Interaction between AS3 and JavaScript

11. LukaMaras.com

LukaMaras.com offers detailed Flash tutorials and resources designed to help you learn Flash. There’s also a small forums section with over 3,000 registered users where you can discuss anything related to Flash.

Tutorial examples:

1. ActionScript drop-down menus
2. How to make pixel buttons in Flash the easy way.
3. How to make an amazing dynamic image gallery in Flash 8

12. Flashmagazine

Flashmagazine is an online magazine dedicated to Flash news, reviews, information, and resources. The Tutorials section has some excellent tutorials for Flash developers.

Tutorial examples:

• How to make a custom AS3 preloader
• AS3 Photo gallery
• Rollover effect using masks

I hope you found this article useful! Since there’s so many websites out there dedicated to Flash development, I can’t include them all, so if you didn’t see your favorite – please share it with all of us in the comments.

Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.

One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without where we provided references to the most useful CSS-techniques which are often used in almost every project. Over the last year we’ve been observing what’s happening with the CSS-based web-development, and we collected most useful CSS-techniques we’ve stumbled upon — for us and for our readers.

In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? Let us know in the comments to this post.

Thanks to all developers who contributed to the CSS-based design over the last year. The community appreciates it.

CSS-Techniques

1. Triadic Background Setting with CSS
The Silverback web site uses three background images to create the illusion of 3D with simple CSS. No documentation is provided, however the source code is quite intuitive. [via Wilson Miner]

2. Creative Use of PNG Transparency in Web Design
With proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.

3. CSS Server-Side Pre-Processor

4. Advanced CSS Menu

5. CSS SiteMap

6. Styling File Inputs with CSS and the DOM
File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

7. A Savvy Approach to Copyright Messaging
Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.

8. Particletree Category List

9. Advanced CSS Menu Trick
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

10. CSS hover effect

11. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

12. A Stripe of List Style Inspiration
A different type of list and navbar styling. As stripes.

13. Rediscovering the Button Element

14. Dynamic CSS With Variables
Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails.

15. Hyperlink Cues with Favicons
I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic ‘external link’ icon, we showed that site’s favicon?

16. A CSS styled table version 2

17. CSS Step Menu
A method of designing the so-called step-menus, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.

18. Creating bulletproof graphic link buttons with CSS | 456 Berea Street

19. Iconize Textlinks with CSS
Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon. The updated release of the technique.

20. Better Ordered Lists (Using Simple PHP and CSS)
Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.

21. Circular Menu with CSS
This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example.

22. CSS Dock Menu

23. Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

24. 13 Awesome Javascript CSS Menus
13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.

25. CSS Pricing Matrix
A CSS-based matrix in which clicking on a highlights the associated cell in the top row and left column giving an indication of relationships among the provided information. Similar solution: Tablecloth.

26. CSS List Expander
So, we have an unordered list that can go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects.

27. How to create VISTA style toolbar with CSS
Reproducing Vista toolbar, with buttons and hover effect in cross-browser compatible CSS and (X)HTML.

28. Fade Out Bottom
This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.

29. Scrollovers - A New Way of Linking
Everyone is familiar with hover-effects. This CSS+JavaScript-based techniques creates the Scrolleffect - not really necessary, but it’s nice to know, how it can be done.

30. How to Style an A to Z Index with CSS

31. CSS List Boxes
Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.

32. How-to create a “Table of Contents” Navigation
In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.

33. CSS Recipe for Success

34. Partial Opacity

35. Simple Round CSS Links (Wii Buttons)

36. How to make sexy buttons with CSS

37. CSS Pull Quotes

38. Drop Shadow CSS

39. CSS Speech Bubbles
Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict.Tested in all major browsers.

40. CSS Double Lists

41. Perspective Text with CSS

42. Better Email Links: Featuring CSS Attribute Selectors
Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.

43. CSS: Menu Descriptions
This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.

Further Techniques

44. CSS Transparency Settings for All Browsers

45. Time Sensitive CSS Switcher
CSS Switching script that changes style sheet based on time of day.

46. Custom Reading Containers
This amazing little script allows the user to resize any container.

47. Eric Meyer’s CSS Reset

48. PNG Overlay
Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.

49. Turning Lists into Trees

50. Create Resizable Images With CSS

1. If a method can be static, declare it static. Speed improvement is by a factor of 4.
2. echo is faster than print.
3. Use echo’s multiple parameters instead of string concatenation.
4. Set the maxvalue for your for-loops before and not in the loop.
5. Unset your variables to free memory, especially large arrays.
6. Avoid magic like __get, __set, __autoload
7. require_once() is expensive
8. Use full paths in includes and requires, less time spent on resolving the OS paths.
9. If you need to find out the time when the script started executing, $_SERVER[’REQUEST_TIME’] is preferred to time()
10. See if you can use strncasecmp, strpbrk and stripos instead of regex
11. str_replace is faster than preg_replace, but strtr is faster than str_replace by a factor of 4
12. If the function, such as string replacement function, accepts both arrays and single characters as arguments, and if your argument list is not too long, consider writing a few redundant replacement statements, passing one character at a time, instead of one line of code that accepts arrays as search and replace arguments.
13. It’s better to use switch statements than multi if, else if, statements.
14. Error suppression with @ is very slow.
15. Turn on apache’s mod_deflate
16. Close your database connections when you’re done with them
17. $row[’id’] is 7 times faster than $row[id]
18. Error messages are expensive
19. Do not use functions inside of for loop, such as for ($x=0; $x < count($array); $x) The count() function gets called each time.
20. Incrementing a local variable in a method is the fastest. Nearly the same as calling a local variable in a function.
21. Incrementing a global variable is 2 times slow than a local var.
22. Incrementing an object property (eg. $this->prop++) is 3 times slower than a local variable.
23. Incrementing an undefined local variable is 9-10 times slower than a pre-initialized one.
24. Just declaring a global variable without using it in a function also slows things down (by about the same amount as incrementing a local var). PHP probably does a check to see if the global exists.
25. Method invocation appears to be independent of the number of methods defined in the class because I added 10 more methods to the test class (before and after the test method) with no change in performance.
26. Methods in derived classes run faster than ones defined in the base class.
27. A function call with one parameter and an empty function body takes about the same time as doing 7-8 $localvar++ operations. A similar method call is of course about 15 $localvar++ operations.
28. Surrounding your string by ‘ instead of " will make things interpret a little faster since php looks for variables inside "…" but not inside ‘…’. Of course you can only do this when you don’t need to have variables in the string.
29. When echoing strings it’s faster to separate them by comma instead of dot. Note: This only works with echo, which is a function that can take several strings as arguments.
30. A PHP script will be served at least 2-10 times slower than a static HTML page by Apache. Try to use more static HTML pages and fewer scripts.
31. Your PHP scripts are recompiled every time unless the scripts are cached. Install a PHP caching product to typically increase performance by 25-100% by removing compile times.
32. Cache as much as possible. Use memcached - memcached is a high-performance memory object caching system intended to speed up dynamic web applications by alleviating database load. OP code caches are useful so that your script does not have to be compiled on every request
33. When working with strings and you need to check that the string is either of a certain length you’d understandably would want to use the strlen() function. This function is pretty quick since it’s operation does not perform any calculation but merely return the already known length of a string available in the zval structure (internal C struct used to store variables in PHP). However because strlen() is a function it is still somewhat slow because the function call requires several operations such as lowercase & hashtable lookup followed by the execution of said function. In some instance you can improve the speed of your code by using an isset() trick.

    Ex.

    if (strlen($foo) < 5) { echo "Foo is too short"; }

    vs.

    if (!isset($foo{5})) { echo "Foo is too short"; }

    Calling isset() happens to be faster then strlen() because unlike strlen(), isset() is a language construct and not a function meaning that it’s execution does not require function lookups and lowercase. This means you have virtually no overhead on top of the actual code that determines the string’s length.

34. When incrementing or decrementing the value of the variable $i++ happens to be a tad slower then ++$i. This is something PHP specific and does not apply to other languages, so don’t go modifying your C or Java code thinking it’ll suddenly become faster, it won’t. ++$i happens to be faster in PHP because instead of 4 opcodes used for $i++ you only need 3. Post incrementation actually causes in the creation of a temporary var that is then incremented. While pre-incrementation increases the original value directly. This is one of the optimization that opcode optimized like Zend’s PHP optimizer. It is a still a good idea to keep in mind since not all opcode optimizers perform this optimization and there are plenty of ISPs and servers running without an opcode optimizer.
35. Not everything has to be OOP, often it is too much overhead, each method and object call consumes a lot of memory.
36. Do not implement every data structure as a class, arrays are useful, too
37. Don’t split methods too much, think, which code you will really re-use
38. You can always split the code of a method later, when needed
39. Make use of the countless predefined functions
40. If you have very time consuming functions in your code, consider writing them as C extensions
41. Profile your code. A profiler shows you, which parts of your code consumes how many time. The Xdebug debugger already contains a profiler. Profiling shows you the bottlenecks in overview
42. mod_gzip which is available as an Apache module compresses your data on the fly and can reduce the data to transfer up to 80%
43. Excellent Article about optimizing php by John Lim

Process and integrate data from YouTube into your PHP application with PHP’s SimpleXML extension

Advertising

Blog Search

Blogging

Bookmarks

Calendar

Chat

Community

Email

Enterprise

Events

Financial

Government

Internet

Job Search

Mapping

Media Management

Medical

Messaging

Music

News

Office

Photos

Recommendations

Reference

Search

Shopping

Storage

Video

Widgets

WIKI