Tired of those normal old text field boxes? Well, we are going to create our own custom text field. You can use it on a form or for your search field on your blog. We will start out by simply using CSS to customize the color of the text field's background and border. It's simple, but it can make a big difference and help your search field or form fit in with the design of your site.
(more…)
Popularity: 90% [?]
A quick and simple way to use a gradient background for you web site. Make the gradient look like it is fading out with no weird lines – just smoothness. It's really quite easy to do using CSS to edit the body property of the HTML document.
We will start off with the HTML. So, open a new document – I'll be saving mine as fade.html. Get the basic HTML shell written out and go ahead and add a link to a stylesheet – style.css. Now here is how we will layout the page for presentation purposes.
<html> <head> <title>Gradient Background Fade</title> link to stylesheet <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="main"> main container <p>Place holder text</p> <div id="leftSide">left demonstration </div> <div id="rightSide"> right demonstration <h1>Right Section</h1> </div> </div> </body> </html>
Note: if you copy and paste this you need to take out the 'main container', 'left demonstration', 'right demonstration' text – they are not to be in the code they are just comments I made.
Just a quick layout to show a couple uses of the gradient fade. Before we get to the CSS we need to make(or get) an image for the background. You can use Photoshop to create a simple gradient
In Photoshop create a new file – I'll make mine 10px wide by 400px high.
Pick the colors you want to use for your gradient – Take note of whatever the bottom color of the gradient is – we will need it later. If you double click on the color in the Tools pallet you can copy the hexadecimal number (# followed by six digits). Fill your file with the gradient and save it. Or right-click and save the images I used.
Now to the CSS
body
{
/*the color here #2c2721 was the bottom color
of my gradient image - a seamless fade*/
background: #2c2721 url(img/bg3.gif) repeat-x;
}
/*just a container to hold things*/
#main
{
margin: auto;
width: 700px;
height: 600px;
background: #ffffff;
}
#main p
{
padding: 10px;
}
/*the area to the right with a gradient fade*/
#rightSide
{
float: right;
margin-right: 10px;
height: 500px;
width: 200px;
/*#ffffff is the bottom color in gradient*/
background: #ffffff url(img/rightbg.gif) repeat-x;
}
#rightSide h1
{
color: #fff;
margin-left: 5px;
}
/*left area with fade example*/
#leftSide
{
float: left;
height: 500px;
width: 200px;
/*#ffffff is bottom color in gradient*/
background: #ffffff url(img/bg.gif) repeat-x;
margin-left: 10px;
}
All the extra CSS is just formatting to show the examples. The background: is the property we need to worry about to make the gradient fade work. Use repeat-x to make it show up all the way across the page, but not repeat down the page.
Download HTML, CSS, and Images
Not the prettiest example, but you get the idea – pick the colors you want and make it look good.
Popularity: 100% [?]
Using CSS we will add a class to the img tag so that our text will wrap nicely around our image. This can be done fairly quickly and can really make your content look better. I recommend adding these classes to every CSS file – or if you have a base CSS file that you always use put these in it.
Popularity: 27% [?]
Let's use CSS to make a Horizontal Menu. We will be using and styling an unordered list for our menu. There's not a lot to it and the code has comments by each line – so just follow along and you'll have your own menu in no time.
So, make a new .css file and name it style.css – You can use notepad and save the file as .css instead of .txt
We start off with our main styling container. In it we will setup styles like the width of our menu – the background color – font size – and tell it we don't want any bullets next to our list items.
/* main container - ul id="menu" */ #menu { margin: 0; /* reset the margins */ padding: 0; /* reset the padding */ width: auto; /* this size depends on your menu */ float: left; /* line things up */ font-size: 1.4em; /* increase the font size a bit */ background: #656565; /* any background color you want */ list-style: none; /* no bullets on our list items */ }
Now we will style the list items. If you have items in your menu that aren't linked then this is where you would add any extra formatting for those. Most of the time everything in a menu is linked so all we need to do for our menu is tell it to display our items horizontally.
/* list elements */ #menu li { display: inline; /* make it horizontal */ }
Let's style our links. This is where we put in formatting like the color of our links – text decorations – and anything else you want. The padding here is important and is used to give extra space around the words – without it the menu would take the height of just slightly more than the text. The a:visited is added to make the links stay the same color even if the user has already visited a link.
/* style our links */ #menu li a:link, #menu li a:visited { float: left; /* line things up */ color: #ffffff; /* the color of our linked items */ padding: 10px 10px; /* spread it out */ text-decoration: none; /* no underline *//* white border to the right of link */ border-right: 1px solid #ffffff; }
Now we format how the link will look when our mouse hovers over it.
/* style link hover */ /* .active_link class - optional - styles the current pages link */ #menu li a:hover, #menu li a:active, #menu .active_link { text-decoration: none; /* no underline */ /* color to change to when we hover over link */ background: #009900; }
We had float: left above so we need to clear out the left margin so the rest of our page items will fall under our menu instead of to the right of it.
/* optional - but a good class to have in every stylesheet */ /* we had float:left; above so in order to clear out the left margin and allow elements on our page to start under our menu we should clear the left margin after we creat the menu */ .clearLeft { clear: left; }
Open a new HTML file and add a link to our style sheet somewhere within the <head></head> tags.
<head> <link href="sytle.css" rel="stylesheet" type="text/css" media="screen" / > </head>
Within the <body> tags we will setup our menu. Remember we are using an unordered list for our menu.
<!-- use an unordered list --> <ul id="menu"> <!-- each link goes in a list element --> <!-- class active_link would be moved to the link of whatever page you are on --> <!-- so if you if this was the About Us page you would move the class="active_link" within the About Us a href --> <li><a href="csshzmenu.html" class="active_link">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <-- clear out left margin - see stylesheet for more info --> <div class="clearLeft"></div>
There you have it – customize it to your liking and add it to your site. Here are the files for download (right-click save as)
THE HTML
THE CSS
Popularity: 16% [?]