Daily Web Design Inspiration & Ideas
The CSS way of creating great website backgrounds. Nathaniel from tutvid.com did a nice video tutorial that shows how this is done.
Using a top gradient image with a background color you can acheve unique looking backgrounds for your websites. Just use your imagination to create the one that will work with yours.
Popularity: 12%
Here is a simple way to turn a design done in Photoshop into a webpage using HTML and CSS. Anyone can follow this video and do the same with their design.
Click here to download the Photoshop CS3 design file.
Popularity: 54%
This one is awesome, a portfolio menu. As you hover over the small rectangles, they expand to a square where you can see the project, as you leave each it rolls back up. This was submited by one of our readers.
No, this is not Flash, this is DHTML, CSS folks. Very nicely done. Make sure to check out the live version on their website.
Go to: http://www.guerrilla-website-design.co.uk/portfolio.php
Popularity: 11%
Need to refine your CSS skills? Are you looking for some cool tips and tricks for CS3, Acrobat, Illustrator or MS Office? If you are, then go check out the free video tutorials at Ten Ton Books! Geoff has put together some great, informative tutorials on all of the subjects listed above. Currently there are 8 free videos. I watched the first in a three part series on ‘Creatin’ CSS Layouts in Dreamweaver’ and it was great. I’d highly recommend them to anyone interested in refining their abilities in Dreamweaver.
Go check ‘em all out!
Popularity: 8%
Here is a simple way to center a DIV on a page using CSS.
#myDiv {
position: absolute;
width:750px;
left: 50%;
margin-left: -375px;}
Use absolute positioning.
position: absolute;
Specify the size of your div, in pixels.
width:750px;
Then you position the left edge of the div in the center of the page.
left: 50%;
And now you just moove the DIV to the left half of it’s size, half of 750 in our case is 325.
margin-left: -375px;
And you’re done.
Popularity: 5%
The source site for this is: http://www.actionhead.com
I like the way the background is on this website. The design and the fixed style. This is a good example for this kind of design. Here is a CSS code for making the background fixed, so it doesn’t scroll with the page.
body {
background: #ffcc66url("graphics/bg.jpg") no-repeat fixed;
margin: 0 0 50px 0;
}
Popularity: 9%
Here is how you center a page using CSS. Create a DIV named container that holds the page. Using CSS you set a left padding of 50% which moves the entire page to the right 50% of the screen and aligns?the left edge of the page to the center. Now you just set the left margin to negative half of the container's size, which in this case is -380 because the container size is 760px. Bam! You have a centered page.
<style>
#container {
LEFT: 50%;
MARGIN-LEFT: -380px;
WIDTH: 760px;
POSITION: absolute;
}
</style>
Popularity: 2%
