Today I thought I'd share some of my favorite CSS Tutorial sites. Tutorials can be a great way to take little "lessons" and pick up new skills.
http://www.w3schools.com/css/ - Big CSS Resource, good information and refrences as well as tutorials. Bookmark it.
http://www.glish.com/css/ - Good resource and tutorials on CSS for tableless layouts
Monday, December 4, 2006
Thursday, November 30, 2006
Fun With CSS Backgrounds
Funny as it may be, I am most facinated by CSS backgrounds and all the cool stuff you can do with them.
Fixed backgrounds are really neat and with the right graphics can really give some fun effects to your page.
Lets look at the CSS background property...
background takes the following values:
background-color
background-image
background-repeat
background-attachment
background-position
background-color: this one is fairly basic. You can set the color to its RGB, HEX or name. Also takes transparent.
background-image: This takes the url to your background image
background-repeat: You can tell it to repeat, or not. Takes x, y and none
background-attachment: My favorite! This is what sets the background to scroll or not. Takes fixed or scroll. If you choose fixed, your background doesnt move with your page - neat!
background-position: This sets the position of the background image. Takes top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right or x & y position. This is another handy way to do cool stuff with background images.
Fixed backgrounds are really neat and with the right graphics can really give some fun effects to your page.
Lets look at the CSS background property...
background takes the following values:
background-color
background-image
background-repeat
background-attachment
background-position
background-color: this one is fairly basic. You can set the color to its RGB, HEX or name. Also takes transparent.
background-image: This takes the url to your background image
background-repeat: You can tell it to repeat, or not. Takes x, y and none
background-attachment: My favorite! This is what sets the background to scroll or not. Takes fixed or scroll. If you choose fixed, your background doesnt move with your page - neat!
background-position: This sets the position of the background image. Takes top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right or x & y position. This is another handy way to do cool stuff with background images.
Tuesday, November 28, 2006
CSS Inspiration from CSS Zen Garden
There are alot of very talented designers online who's work I admire. Some have taken CSS to a whole new level and design with completely tableless layouts. It takes some getting used to to transition from tables to classes, and I find myself asking "Can I do that with CSS?"
So, every time those types of thoughs come to mind, I visit CSSZenGarden : http://www.csszengarden.com
It's an incrediable source of inspiration for me to be see how far you can go with just CSS. The variations on the same base vary so widely that it's quite obvious how flexable CSS can be.
If you are in need of inspiration or just want to see what some of the most talented designers have come up with, I suggest you check it out! For the more adventurous, you can even contribute your own piece of the garden.
So, every time those types of thoughs come to mind, I visit CSSZenGarden : http://www.csszengarden.com
It's an incrediable source of inspiration for me to be see how far you can go with just CSS. The variations on the same base vary so widely that it's quite obvious how flexable CSS can be.
If you are in need of inspiration or just want to see what some of the most talented designers have come up with, I suggest you check it out! For the more adventurous, you can even contribute your own piece of the garden.
CSS Tips and Tricks
Welcome to my blog about CSS tips and tricks. I have been designing web pages since about '98, long before CSS came into wide use. In fact, I admit - I was slow to convert to the spiffy new CSS driven design.
Little by little, I started experimenting with CSS and exploring all that you can do with it. I was amazed at how flexable CSS can be once you "get it", and I finally "got it".
CSS is a great way to seperate design from code. It keeps it nice and neat. Sort of like object oriented web design if you have a programming background.
I am still learning about all that CSS has to offer and wanted to set up this blog to share some of the cool tricks that I pick up along the way. I hope you enjoy!
Little by little, I started experimenting with CSS and exploring all that you can do with it. I was amazed at how flexable CSS can be once you "get it", and I finally "got it".
CSS is a great way to seperate design from code. It keeps it nice and neat. Sort of like object oriented web design if you have a programming background.
I am still learning about all that CSS has to offer and wanted to set up this blog to share some of the cool tricks that I pick up along the way. I hope you enjoy!
Subscribe to:
Posts (Atom)
