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

CSS text effects collection tutorial

Now i'll share about CSS text effect. It's many code for css text effect, i mean text effect is not a property or value, but it's an effect in css for text. What i share is some of text property that i used, and i think that effect is important to modify your site. Maybe an article like this has already shared in some blog, but because my blog is not up to date, now i just want to share to someone that doesn't know about all of this text effect. So here is the effects.

Text Shadow

Text shadow is a text effect with a shadow. But you can create a creative shadow with this property. If you're creative, you can make like 3D effect, a glowing text effect, a text looks like created by photoshop and many others. The rule is like this: text-shadow: 1px 1px 5px #000;. The red color is the text shadow property, the blue color is the x-offset or the position of the shadow horizontally, the green color is the y-offset or the position of shadow vertically, the pink color is the blur radius of the shadow, the yellow color is the color of the shadow.
Try it yourself!

text-shadow: 0 0 5px #ff0000

Example:
click this link: http://damzaky.blogspot.com/2012/12/css3-text-shadow.html

Text Transform

Text Transform is just an automatic transformation for text, with this property, if you had write something in a div without caps, but you want that text is caps or uppercase, you can use this property.

Example:
capitalize

text-transform: capitalize

uppercase

text-transform: uppercase

lowercase

text-transform: lowercase

Font Variant

Font Variant is not very famous, but this property is very pretty, i like this property. With this property, you can make a small-caps font. Small caps is just like, the first letter of the text is uppercase, but the lowercase will be uppercased with a different size. Confused?, look this example below....

Example:
Small-caps

font-variant:small-caps

Letter spacing

Letter spacing is not a text effect, but you should know this, because if you want to make a beautiful text maybe you need this. Letter spacing is just a space size between the letter.

Example:
Letter spacing 1px

letter-spacing: 1px;

Letter spacing 2px

letter-spacing: 2px;

Letter spacing 3px

letter-spacing: 3px;

Letter spacing 4px

letter-spacing: 4px;

Letter spacing 5px

letter-spacing: 5px;

Text decoration

Text decoration is just a standard CSS value that always used in any site. But i just want to tell you.

Example:
Text decoration: underline

text-decoration: underline

Text decoration: overline

text-decoration: overline

Text decoration: line-through

text-decoration: line-through

Another text effects that i don't want to explain, just copy the code XD.


Font-weight: bold

font-weight: bold;

Font-style: italic

font-style: italic;

line-height: 30px

line-height: 30px

Maybe i forget to share some property, so i'm so sorry, and sorry for not explain the last property.

CSS3 text shadow

CSS3 text shadow is very good for web designing. With CSS3 text shadow, you can make a cool text like using photoshop!. The important thing before using text shadow, is know the rule, the rule is like this: text-shadow: 1px 1px 5px #000;. The red color is the text shadow property, the blue color is the x-offset or the position of the shadow horizontally, the green color is the y-offset or the position of shadow vertically, the pink color is the blur radius of the shadow, the yellow color is the color of the shadow. For example, i have many creation of mine, just copy the CSS to your element.

My CSS3 text shadow creation

3 Dimension

text-shadow: 0px 0px 0 rgb(-28,-28,-28),1px 1px 0 rgb(-57,-57,-57),2px 2px 0 rgb(-85,-85,-85),3px 3px 0 rgb(-113,-113,-113),4px 4px 0 rgb(-142,-142,-142),5px 5px 0 rgb(-170,-170,-170),6px 6px 0 rgb(-198,-198,-198),7px 7px 0 rgb(-227,-227,-227),8px 8px 0 rgb(-255,-255,-255), 9px 9px 0 rgb(-283,-283,-283),10px 10px 9px rgba(0,0,0,0),10px 10px 1px rgba(0,0,0,0.5),0px 0px 9px rgba(0,0,0,.2);

Brushed

text-shadow: 0px 2px 4px #000, 0px 4px 4px #000 /*1*/, 0px -2px 4px #000, 0px -4px 4px #000/*2*/, 2px 0px 4px #000, 4px 0px 4px #000/*3*/, -2px 0px 4px #000, -4px 0px 4px #000/*4*/, 2px 2px 4px #000, 4px 4px 4px #000/*11*/, -2px -2px 4px #000, -4px -4px 4px #000/*22*/, -2px 2px 4px #000, -4px 4px 4px #000/*33*/, 2px -2px 4px #000, 4px -4px 4px #000/*44*/; color: transparent;

Outlined

text-shadow: 0px 2px 2px #000, 0px 4px 2px #000 /*1*/, 0px -2px 2px #000, 0px -4px 2px #000/*2*/, 2px 0px 2px #000, 4px 0px 2px #000/*3*/, -2px 0px 2px #000, -4px 0px 2px #000/*4*/, 2px 2px 2px #000, 4px 4px 2px #000/*11*/, -2px -2px 2px #000, -4px -4px 2px #000/*22*/, -2px 2px 2px #000, -4px 4px 2px #000/*33*/, 2px -2px 2px #000, 4px -4px 2px #000/*44*/;

Double

text-shadow: 0px 40px 4px #000;

Blur

color: transparent; text-shadow: 0 0 10px #333;

Multipe Glow

text-shadow: 0 0 10px #fff, 3px 3px 10px #fff, -3px 3px 10px #fff, 3px -3px 10px #fff, -3px -3px 10px #fff, 10px 10px 30px #61cde8, 0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff, -10px 10px 30px #61cde8, 10px -10px 30px #61cde8, -10px -10px 30px #61cde8; color: black;

Convex

color: transparent; text-shadow: 5px 5px 5px #fff, 5px 5px 10px #333, 0 0 2px #000, -5px -5px 10px #333, -5px 5px 10px #333, 5px -5px 10px #333;

GLOW

color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #2e4585, 0 0 70px #2e4585, 0 0 80px #2e4585, 0 0 100px #2e4585, 0 0 150px #2e4585;

Multiple

text-shadow: 3px 3px 0 #52ffff,12px 12px 0 #ff383f, 22px 22px 0 #52ffff, 32px 32px 0 #ff383f;

Colorful

color: transparent; text-shadow: 5px 5px 10px #0044ff, -5px 5px 10px #ff1f1f, 5px -5px 10px #33ff1c, -5px -5px 10px #ffff00;

Color glow

color: #fff; text-shadow: 0px 0px 5px #fff, 5px 5px 10px #0044ff, -5px 5px 10px #ff1f1f, 5px -5px 10px #33ff1c, -5px -5px 10px #ffff00;

Rainbow

color: white; text-shadow: 1px 1px 1px #ff0000, 2px 2px 1px #ff0000, 3px 3px 1px #ff8800, 4px 4px 1px #fff700, 5px 5px 1px #fff700, 6px 6px 1px #22ff00, 7px 7px 1px #22ff00, 8px 8px 1px #00ffee, 9px 9px 1px #0011ff, 10px 10px 1px #0011ff;

ALL OF THIS TEXT SHADOW ARE CREATED BY DAMAR ZAKY

Pure CSS tooltip without javascript

Pure CSS tooltip is a tooltip or a more info about anything that hovered. Tooltip is very useful for more information about a link or anything that is hovered. Maybe in HTML there are already a tooltip, but that tooltip can't be customized. Now i'll share about how to make a tooltip with pure CSS and without javascript or Jquery.

How to create tooltip with CSS without javascript

It's simply, i just put a pseudo :after to a link element.

1. Open and login to blogger.com, select your blog
2. Click template tab in left sidebar, then backup your template
3. Edit HTML proceed, then search (CTRL+F) for this code: ]]></b:skin>
4. If you have found that code, before that code, paste this code:
   
   a.tltp{position: relative;}a.tltp:after{content:attr(alt);display:none;margin-left:10px;color:#000;background: #fff;border:1px solid #ccc; border-radius: 3px;padding:3px;width:300px;position:absolute;font-family:'Arial',sans-serif;line-height:1.5;letter-spacing:1px;text-transform: lowercase;font-weight: normal;font-size:13px;font-variant:normal;text-align: justify; font-style:normal;}/*CSS tooltip by Damar Zaky http://damzaky.blogspot.com*/a.tltp:hover:after{display:inline;}
5. Then save template

How to make the link with tooltip

For make a tooltip, in any link just put class='tltp' and alt='THE CONTENT OF TOOLTIP' or like this:

<a href='http://blablablac.com' class='tltp' alt='THE CONTENT OF TOOLTIP'>Link</a>

Demo

Link
Just that!

How to designing blogger mobile template

Every day i'm sharing about blogger tutorial, hmm... i'm so tired for creating post. But i must do that because i'm a blogger, and time is money. So now i'll sharing about how to designing blogger mobile template and the explaination about template structure of mobile template. Ok without many word, i'll share now.

How to activate your own mobile template

For activating is easy, just follow this tutorial

1. Open and login to blogger.com, select your blog then click the Template tab.
2. In template tab, there are a mobile preview, then click the button below that preview.
3. Then check the  Yes. Show mobile template on mobile devices. and select the mobile template to custom (if you want to design your own mobile template)
4. And then save, then backup your template, then edit HTML then proceed.
5. Now search (CTRL+F) this code:  <body>
6. Replace that code with this code:
   <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
7. Then save template
8. For temporarily your mobile template is activated, but maybe it's still disordered and not customized

Explaination

For call the mobile selector in blogger you need to make a like this:

.mobile .class {property: value;}

or

.mobile #id {property: value;}

for mobile conditional tag is like this:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

How to make your layout is responsive

For design you need to know CSS of course, and you need to know your template structure.

For responsive style, i'll tell you some basic for responsive design.

If you want to make your wrapper is responsive, the first important thing is the #outer-wrapper. Then for make #outer-wrapper is responsive, you can use like this: 

.mobile #outer-wrapper {max-width: 630px; width: auto;}

or

.mobile #outer-wrapper, .mobile #main-wrapper, .mobile #sidebar-wrapper {float: none; width: auto;}

How to edit mobile HTML post layout

The mobile HTML post layout is in post widget, if you want to edit the layout, just edit like this:

Mobile HTML homepage:

<b:includable id='mobile-index-post' var='post'>

Mobile HTML item page (post):

<b:includable id='mobile-post' var='post'>

How to display widget in mobile

For displaying ONLY in mobile, in the
<b:widget> tag, just add this attribute:

mobile='only'

For displaying widget in desktop and in mobile, in the
<b:widget> tag, just add this attribute:

mobile='yes'

Ok that is the basic, maybe i'll update the advanced tutorial.... special thanks to Mas Sugeng for idea and inspiration, without him, i'll never know about mobile template in blogger

How to make blog super simple and blank

Hahahaha this post is very-very not important, why?, because it's very crazy to make a blogspot page only a blank page. This tutorial will tell you about the simplest blogger template. It's very easy because this blank page is just an empty template. So now for tutorial, trust me it's very easy.

Tutorial

1. Open and login to blogger.com then create a dummy blog with the simple template for first and DON'T use the dynamic views template.
2. Click Template tab and edit HTML
3. Block all HTML code (ctrl+a) and delete all code
4. And then paste this code in the empty HTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>Bloqcoba</title>
<b:skin><![CDATA[ ]]></b:skin>
</head><body>&lt;!--<b:section id='by damar zaky http://damzaky.blogspot.com'/>--&gt;</body></html>
5. And then save template

Explaination

This all code will make a blank page, if you want to make a simple text in one full page of that blog, paste a text below the <body> tag, like this:

<body>
<div style='color: #ff0000; font-size: 100px; font-family: arial, verdana, sans-serif;'>
HELLO WORLD!
</div>
</body>

you are finish, check your blog.

How to create unique or custom post in blogger

What is unique or custom post in blogger?, it's the different post than other post, every page have a different style. This time i will share about how to create that unique or custom post. This tutorial is easy for newbie, but i recommend to use this tutorial if you're understand about CSS. For example of unique post, you can see this blog: http://cyberqpale.blogspot.com, and if you want another demo, search in google with keyword "Blogaziner".  Have you see that?, ok if you want follow this tutorial.

The formula

1. Open blogger.com and login, and then create a blank post
2. Write anything in that post (whatever you want)
3. Then in post you'll see Compose tab and HTML tab, click the HTML tab
4. You found your text with html, then just put this code in the last line:
   <style type='text/css'>
   Put your CSS here
   </style>
5. Then that is the formula, just fill the CSS in that area
6. Still don't understand?
7. Ok, now i'll tell you if you're newbie in HTML

Template structure

Your template structure maybe have:

• #outer-wrapper
• #content-wrapper
• #main-wrapper
• #sidebar-wrapper
• #footer-wrapper
• #header-wrapper
• .post
• .post-body

If you want to make a page without a sidebar in the #content-wrapper, or if you want your page is only post and without sidebar, just do this.

below the <style type=text/css'>, paste this:

#sidebar-wrapper {
display: none;
}
#main-wrapper {
float: none;
width: 100%;
}

So just play the CSS, if you want to remove the header, footer, comments, just do this

#header-wrapper {
display: none;
}
#comments, .comments {
display: none;
}
#footer-wrapper {
display: none;
}

if you want to make a different style like change a background color of post or the blog background color, follow this tutorial and also you can change it with image

.post {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLj0OqYNiXS1GnIGeqbx-w3n0pGiMeHFfX8F3DJBWaZxkyWZ42S4EFaWuaQG8NBESim2aG2QP2WbXI-WCL35dERJLP5GBas7Sw9JnK7fDPjE2ONIdQZ8nRugMKfaPsU0nRzMi6mhiym0/s1600/wrapper.png") repeat-x scroll 0 0 transparent;
}
body {
background: #ccc;
}

Ok just that, happy playing CSS!

CSS float property problem

CSS float property is very important in web designig. What is float property in CSS?, the float property is a CSS property for placing element to 2 column in basicaly. But sometimes float property is a problem on web designing, the float property is make a floated element is placed outside of the element. How to solve that?, read this article about float problem.

Demo and example

Float property makes the ELEMENT1 is placed in outside of his parent, like this example.

ELEMENT1

Solved float property is like this example.

ELEMENT1

So how to solve that?, it's easy you just need to add clear: both before and after the floated element and inside the parent. Like this example below.

Before:

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="float: left;">
ELEMENT1
</div>
</div>

After:

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="clear: both;">
</div>
<div style="float: left;">
ELEMENT1
</div>
<div style="clear: both;">
</div>
</div>

Or like this if you have two floated element in a row

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="clear: both;">
</div>
<div style="float: left;">
ELEMENT1
</div>

<div style="float: right;">
ELEMENT2
</div>

<div style="clear: both;">
</div>
</div>

you just need to add clear both, remember that!

About using CSS in 2012

CSS or we can say cascading stylesheet, if you're a blogger or a personal website, you must know it. CSS is can be used for design, style, ornament, decoration in a web page. But sometimes, web designer use CSS too over, or using too much in their web page, so what's the problem?, there are no problem but if you know CSS has a level 1, 2, 2.1, 3. So what?, the problem it's just the browser supportable. So, CSS3 it's start supported in -+ June 2011, with the updated browser. Then how about using CSS3?, maybe CSS3 will supported in the new browser, but if in the world, there are people who still using the not updated browser software, so what happen?, in your browser you'll view like you want, but how about in another computer?, in another computer of course not like your view. And CSS will still updated because actually CSS3, CSS4 has released, but the problem is only the browser supportable. No browser, No CSS. And untill now the updated browser also still need the prefix tag like: -moz-, -webkit-, -o- or others.

Conclusion

Don't use too much CSS3 in your web page, because in another computer the layout will be different, so use with variation like combinating CSS level 1, 2, 3 and better use CSS level 1 and 2 more than CSS level 3 on your webpage.

But if you're not agree, do like you want, this just my experience......

How to remove blogger CSS reset stylesheet (widget bundle)

I will share now, share what?, the trick for remove the CSS reset stylesheet in blogger. Maybe if you don't know about this code, you may not so like this article, but if you're understand many blogger code, you may think this article is very-very helpful. But why many peoples want to remove this code from HTML?, because, this is a CSS reset code of blogger, and if you're template designer, you may hate this code, because it's make multiple CSS and crashing CSS code. If you're not understand about blogger code, don't follow this tutorial!.


How to remove <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> in blogger?

How to remove <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css' /> in blogger?

WARNING!

Removing this code maybe can make your template destroyed, if you use official widget from blogger, the style can be totally changed. If you're don't understand about this code, don't do this. This tutorial is ADVANCED tutorial, not recommended for newbie or intermediate coder.

Explanation

This tutorial is not real removing the code, but this tutorial is make that code is ignored by browser and not make blog CSS code replaced. It's simply this tutorial is just converting that code to HTML comments, why HTML comments?, HTML comments is ignored by browser, because that i just converting but not removing, and this tutorial can effecting page speed score in Gtmetrix.....

Ok now for tutorial.

Tutorial

1. Open blogger, edit HTML, and backup your template for safety.
2. Edit HTML, proceed, then CTRL+F this code: <b:skin><![CDATA[
3. If you have found that code, in below that code you may found your CSS (of course XD), now block from below that code to before ]]></b:skin>, or block all your CSS and CTRL+X, paste in notepad.
4. Then the remaining code is <b:skin><![CDATA[    ]]></b:skin>
5. Block that code and replace it with this code:
   &lt;style type=&quot;text/css&quot;&gt;
   &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
6. Then below the replaced code, place this code:
   <style type='text/css'>
   
   YOUR CSS FROM NOTEPAD
   
   </style>
7. Then below the <style type='text/css'> that you placed below the ]]></b:skin>, paste your all CSS from notepad.
8. Then save template.
9. You're finish!

Checking

Open your blog, then CTRL+U,  if you found code like this:

<style type="text/css">
<!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
<style id='page-skin-1' type='text/css'><!--
*/
--></style>

If you found that code in page source and all the color of that is black, it means the stylesheet link is ignored by browser and you're succes.

Or you can open http://www.gtmetrix.com then type your blog in the form, if the site finish checking, you may found the tab 'remove unused CSS', if you click, and you not found this code <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> , it means you're succes.....

That's all, special thanks to google group. I'll update later, if you have any question, send it with comments below....