Desizn Tech » CSS

Recreating YouTube Search Form and Other Buttons Using CSS3

Kawsar Ali — Thu, 05 Aug 2010 18:06:50 +0000

CSS3 could not get here any faster. Lately, there has been a lot of post about CSS3. It’s wonderful features are too good not to use. Only folks at Microsoft do not seem to have the grasp of that concept. They could have supported CSS3 for Internet Explorer 8. However, that is another discussion. In this post, we are using some CSS3 properties to create buttons and forms and show you how to enhance user experience.

Live Demo |CSS3 Buttons Download

Here is the HTML structure first.

We added a little javascript onfoucs and onblur to give user hint . The rest simple HTML. Now the CSS.

.searchfield{
border:1px solid #000;
 width:200px;
height:2.5em;
padding-bottom:3px;
}
input:focus.searchfield {border-color:#c8d9f2;}
 .searchbutton{
position:relative;
top:-1px;
font-size:14px;
height:2.5em;
vertical-align:top;
white-space:nowrap;
cursor:pointer;
overflow:visible;
border:1px solid #ccc;
background:#f6f6f6;
background-image:-moz-linear-gradient(top,#ffffff,#efefef); // CSS3  background property
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
// Internet Explorer Gradient Filter http://bit.ly/bVJJP1
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; // CSS3 rounded conrners
}

A little explanation about the CSS. For the background we are using CSS3 gradient property for both Gecko (Firefox) and Webkit (Safari, Chrome) browser. You have define your gradient a little differently for each browser.

So, what about Internet Explorer? By default it does not support rounded corner. However you can use gradient filter for IE. The gradient color rendering in IE7 or IE8 is very ugly. -ms-filter is for Microsoft vendor extension. Read more about here. The result should look like this

20 Must Know Recent CSS and CSS3 Resources and Tools

Kawsar Ali — Wed, 10 Feb 2010 19:29:53 +0000

CSS is always the easiest method to improve websites design and functionality. Moreover, The next version of CSS (CSS3) will revolutionize the way websites works. Except Internet Explorer most of the modern browsers supports CSS3 features. Here we present to you 20 recent CSS & CSS3 tools and resources you need to be aware of as a web designer/developer.

You can check here what CSS3 features Internet Explorer supports. Although, none of the new exciting new features of CSS3 are supported, Microsoft Announced to support CSS3 in Internet Explorer ( IE9). Keep your finger crossed!

Frameworks and Tools

HTML5 & CSS3 Framework- 52 Framework

HTML5 Reset Stylesheet

Easy Framework

CSS Sorter

CSS Sorter is a free online tool that organizes CSS rules alphabetically so that it is be easier to maintain your CSS files.

Helium-css

Helium is a tool for discovering unused CSS across many pages on a web site. The tool is javascript-based and runs from the browser.

Tutorials and Resources

Introduction to CSS3 and Resources

Get the Best out of CSS3

Multi Columned Layouts in CSS3

Pure CSS3 Rotating Coke Can

View Source on this page to see how it it done.

Beautiful Looking Custom Dialog Box With jQuery and CSS3

Depth And Nice 3D Ribbons Only Using CSS3

Drop Shadow in Images : No extra markup

Star Rating Using CSS Sprite and jQuery

Multi-level Multi-column Multi Menus with Pure CSS

CSS Paper Bird

View the source on this page to see how it is done.

Guide to Font Sizing with CSS

The Importance of the !important CSS Declaration

CSS Minification on the Fly

CSS Shorthand Clockwise Rule

Overlapped CSS Menu Using CSS Sprites

Massive Freebies Password: d08YkM1

Ultimate CSS List Creation Methods and Examples

Kawsar Ali — Sat, 21 Nov 2009 23:46:46 +0000

CSS list is very useful and vital in web design. There are many uses of Unordered list (

)

View Demo

Download CSS List Files



 Item 1
 Item 2
 Item 3
 Item 4

Now we are going apply some CSS properties to turn it into a list, which can used for navigation or just a simple list.

display: inline

The first CSS propery we are going to use is inline. This is the CSS default display property and will generate an inline box . There will be no break before or after and flowed as a single inline box. In simple words, they will displayed in one line, rather than two line.
Here are the CSS we are applying the create the first horizontal list

#horizontal_list {
	height: 20px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.45em;
	color: #8e9090;
}
#horizontal_list ul {
	margin: 0;
	padding: 0;

}
#horizontal_list ul li {
	display: inline;
	padding-left: 5px;
}

Here is how it should look like after applying the CSS id=”horizontal_list” to the HTML

display:inline-block

The same result also can be achived by using display:inline-block. The difference is that inline block generates a block box and all the properties as block can be applied. Here is a visual representation of the difference:

Here is the CSS for second type of list ( height and width are left blank but can be applied if need.)

#horizontal_list_2 ul {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.45em;
	color: #8e9090;
}
#horizontal_list_2 ul li {
	display: inline-block;
	padding-left: 5px;
	/*height and width can be added */
	/*
	 height: ;
	 width:;

	 */
}

The result would be same as display:inline unless block properties are added.

float:left

Chris wrote a great post explaining what is float and how it works. One annoying thing about the floats is that you must declare the height or sometime the float has to cleared so the elements below won’t ride up on the side. Regardless, float is one of the most used method for for CSS list. By default the CSS list-style-type is circle. if you to remove it use list-style-type:none property. So, here is the CSS:

#horizontal_list_3 {
	height: 20px; /* without the height the elements below will float */
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.45em;
	color: #8e9090;
}
#horizontal_list_3 ul {
	margin: 0;
	padding: 0;

}
#horizontal_list_3 ul li {
	float: left;
	padding-left: 5px;
	margin-left:20px;
	clear: none !important; /* Below elements are not allowed to float */
	list-style-type:circle;
	/*list-style-type:none; */ /* For removing the list type */
}

Here is how it should look when the CSS is applied:

Vertical list

Vertical list are easier to create, but we will show you two different techniques that are useful. First lets see the result and the CSS:

/*-------------------Vertical List 1---------------------*/

#vertical_list_1 {
	margin-left: 30px;
}
#vertical_list_1 ul {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.45em;
	color: #8e9090;
}
#vertical_list_1 ul li {
	padding-left: 8px;
	margin-left: 0;
	list-style-image: url("bullet_green.png");
}
/*-------------------Vertical List 2---------------------*/

#vertical_list_2 {
	margin-left: 5px;
}
#vertical_list_2 ul {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.45em;
	color: #8e9090;
}
#vertical_list_2 ul li {
	padding-left: 20px;
	margin-left: 0;
	list-style-image: none;
	list-style-type: none;
	background: url("bullet_orange.png") no-repeat;
	background-position: 0 4px;
}

The difference here is that list-style-image has a default distance from the image to the list text and it can not be changed besides inside and outside value. Whereas, using background and background-position the image can be moved left to right value (x value), up and down (y value). There are also some other value such as : top, bottom and more. Check the W3 specification for all the value.

Box using CSS List

CSS list are also useful for creating box. Most commonly CSS box is used for the footer of websites. The trick behind creating a box is having a set width and height for each

element. We also use overflow:hidden property so any text won’t go out of the box . So here is the CSS:
```
/*-------------- Verticle box -------------------*/
#vertical_list_box {
	margin-left: 5px;
}
#vertical_list_box ul {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.45em;
	color: #8e9090;
}
#vertical_list_box ul li {
	display: inline-block;
	clear: none; /* no floating *?
	background: #e7f4f8;
	width: 280px;
	height: 200px;
	overflow: hidden; /* hide if the text is too long *?
	margin-left: 4px;
	padding: 4px;
	list-style-image: none;
	list-style-type: none;
	-moz-border-radius: 5px;
       -webkit-border-radius: 5px;

}
```
The additional styles are in included file and here is how it should look like.

The are many more techniques that can be used to create beautiful lists. Below are some useful reading and tutorials related to CSS list :
- Listutorial : Step by step CSS tutorials
- CSS Design: Taming Lists
- Sexy Ordered Lists with CSS
- Mike’s Experiments – CSS: List Boxes
- Uberlink CSS List Menus
- Simplify List Margins with CSS
If there are any suggestions or errors in the post please feel free to add it in the comments .

Massive Freebies Password: d08YkM1

10 Image Free Sexy CSS Menu and How to Create One

Kawsar Ali — Thu, 21 May 2009 19:40:47 +0000

It has been while since we did any CSS menu post here. Who said you can’t make sexy, cool looking menu with CSS ? Today we bring you 10 Free sexy CSS menu and tutorial on how to create one. As usual they are free for personal use. Most the of menus are created using using CSS and CSS3 propety-webkit-border-radius and -moz-border-radius. Obviously Internet Explorer does not support those properties. Too bad. However, for the sake of it one of the menus is using jQuery rounded corner plugin. So, it is rounded crossbrowser.

Menus are test in Latest version of Firefox, Safari and IE7.

Please report any bugs or improvement.

P.S. : Do not complain if the menus do not work in IE6. Not intended for it.

View Demo

Download Sexy CSS Menu | Mirror

How to create a Sexy CSS Menu?

First you have your basic HTML Mark Up. You can wrap it around with a menu wrapper if you like.


Home
Bio
About
 Contact

We get a simple menu list.

Now we need to add the magical CSS. This creates a horizontal menu.

#nav_rounded_white {
background:#fff;
padding:10px 0px 0px 20px;
height:40px;
width:auto;
list-style: none;
text-transform: lowercase;
font-family: arial, "lucida console", sans-serif;   }

#nav_rounded_white ul {
margin: 0;
padding: 0;   }

#nav_rounded_white li {
float: left;
margin: 0;
padding:0px 10px 0px 0px;   }

Now we get a horizontal menu. Now we need to add some flavor to it. Change the color as you like.

#nav_rounded_white a {
display:block;
line-height: 30px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 18pt;
color:#fff;
letter-spacing:-1px;
text-decoration: none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#ccccbb;

}

#nav_rounded_white a:hover {
text-decoration:none;
background:#004455;
}

And Volia! We have sexy CSS Menu

Massive Freebies Password: d08YkM1

Discover the “Cool” of CSS: 25 Advanced CSS Techniques

Kawsar Ali — Wed, 25 Mar 2009 15:45:45 +0000

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. I prefer to use CSS, rather then JavaScript or Jquey, if the same functionality can achieved by CSS because it is most likely that some people might turn off JavaScript in their pages but not CSS. While some web designer might disagree because of CSS’s lack of ability to make the web pages more dynamic I still think CSS is the way to go.

1. CSS Gradient Text and Background

Would not it be much better if you can use gradient background without using any image? It would make your page load faster.

CSS Gradients using pure CSS
Background gradients and CSS

How about Gradient Text ?

2.Image Overlay Using Z-Index

The z-index property sets the stack order of an element. Using z-index you can put one image or text on top of each other.

3. Using the CSS Boder Creatively

CSS Box Border test : This utility enables the sampling of Cascading Style Sheet (CSS) border styles, and creates the corresponding CSS code for implementation.
Border-image CSS3 only.
CSS Side Border Image Using CSS.

4. A Cool CSS Effect – Dashboard

Create a Dashboard like effect using CSS.

5. Creating 2D/3D buttons using CSS

Create some cool looking buttons using CSS only.

6. Text Embossing/Shadow Technique With CSS

Using this technique you can create iPhone like embossed Text

   1. text-shadow: 0px 1px 0px #e5e5ee;

7. Iconize Text links/Hyperlink with CSS

8. CSS Curly Quotes

9. Using CSS Opacity for Various Cool Effects

Transparency Menu Watermark on an image

10. Blurry Background Effect

CSS Guru Chris Coyier explains h ow to create a blurry background using CSS

11. CSS Parallax Effect

12.Create a Lightbox effect only with CSS

Here is another useful technique that is using CSS and a little Javascript to create the lightbox effect.

13.CSS-Only Accordion Effect

This post explains how to create Accordion using CSS

14. Add grunge Effect to Text Using Simple CSS

In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.

15.Create a Block Hover /Element Hover Effect

16. Simple Dither Effect using CSS

Dezinerfolio shows how to create a dither effect using CSS .

17. Create a liDock Menu

Horizontal Menus That Grow on You

18. CSS Hover Swap Effect

CSS swap hover effect

19. Polaroid effect using CSS

Do you like Polaroid pictures? Well using this technique you can make the pictures on website look like Polaroid.
Polaroid-izing photos with CSS and one Image.

20. CSS Magazine Style Layout

Create a Magazine Type layout Using CSS

21. CSS Hoverbox Menu

A really cool CSS Menu using Images and CSS

22.CSS TABS – CSS Only “DOM TABS”

Using CSS only Create a Tabbed content. No jquery or Javascript at all.

23.CSS Magic with Fixed Background-attachment

Ask the CSS Guy shows a trick that reveals a magic as you scroll.

24.CSS tooltips

Show a message when hovering over the links.

25. Pure CSS Preloader

Add a “loading” icon to your larger images

Massive Freebies Password: d08YkM1

Images galleries-Flash/CSS : Where to get them?

Kawsar Ali — Tue, 06 Jan 2009 23:21:07 +0000

Whenever web designers are working on projects they need images galleries or flash scripts for the clients. Also, sometimes you want to add image galleries for own web sites. In this article I will go over the sites, from where you can acquire high quality image galleries.

Paul Van Roekel

This first site I bring to you is from Paul Van Roekel , who is a photographer. his website has total 18 or more flash based galleries. I call these site the “Mother-Load of all galleries.” These galleries are collections of different images galleries from different sites developed by talented web developers . The cool thing about this is that if you use Picasa , some of these flash galleries comes as template, you can integrate them in Picasa and make a web gallery in one click. I have used this site for various of my projects. Comes in very handy.

Entheos

The second site is Entheosweb.com . This site has couple of free flash galleries and also premium paid galleries as well. The free galleries comes with demo and the images are pulled from XML files, so it is very easy to add or remove images.

Dynamic Drive

Now, lets say you do not want flash galleries and want to stick with good old CSS. No worries. Dynamic Drive Got your back. It has couple of image galleries that are easy to use and customizable. More galleries can be found on this page .

Stu Nicholls

Also, another cool CSS images gallery comes from Stu Nicholls. The images gallery is CSS based and also has a new version that shows individual images shows on the same window.

Moreover, here are 12 Javascript galleries that were reviewed by Tutorial blog, that can be used for free.

Massive Freebies Password: d08YkM1

Free CSS Music Menu

Kawsar Ali — Sat, 03 Jan 2009 00:30:25 +0000

This is a simple CSS menu . It can be used for music blogs and media blog. I recently had to help with a website of a music composer and I decided to use this menu. Enjoy and Feedback are welcome.

View Demo Download Music Menu

Massive Freebies Password: d08YkM1

A Free Colorful CSS Menu

Kawsar Ali — Sun, 28 Dec 2008 04:33:49 +0000

In this post we are sharing a Colorful CSS menu. This menu is really easy to use and customizable.

It is just a simple CSS menu, with a class added to each link to have a different colors.
Click on the demo to see it working. To download the whole file “Right click and Save target As”
Demo Download Colorful CSS Menu

Massive Freebies Password: d08YkM1