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

Termaximalist responsive html5 simple fast template (beta1)

So... first i just create a dummy blog with a css template, then i gave the link of that dummy to my friend, for get his feedback, then he said the template is very good, and then i make it more better, then i ask to another friend, and then he said "coool, i want it :D", that means (maybe) my template is good. So i've got an idea to share my template but premium xD. Many of my friends are complain to me, they said that they want this template for free not a premium, hmm (i said), but if i share it premium, i'll be..... But then more friends said that i must share it free, so i decide to share it free for you xP.

WARNING!!

This template is created by Damar Zaky. Before i want to make this template is premium and must pay for get it, but because so many who wants this template, so i share it for free. But with a prerequirement, it is: YOU MUST DO NOT DELETE OR REMOVE THE CREDIT LINK TO DAMZAKY, except if you edit it totally different from before. No more, just that ;D.

PERHATIAN!!

Template ini dibuat oleh Damar Zaky. Sebelumnya saya sempat berpikir akan membuat template ini berbayar, tapi karena banyak kawan dan lawan yang sangat ingin memiliki template ini, akhirnya saya membagikanya secara gratis. Tapi dengan satu syarat, yaitu: ANDA TIDAK BOLEH MENGHILANGKAN LINK KREDIT YANG MENUJU BLOG DAMZAKY, HARGAILAH KARYA ORANG!!!!. Kecuali kalau anda mengubah template itu sampai sangat berbeda dengan sebelumnya. Hanya itu saja hehe ;D.

Some feature of this template

Download template SUPER SEO FRIENDLY for blogspot with this feature. Only these....

• SEO friendly
• Valid HTML5
• Valid CSS3
• Simple and very elegant design xD
• Fast loading
• Valid microdata (google richsnippet)
• Responsive design
• Easy navigation
• Auto-readmore (without javascript)
• High quality home post image thumbnail
• Available in several color
• Mobile template
• First post highlight
• Full CSS3
• Pure CSS3 dropdown menu by Damar Zaky

Disclaimer

This template maybe looks like Mas Sugeng premium template, but i never copy anything from that template, the menu? that's created by me 100%. I don't like cloning and copy CSS+HTML, so this template is pure by me.

Instructions

1. Not valid HTML5

Problem: "& did not start a character reference. (& probably should have been escaped as &.)"

Cause: This problem maybe caused by widget quickedit fonction.
How to fix it:

1. Go to blogger.com, go to template section, backup your template for safety, then go to edit HTML
2. Tick the expand template widget
3. Then search (CTRL+F) this code:<b:include name='quickedit'/>
4. Delete that code (this code not always one, maybe you'll found more)
5. Save template

Note: if the error still exist, try to search that code and delete it untill you don't found that code. If the error still exist, contact me.

2. Deactivate mobile template and use the responsive template

You can follow the instruction here for understanding, then follow this instruction:

1. Open blogger.com, go to template section, then click the mobile settings
2. On that lightbox, check the No. Show desktop template on mobile devices.
3. Then just click save

Demo

DEMO

Download

Before download, please help me:

Click here to download

Enjoy it man :D

have a problem?, ask on the comment here:
http://damzaky.blogspot.com/p/comments.html
or
 http://proyek-template.blogspot.com/2013/04/termaximalist-responsive-html5-simple.html