Inset and outset text/elements on web design

Hello there, i just want to update a mini post :D. So i was wondering about 3D, i don't know how to make a 3D, i tried to use shadow, or gradient or the others, but now i got it, i got the trick suddenly sended to my brain xD. Maybe this post's not very important for a web designer, but i just want to share for people who don't know about this.

Outset/3D

The 3D actually is just an illusion, but this is my theory, the light is normally come from above, so if the element is 3D its must has a brighter color on top of the element. Then with logic, the color of the main element must be darker than the top, and but must be brighter than bottom. The bottom must be darker than background, element color, and the top light. So like this image:

Inset

The inset is easy, you just need to exchange the light and the dark border/shadow place. Just like this:

So just like that, i made the image with photoshop xD (sorry if it's not good).

Apply it with CSS

With css you just need to copy a code xD.

Demo: inset text & outset/3D text

INSET

OUTSET

Demo: inset & outset/3D element

INSET

OUTSET

Got it?, so that is, i'll update later :D