After completing the aiGFX's new website, i decided to share a few tips, nothing major, with you guys, in case you get stuck or something.
Those tips will be useful only to those who use CSS in their designs. Dont try to copy paste them in a single html page, as they wont work
.
- How to remove border from all images no matter
PHP Code:
a img {border: none; }
- How to create those cool over mouse effects with hyperlinks
PHP Code:
a:link { color: #FFFFFF; text-decoration: none }
a:visited { color: #FFFFFF; text-decoration: none }
a:hover { color: #FFFFFF; text-decoration: none; background: #BB0000 }
Play around with the attributes and create the result you want. this one is featured over aigfx.net
- A very clever way to make your rollover images work, instead of them to delay while perform the rollover action
PHP Code:
.preload1 {
background-image: url();
background-repeat: no-repeat;
background-position: -1000px -1000px;
visibility:hidden;
position:absolute;
}
Just add the above in your css file and create a div with preload1 class at just below <body>. This way your "hidden" preloading images will download when page opens rather than when mouse moves over the image .
- How to make rollover images with CSS
PHP Code:
a.homepage {
display: block;
width: px;
height: px;
background-image: url();
background-repeat: no-repeat;
background-position: 0 0;
margin: 0 auto;
}
a.homepage:hover {
background-image: url();
}
Same as before. Add it in your css file and make sure you give the proper attributes . Dont forget to add the width and the height of the original picture as well as the urls to the picture and to the rollovered one
That's all from me currently, if anyone else has any tips along those lines make sure to share them with us
