I finally decided to re-design my site, an idea I had for a long time. A few weeks ago a friend of mine created the wonderful logo you see on the top-left and this was the trigger for me to start working.
I am a huge fun of progress, and I love trying new things and new methods for doing my job. So I decided to give a try to CSS3. My site is the first (and only) site that I have ever done that utilizes CSS3. So, what's the big deal with CSS3? It allows you to do things that you couldn't accomplish with spending much time on (eg) Photoshop.
Now with just a line of code you can have shadows or inset shadows, and they look good! I only use box-shadow for now and I love it. You can see it on my portfolio, the cyan-border around every image and the orange-border when hovering are creating using this simple lines of code:
{
box-shadow: 10px 10px 10px #51A7E0 inset;
padding: 4px;
background-color: #474747;
margin: 2px 0 -5px 0;
}
The background-color is set to the background of my page so as to provide the fading effect. Since this is an inset shadow, more padding makes it appear thicker, and finally the margin controls where the fading happens (in my case after two opposing corners). Note that box-shadow: 10px 10px 10px #51A7E0 inset; will only work with browsers that support CSS3 and its syntax. ATM of writing only Opera seems to do such thing. Firefox and webkit browsers need a different syntax:
-moz-box-shadow: 10px 10px 10px #51A7E0 inset;
-webkit-box-shadow: 10px 10px 10px #51A7E0 inset;These two lines are exactly have exactly the same effect but work for mozilla or webkit browsers accordingly. So, the correct code should be something like this:
.img-shadow {
box-shadow: 10px 10px 10px #51A7E0 inset;
-moz-box-shadow: 10px 10px 10px #51A7E0 inset;
-webkit-box-shadow: 10px 10px 10px #51A7E0 inset;
padding: 4px; background-color: #474747;
margin: 2px 0 -5px 0;
}Note that IE8 doesn't support CSS3 (yet?). Also I advice you to try the box-shadow property without the "inset", it will produce a really nice shadow. There are many examples of it online though, so I only dealt with "inset" in this post!