Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips

Wednesday, December 15, 2010

Powerful Techniques For Using CSS Effective Coding

Simple Round CSS Links (Wii Buttons)

Css25 in Powerful CSS-Techniques For Effective Coding

How to make sexy buttons with CSS

Css26 in Powerful CSS-Techniques For Effective Coding

CSS Pull Quotes

Css36 in Powerful CSS-Techniques For Effective Coding

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]

Css00 in Powerful CSS-Techniques For Effective Coding

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

Css43 in Powerful CSS-Techniques For Effective Coding

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

List-style in Powerful CSS-Techniques For Effective Coding

Rediscovering the Button Element

Css54 in Powerful CSS-Techniques For Effective Coding

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.

Css02 in Powerful CSS-Techniques For Effective Coding

CSS Server-Side Pre-Processor

Css03 in Powerful CSS-Techniques For Effective Coding

Advanced CSS Menu

Css32 in Powerful CSS-Techniques For Effective Coding

CSS SiteMap

Css42 in Powerful CSS-Techniques For Effective Coding

Styling File Inputs with CSS and the DOM
File inputs () 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.

Css01 in Powerful CSS-Techniques For Effective Coding

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.

Css50 in Powerful CSS-Techniques For Effective Coding

Particletree Category List

Css21 in Powerful CSS-Techniques For Effective Coding

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.

Css60 in Powerful CSS-Techniques For Effective Coding

CSS hover effect

Css47 in Powerful CSS-Techniques For Effective Coding

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

Dynamic-css in Powerful CSS-Techniques For Effective Coding

l

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?

Css62 in Powerful CSS-Techniques For Effective Coding

A CSS styled table version 2

Css46 in Powerful CSS-Techniques For Effective Coding

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.

Css52 in Powerful CSS-Techniques For Effective Coding

Creating bulletproof graphic link buttons with CSS | 456 Berea Street

Css19 in Powerful CSS-Techniques For Effective Coding

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.

Css56 in Powerful CSS-Techniques For Effective Coding

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.

Css51 in Powerful CSS-Techniques For Effective Coding

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

March-10 in Powerful CSS-Techniques For Effective Coding

CSS Dock Menu

Css48 in Powerful CSS-Techniques For Effective Coding

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.

Digg in Powerful CSS-Techniques For Effective Coding

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

Menu1 in Powerful CSS-Techniques For Effective Coding

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.

Csspricingmatrix in Powerful CSS-Techniques For Effective Coding

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.

Css57 in Powerful CSS-Techniques For Effective Coding

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

Vista in Powerful CSS-Techniques For Effective Coding

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.

Css59 in Powerful CSS-Techniques For Effective Coding

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.

Css58 in Powerful CSS-Techniques For Effective Coding

How to Style an A to Z Index with CSS

Css35 in Powerful CSS-Techniques For Effective Coding

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.

Listboxes in Powerful CSS-Techniques For Effective Coding

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.

Toc in Powerful CSS-Techniques For Effective Coding

CSS Recipe for Success

Css12 in Powerful CSS-Techniques For Effective Coding

Partial Opacity

Css33 in Powerful CSS-Techniques For Effective Coding

Drop Shadow CSS

Css55 in Powerful CSS-Techniques For Effective Coding

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

Best-of-february-03 in Powerful CSS-Techniques For Effective Coding

CSS Double Lists

Css37 in Powerful CSS-Techniques For Effective Coding

Perspective Text with CSS

Css38 in Powerful CSS-Techniques For Effective Coding

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.

Bel in Powerful CSS-Techniques For Effective Coding

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.

Css61 in Powerful CSS-Techniques For Effective Coding

Further Techniques

CSS Transparency Settings for All Browsers

Css11 in Powerful CSS-Techniques For Effective Coding

Eric Meyer’s CSS Reset

Css27 in Powerful CSS-Techniques For Effective Coding

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.

Turning Lists into Trees

Css29 in Powerful CSS-Techniques For Effective Coding

Create Resizable Images With CSS

Css40 in Powerful CSS-Techniques For Effective Coding

Labels: CSS

Friday, October 22, 2010

Rounded corner HTML elements using CSS3 (with IE 6.0)

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css

.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }

Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc)

View demo and download file

Stylesheet

-----------------
<style type="text/css">
body {
background-color: #fff;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
}
.box2 {
background: transparent url(ashera.jpg); no-repeat top left;
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #fff;
font-weight: bold;
border: 11px solid #35b70e;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
}
.box3 {
background-color: #ddd;
width: 210px;
height: 30px;
padding: 20px;
position: absolute;
top: 5px; left: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url(border-radius.htc);
}
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}

</style>

Html Code

----------------
<body>
<p>Not just divs, but any element*</p>
<div class="rel">
<div class="box1">

lorem ipsum dolor sit amet lorem ipsum dolor sit 

amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet     

</div>    

<div class="box2">     

this cat is a hybrid of domestic and wild breeds :)    

</div>    

<div class="box3">     

this box is absolutely positioned    

</div>   

</div>  

</body>

More details are on http://code.google.com/p/curved-corner/

Labels: CSS, html

Wednesday, September 29, 2010

The Simple CSS Grid

Narrow Gutter Space

I did a quick Photoshop mockup to show how 20px gutter space would look like on 960gs. The gutter is a bit too narrow for modern design.

To solve this small gutter problem, a lot of people add padding to either the content area or sidebar containers, making that subsequent content area smaller.

Unnecessary Left and Right Margin

To those who don’t know, the content width in 960gs is actually 940px, not 960px. It is 960px because of the added margin space on the left and right. Some people argue that this margin space helps visibility on mobile devices such as the iPhone and iPad. Technically, if there is a margin required, it should be applied on the container, not the columns.

Too Many Classes

Visual aesthetic might be a personal biased but, even so, there seems to be some fundamental CSS issues as well. Below is a sample case. To achieve the layout result I’ve designed here, with 960gs, you will be required to add extra CSS classes: alpha, omega, and clear. The alpha & omega class is required to get rid of the margin space on the left and right hand sides of the columns. A clear class is also required to clear the floats after each row of columns.

The Simpler 978px Grid (demo)

The 978px grid that I mentioned in my previous article got rid of the unnecessary left and right margin. As a result, the content width is increased by 38px. The gutter space has incresed from 20px to 30px. It still fits in the 1024 default display and the columns can be divided in any number of ways: 1/11, 3/3/3/3, 4/4/4, 3/9, etc.

978px HTML & CSS (demo)

The following is a simpler CSS grid that Darcy and I came up with and deals with scenarios, like the "Too Many Classes", in an elegant way. There is only a left margin on the grids which creates the gutter space. Grid12 is not required because grid12 is the width of the container. There is no .alpha or .omega class, but a single.first class required for the first column in every new row. The purpose of the .first class is to clear the floats and get rid of the left margin space. Since the .first class clears the float, a.clear class is not required after each row.

.container {   width: 978px;   margin: 0 auto;  }

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10,

.grid11 {float: left;   margin-left: 30px;  }

.grid1 {width: 54px;}

.grid2 {width: 138px;}

.grid3 {width: 222px;}

.grid4 {width: 306px;}

.grid5 {width: 390px;}

.grid6 {width: 474px;}

.grid7 {width: 558px;}

.grid8 {width: 642px;}

.grid9 {width: 726px;}

.grid10 {width: 810px;}

.grid11 {width: 894px;}

.first {margin-left: 0;

clear: left;  }

The Simpler 940px Grid (demo)

If you really want to keep the golden ratio, you can achieve the same result with this simpler grid. For those that argue the left and right margin is required to prevent the content from being trimed off in the mobile devices should think about appling that space to the container, not the columns themselves.