7 Advanced CSS Menu, A Great Roundup!!
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.
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.
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.
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
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.
Upgrading to Rails 2.0. A Recipe
In previous posts, I’m covered some of the updates to Rails 2.0 and how to prepare for Rails 2.0 but haven’t really covered the mechanics of HOW to upgrade to Rails 2.0. So as part of the 6 things to try in Rails this year series, I have compiled a quick recipe that works for […]
In previous posts, I’m covered some of the updates to Rails 2.0 and how to prepare for Rails 2.0 but haven’t really covered the mechanics of HOW to upgrade to Rails 2.0. So as part of the 6 things to try in Rails this year series, I have compiled a quick recipe that works for me. It probably isn’t the only method, but it works.
1. Fix all of the deprecated warnings
The easiest way to do this is to download Geoffrey Grosenbach’s rake task that I previously mentioned. Copy it to the lib/tasks directory of the app you want to upgrade and run
rake deprecated
This will point you in the direction of any deprecated methods. Find them and fix them.
2. Cleanup your environment
I used to put a lot of code in the enviroment.rb file, which is really a bit of a no-no. To facilitate this, the Rails team introduced the initializers directory where you can add custom code that is automatically loaded at run time. You will need to create the directory now, so run
mkdir config/initializers
Create a new ruby file under that directory and move any custom code, mime types and inflectors from the enviroment.rb files.
3. Update the engine
Even though a lot of the Rails engine is provided by the Rails gems, there is some boiler plate code that each app needs. This is created when you run the rails /path/to/app command. Well, to ensure that everything is up to date, we will do the same thing again. The rails command is smart enough to compare files for differences before overwriting them.
rails /path/to/your/app
You should now be asked “overwrite [file]? (enter “h” for help) [Ynaqdh]” for a whole bunch of files. Double check each filename before hitting yes - some of the files you WON’T want to overwrite (Examples are 404.html, 500.html, database.yml etc). If it is a configuration file you probably won’t want to overwrite it. It will also update the JavaScript libraries, so if you are reliant on those, you may want to say no there too.
I’ve found this is the best way to make sure everything is up to date.
4. Update the views
Whilst not strictly required, I found a rake task in this article that renames .rhtml files to .html.erb which is nice for consistency.
For a standard Rails install that doesn’t use any of the deprecated plugins, that should be it! Let me know if you find any other tidbits of wisdom.
This article provided by sitepoint.com.
In the Lab: Doing strange things to CSS Backgrounds
So, last year you might remember me running through some experiments with using percentages to position your background-image in CSS. The short version: Percentages are slightly counter-intuitive but quite powerful — if it wasn’t for IE6-7 sucking by always minutely miscalculating them. In the original post we stuck mostly to the more predictable and commonly-used percentages […]
So, last year you might remember me running through some experiments with using percentages to position your background-image in CSS. The short version: Percentages are slightly counter-intuitive but quite powerful — if it wasn’t for IE6-7 sucking by always minutely miscalculating them.
In the original post we stuck mostly to the more predictable and commonly-used percentages — from 0-100%. Today I thought we might look at some of the interesting things that happen if start to crank those numbers.
Now to be clear, this is mostly ‘theoretical CSS’ in a Stu Nicholls kind of way and probably isn’t stuff you’ll be finding a use for every day. Hopefully it will, at least, be handy for helping you to get a good grip on the subtleties of how percentages interact with images. With luck it might even come in handy at some point in the future.
Let’s look at a starting example, taking a background-image positioned 150% 0%. The zero is a no-brainer, and will obviously place the graphic on the top edge of the box.
For the horizontal position the browser will first locate a spot 50% to the right side of your DIV. It will then find a spot 50% to the right hand side of your image, and align those two points. This will actually have the effect of moving your image back towards (relative to the original point you located).
This means that if the image is small, that offset will also be small and the image will remain mostly, if not entirely hidden beyond the right edge of your DIV.
If the image and DIV are the same size, these offsets will cancel each other out, and the image will be positioned in the horizontal center of it’s DIV.
Howver, if the image is larger than it’s containing DIV, this offset will actually start to move to the LEFT of the containing DIV. Weird but it makes sense if you think about it.
Negative percentages work the same way, only to the left of screen.
However it’s when you set your background to tile horizontally that really interesting things start to happen (background-repeat: repeat-x;). While the tiling effect will ensure your image will always be visible, setting large percentages means even a small resize of your browser will translate into a massive repositioning your background graphic. For instance, if your background-position is set to -500%, a 50px increase in your browser will slide your background-image 250px to the left.
Rather than explaining this, it’s easiest to just to demonstrate it via this little example I’ve cobbled together for the The Art and Science of JavaScript book launch.
Start your browser smallish, grab a corner and as you begin to resize the application up and down, you should see an animated ‘diorama’ effect happening around the limo. Each of the ’stage layers’ (i.e. the cityscape, background crowd and foreground crowd) is given a larger negative percentage than the one before it (-100%, -250% and -550% respectively).
The limo is given a positive percentage of 150%, which drives it in and out of the right hand stage as you resize.
Kinda mesmerizing in a Mario Brothers kind of way, isn’t it?
So are ‘resize animations’ the future of the web?
Clearly not, but it does offer a few practical possibilities. I could imagine some nice ideas with site headers where a number of partially-transparent layers were overlayed and positioned with large percentages. Resizing the browser would change the way these layers interacted, perhaps making the header appear radically different at various browser resolutions. As an analog, think of the large changes a small twist can create in a kaleidoscope.
James has also speculated about employing the trick in JavaScript animations.
Even if nothing particularly practical ever comes of it, it was a lot of fun to fiddle with and I think I’ve got a rock solid grasp on how percentages work now. Hopefully it clears things up for a few others too.
*Note: Linux doesn’t re-render the browser when resizing until you release the window edge, so you can’t see this animating effect on a Linux box.
**Note: Apparently most Linux distros show the animation fine. Must be a setting in my Gnome setup.
This article provided by sitepoint.com.