10 Best Websites To Download Free Fonts

When designing a Web page, you will most certainly use fonts. Some of my friends ask me about free fonts. They want to know information about best free font resources. So here i share top 10 free fonts site, from where you can download nice and exceptional free fonts.

1. Search Free Fonts

2. 1001 Fonts

3. DaFont

4. Daily Free Fonts

5. Urban Fonts

6. Wonder Fonts

7. Abstract Fonts

8. Font Stock

9. Font Cubes

10. Simply The Best Fonts

Create Rounded corners by CSS without image which supports in all Browsers

In this tutorial i will show you how to Create rounded corners by css without image which supports in all Browsers. I use this technique in my professional work and the output is outstanding. Just you need to edit the css file to make different color rounded box. No image editing sofware needed to create curve image. All you just need to do is understanding the css code. Analyze whole css carefully and see which class use for when and where.

If you are beginner level in css and html i suggest you just copy and paste my css and html code and study the code. Its not too hard.
Hope you will enjoy it. If you like this technique just let me know i will show more excellent tricks in my next post.

Basic idea :
The basic idea of this rounded corners without image is that we style the corners using four or five pixel high strips before and after the main content div. These strips are created using styled <b></b> tags. <b> tags have been used because they are faster to type than <span></span> and take up less file space (as good a reason as any).

Each strip is created using a background color, a left and right border color and a left and right margin.

Heare is a diagram to show how each strip was organized.

The basic curved corner is comprised of four strips labelled b1 to b4 and in the example above the background color is a Orchid , the border color is white and the outer background color is light grey.

The XHTML is below:

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Create rounded corners by css without image which support in all Browsers.</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

The css style is below:

.inset {
background:transparent;
width:40%;
}
.inset h1, .inset p {
margin:0 10px;
}
.inset h1 {
font-size:2em; color:#fff;
}
.inset p {
padding-bottom:0.5em;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #aaa;
}
.inset .b3 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #ddd;
}
.inset .b4 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #eee;
}
.inset .b4b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #fff;
}
.inset .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #fff;
}
.inset .b2b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #fff;
}
.inset .b1 {
margin:0 5px;
background:#999;
}
.inset .b2, .inset .b2b {
margin:0 3px;
border-width:0 2px;
}
.inset .b3, .inset .b3b {
margin:0 2px;
}
.inset .b4, .inset .b4b {
height:2px; margin:0 1px;
}
.inset .b1b {
margin:0 5px;
background:#fff;
}
.inset .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
}

After applying above code the box will be shows like following image

Thats it. Take the code and customize as you want. If you have any question just ask. I will try to give you a better solution. Enjoy making rounded corners by css without image.

Top 20 Design Blogs Every Designer Should Be Reading

In this post i share top 20 design blog authored by talented designers. They delivered high quality content and resources which can helps you in many ways. So i advise those designer who always want to learn new thing and wants to inspired by exciting visual and interface design.

Six Revisions

Smashing Magazine

Webdesigner Depot

Abduzeedo

1st Webdesigner

Tutorial 9

PSD TUTS

Noupe

Line 25

Design Instruct

Inspired Mag

PSD Fan

WebDesignDev

You The Designer

Grafpedia

Dzine Blog

 

Smashing Share

Web Designer Wall

Design Shack

Blog.SpoonGraphics

Top 70 CSS Navigation Menu link

When I'm looking at excellent websites for design inspiration, one of my favorite aspects of design to notice is the navigation menus. While working sometimes i search over web for learning new tricks for making css navigation menus. Those search makes me inspired to create nice menus. Here i provide 70 links about css navigation. Hope this will helps you a lot to make attractive navigation for your website.

1. 11 CSS navigation menus : at Exploding Boy
2. 12 more CSS Navigation Menus. : at Exploding Boy
3. 14 Free Vertical CSS Menus : at Exploding Boy
4. 2-level horizontal navigation : demo at Duoh
5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
6. Accessible Image-Tab Rollovers : demo at Simplebits
7. ADxMenu : multiple menu examples at aPlus
8. A drop-down theme : at CSS Play
9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
10. Bulletproof Slants : demo at Simplebits
11. Centered Tabs with CSS : at 24ways
12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
14. Creating Indented Navigation Lists : A multi-level indented list
15. Creating Multicolumn Lists : at Builder.com
16. cssMenus – 4 Level Deep List Menu : at SolarDreamStudios
17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
18. CSS-Based Tabbed Menu : a simple tabbed menu.
19. CSS-based Navigation : demo at Nundroo
20. CSS: Double Lists : A single list that appears in two columns
21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
22. CSS only dropdown menu : at CSS Play
23. CSS only flyout menus : at CSS Play
24. CSS only flyout/dropdown menu : at CSS Play
25. CSS only flyout menu with transparency : at CSS Play
26. CSS only vertical sliding menu : at CSS Play
27. CSS Swag: Multi-Column Lists : at A List Apart
28. CSS Tabs : tabs without any images
29. CSS Tabs : list of various tab solutions
30. CSS tabs with Submenus : at Kalsey.
31. dTree Navigation Menu : Javascripts Tree at Destroydrop
32. Definition lists – misused or misunderstood? : appropriate uses of definition lists
33. Do You Want To Do That With CSS? – Multiple Column Lists : multi-column lists.
34. Drop-Down Menus, Horizontal Style : at A List Apart
35. Float Mini tabs : at Web-Graphics
36. Flowing a List Across Multiple Columns : A table without using tables.
37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
39. Hidden tab menu : at CSS Play
40. How to Style a Definition List with CSS : at WebReference
41. How to Style an Unordered List with CSS : at WebReference
42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
43. Hybrid CSS Dropdowns : at a List Apart
44. Inline Mini Tabs : at Web-Graphics
45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
46. Inverted Sliding Doors Tabs : at 456BereaStreet
47. Light Weight Multi Level Menu : at CssCreator
48. List Display Problems In Explorer For Windows : list hack for IE
49. Listamatic : simple lists; various styles.
50. Listamatic2 : nexted lists; various styles
51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
52. Mini-Tab Shapes : demo at Simplebits
53. Mini-Tab Shapes 2 : demo at Simplebits
54. More than Just Bullets : at W3.org
55. Multiple Column Lists : at css-discuss
56. A Navbar Using Lists : A lightweight nav bar at WestCiv
57. Navigation Matrix Reloaded : at SuperfluousBanter
58. Remote Control CSS : examples of lists styled differently
59. Remote Control CSS Revisited – Caving in to peer pressure : multi-column remote control
60. Rounding Tab Corners : by Eric A. Meyer.
61. Simple CSS Tabs : at SilverOrange
62. Simplified CSS Tabs : demo at Simplebits
63. Sliding Doors : at A List Apart
64. Spruced-Up Site Maps : sitemaps as lists
65. Styling Nested List : at SimpleBits
66. Suckerfish Dropdowns : at HTMLDog
67. Tabtastic : Gavin Kistner.
68. Tabs Tutorial at BrainJar
69. Taming Lists : at A List Apart
70. Turning a List into a Navigation Bar : at 456BereaStreet

If you have any good link for making navigation menu please share it by your valuable comment which can helps others.

All You Wanted To Know About the Flash Loader Component

Apparently, Adobe flash (preciously Macromedia Flash) is quite a revolutionary design program that allows more than just simple design and animation for a host of purposes. Now we all know that flash is most useful in the area of website development and game design. From increasing the face and real value of many websites with interactive applications and animations to offering addictive desktop and online games, flash has given more than enough reasons for designers to practice their imagination.

But did you know that flash can even be used to enhance your designs through text or image uploads into a flash application from another location? That’s right! Flash lets you expand an already built flash application through what we know as the loader component, and by virtue of its abilities it’s been increasingly used in the area of flash game design .

But the loader component of flash doesn’t just stop there as it finds its use in flash web development as well. In fact, flash is one program that has evidently been known for its multipurpose ability. And to define just that aspect, let’s look at how the loader component offers its benefits. The loader component can be used to pull content from a different location and to upload it into a flash application or in an application that has pictures. What’s worth knowing here is controlling the timing of the image or content loading keeping a tab on the progress during the process. It is noteworthy to know that some components like Alert, ComboBox and Menu might not be functional if certain version 2 components are loaded into the loader component.

Flash graphic design is one more area where the loader component finds great use due to its ability to affix script from other locations. So, in case you want to insert a logo or a caption into a page, you can easily do so by uploading it from a remote location.

Color chart for web design.

Web colors are colors used in designing web pages.Authors of web pages have a variety of options available for specifying colors for elements of web documents. Colors may be specified as an RGB triplet in hexadecimal format (a hex triplet); they may also be specified according to their common English names in some cases. Often a color tool or other graphics software is used to generate color values.

Here are 216 web color codes. There are a variety of ways to color web sites. These hexadecimal codes can be used in both XHTML and CSS.

FFF  FFF CCC  CCC 999  999 666  666 333  333 000  000 FFC  C00 FF9  900 FF6  600 FF3  300 Web color chart 99C  C00 CC9  900 FFC  C33 FFC  C66 FF9  966 FF6  633 CC3  300 CC0  033 CCF  F00 CCF  F33 333  300 666  600 999  900 CCC  C00 FFF  F00 CC9  933 CC6  633 330  000 660  000 990  000 CC0  000 FF0  000 FF3  366 FF0  033 99F  F00 CCF  F66 99C  C33 666  633 999  933 CCC  C33 FFF  F33 996  600 993  300 663  333 993  333 CC3  333 FF3  333 CC3  366 FF6  699 FF0  066 66F  F00 99F  F66 66C  C33 669  900 999  966 CCC  C66 FFF  F66 996  633 663  300 996  666 CC6  666 FF6  666 990  033 CC3  399 FF6  6CC FF0  099 33F  F00 66F  F33 339  900 66C  C00 99F  F33 CCC  C99 FFF  F99 CC9  966 CC6  600 CC9  999 FF9  999 FF3  399 CC0  066 990  066 FF3  3CC FF0  0CC 00C  C00 33C  C00 336  600 669  933 99C  C66 CCF  F99 FFF  FCC FFC  C99 FF9  933 FFC  CCC FF9  9CC CC6  699 993  366 660  033 CC0  099 330  033 33C  C33 66C  C66 00F  F00 33F  F33 66F  F66 99F  F99 CCF  FCC CC9  9CC 996  699 993  399 990  099 663  366 660  066 006  600 336  633 009  900 339  933 669  966 99C  C99 FFC  CFF FF9  9FF FF6  6FF FF3  3FF FF0  0FF CC6  6CC CC3  3CC 003  300 00C  C33 006  633 339  966 66C  C99 99F  FCC CCF  FFF 339  9FF 99C  CFF CCC  CFF CC9  9FF 996  6CC 663  399 330  066 990  0CC CC0  0CC 00F  F33 33F  F66 009  933 00C  C66 33F  F99 99F  FFF 99C  CCC 006  6CC 669  9CC 999  9FF 999  9CC 993  3FF 660  0CC 660  099 CC3  3FF CC0  0FF 00F  F66 66F  F99 33C  C66 009  966 66F  FFF 66C  CCC 669  999 003  366 336  699 666  6FF 666  6CC 666  699 330  099 993  3CC CC6  6FF 990  0FF 00F  F99 66F  FCC 33C  C99 33F  FFF 33C  CCC 339  999 336  666 006  699 003  399 333  3FF 333  3CC 333  399 333  366 663  3CC 996  6FF 660  0FF 00F  FCC 33F  FCC 00F  FFF 00C  CCC 009  999 006  666 003  333 339  9CC 336  6CC 000  0FF 000  0CC 000  099 000  066 000  033 663  3FF 330  0FF 00C  C99 009  9CC 33C  CFF 66C  CFF 669  9FF 336  6FF 003  3CC 330  0CC 00C  CFF 009  9FF 006  6FF 003  3FF

X-Ray for Firefox

See the tags on a page without viewing the sourcecode.
When you applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li, dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what's beneath the surface of the page.

Add to Firefox
https://addons.mozilla.org/en-US/firefox/addon/1802

Lists of standard Doctype Declarations. must know every web designer.

In every web page we must need to add a Doctype Declarations at the top of the html file. Doctype Declarations(DTD) is not only use for validate the page it also use to activate the standards compliant rendering mode in Internet Explorer 6, Mozilla/Firefox and Opera browsers. The Doctype Declaration(DTD) must be exactly spelling and it is case sensitive. So you must type it as it is shown in W3C recommended Doctype Declaration to have the perfect effect.Here Is a list of W3C recommended list of Doctype Declarations.

You can use it in your web document. I suggest you to copy and paste this declarion code into your web document to ease the work. Otherwise if you make any mistake when you type, it will be difficult to have output from it.

Where to use doctype declarations ?
Use the following markup as a template to create a new XHTML 1.0 document using a proper Doctype Declaration. See the list below if you wish to use another DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv="content-type"

content="text/html;charset=utf-8" />

</head>

<body>

Your HTML content here

</body>

</html>

 (X)HTML Doctype Declarations List

HTML 4.01
* Strict:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

* Transitional1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

* Frameset1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 2

* Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* Transitional1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* Frameset1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">