Storm Development Blog » CSS http://demo.storm-consultancy.com/blog/development Just another WordPress weblog Fri, 26 Feb 2010 13:36:48 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 CSS Tab Navigation Creation Made Easy http://demo.storm-consultancy.com/blog/development/tools-plugins/css-tab-navigation-creator/ http://demo.storm-consultancy.com/blog/development/tools-plugins/css-tab-navigation-creator/#comments Thu, 15 May 2008 21:44:32 +0000 Adam Pope http://www.izonedesign.co.uk/blog/?p=52 iZone are proud to announce the beta release of a new time-saving tool for web designers and developers: iZone Design Tab Creator.  No coding. No need for PhotoShop. Quick and easy

Horizontal tabbed navigation created with standards compliant CSS and XHTML is becoming a very popular choice among web designers and developers. Our Tab Creator guides you through a range of options before delivering W3C standards compliant, semantic XHTML and CSS.

Stylish CSS based Horizontal Tabbed Menu

The iZone Tab Creator splits the tab creation process into 4 easy steps. You can then see an instant preview of your new menu before downloading the code and images. This step-by-step tutorial will walk you through the process of creating your menu:

Step 1: Select Your Tab Style

Select your tab style

The iZone Tab Creator lets you create menus with a range of tab styles. In the initial release there are 6 styles to pick from. Simply click on your preferred style to select it and move on to step 2.

If you’ve got any suggestions for styles, leave us a note in the comments.

Step 2: Select Your Tab Color Scheme

Define the color palette for your tabs

Step 2 allows you to blend your menu into the look and feel of your site. Select the text and background color for the active and inactive tabs. A Photoshop style color picker is provided to help you explore ideas and a single tab preview lets you see how it will look. We have also provided 8 presets to get you started.

If you’ve already got hex values, you can simply copy and paste them into the text boxes.

Step 3: Add Tabs To Your Menu

Add Tabs to your menu

Your menu needs to link to the pages on your site, right? Step 3 lets you add tabs to your menu, up to a maximum of 10. For each tab you can specify the text to display and the URL that the tab links to.

You can remove a tab by clicking on the cross on the left side. Tabs can be re-ordered by dragging and dropping the rows.

Step 4: Customise Your Menu’s Look and Feel

In the initial beta launch the options area looks a little bare, we’re working on adding cool new features all the time! Currently you have 3 options:

  • The spacing between each of your tabs
  • The width of the bottom border
  • Whether your menu is aligned to the left or right.

If you have any ideas for options you’d like to see, please let us know in the comments!

Step 5: Preview Your New Menu

preview the appearance of your menu

Step 5 provides an instant preview of the menu you have created. It isn’t 100% accurate to the code that gets generated, but gives you a good idea of the appearance. The main differences are:

  • The preview only shows the first 3 tabs
  • Each tab is fixed width, the real menu is fluid and expands to contain the text entered

Step 6: Download The Code

When you click the ‘Download’ button we generate the code and images needed for your menu, package it all up in one nice ZIP file and let you download it. Inside your Zip file you will find:

  • tab_on.gif – The active tab background
  • tab_off.gif – The inactive tab background
  • tabs.html – HTML file containing code to navigation and related CSS

To use the menu on your site:

  • Copy the HTML onto your page. You’ll need the <div> tag and its contents: 
    <div id="nav">

...

</div>
  • Copy the CSS. You can either place it in a <style> tag in the <head> of your page, or put it into an external style sheet (the preferred method).
  • Upload your pages and the 2 images to your server

Future Development

We are still working on the Tab Creator and hope to add more cool features soon. If you have any ideas or you find any bugs in the tool, please let us know in the comments.

Credits

Thanks to Isocra for their ultra cool drag-n-drop script and Mark Kahn for his awesome color picker.

Tagged in:       

You may also be interested in...

CSS: Rounded corners using only CSS 2.1
Top Web Development Firefox Extensions
Burn ISO disc images to CD or DVD with M...
]]> http://demo.storm-consultancy.com/blog/development/tools-plugins/css-tab-navigation-creator/feed/ 5 CSS: Rounded corners using only CSS 2.1 http://demo.storm-consultancy.com/blog/development/tutorials/css2-xsnazzy-rounded-corners/ http://demo.storm-consultancy.com/blog/development/tutorials/css2-xsnazzy-rounded-corners/#comments Mon, 18 Feb 2008 14:52:56 +0000 Adam Pope http://www.izonedesign.co.uk/blog/web-design/css2-xsnazzy-rounded-corners/ Ever wanted to be able to create boxes with rounded corners without using images or relying on CSS3? Well now you can with the xsnazzy method by Stu Nicholls.

The technique hinges on using 4 elements (in this case <b> tags), each slightly narrower than the previous, with appropriate borders and backgrounds applied to create the illusion of a curve. These 4 elements are then included in reverse order at the bottom of the box to create the opposite curves. We can see the arrangement of pixels created in this close up:

xsnazzy corner close-up

The CSS

.xtop,.xbottom { display:block; background:transparent; font-size:1px; }
.xbcontent { display:block; padding: 5px 10px;}
.xb1,.xb2,.xb3,.xb4 { display:block; overflow:hidden; }
.xb1,.xb2,.xb3 { height:1px; }
.xb2,.xb3,.xb4,.xbcontent { border:solid #000; border-width:0 1px; background: #fff;}
.xb1 { margin:0 5px; background:#000; }
.xb2 { margin:0 3px; border-width:0 2px; }
.xb3 { margin:0 2px; }
.xb4 { height:2px; margin:0 1px; }

The XHTML

We can then apply these styles to the following bare-bones XHTML to create our content boxes.








This is a very nice box with rounded corners using only valid CSS 2.1

The Result

xsnazzy box

This method is semantically incorrect as it contains a large number of superfluous <b> tags and is produces jagged edges which are far from pretty. However, if you need a quick and dirty method to get rounded corners on your boxes without relying on images, then it’s a pretty neat solution.

Tagged in:  

You may also be interested in...

CSS Tab Navigation Creation Made Easy
]]> http://demo.storm-consultancy.com/blog/development/tutorials/css2-xsnazzy-rounded-corners/feed/ 1