My 100 post & few tips for web designer

Hello Dear,
Suvho Bangla Noboborsho 1419 (Happy Bengali New Year 1419) to you. You are reading 100th Post of my blog.  So, Basically I want to give few tips for web designer. Specially who works for designing website by CSS3. I want to say something about the tools of CSS3.  Hope, you will enjoy this post.

CSS3 TEST
You know, you have to check the cross browsing for css template, specially CSS3. Because, CSS3 does not support for all browser till now. So, this site will help you to know about this-
http://css3test.com/

DABBLET.COM
This is the play ground of CSS. This is very very familiar website for css designer. More than 1000 css designer take help from this. You can try from this also-
http://dabblet.com/

ANIMATABLE
This is the very hot animation for CSS. You can get help from this site also. The address of this site is-
http://leaverou.github.com/animatable/

CSS3 PATTERN GALLERY
This is very very helpful site for pattern design for website. You can get easily help from this site. This pattern is used only css3, no image. The address of this site is-
http://lea.verou.me/css3patterns/

CSS3 GRADIENT GENERATE
In css3 you can generate gradient without any kind of image. This is very very cool opportunity for any web designer. In colorzilla, you will get this opportunity. This is very user friendly interface. The address of this site is-
http://www.colorzilla.com/gradient-editor/

This is enough for today. I believe that, if any designer follow these site for designing website, he / she will be blast within few months as a web expert.
Pry for me and keep in touch. I will post more important post very soon.

With Thanks-

Advertisements

Css3 text shadow effects

Hello Friends,

Now I am ready to introduce some css3 text shadow effect.

Css3 can spice up your design in simple and easy way . You can achieve a lot of the effects that needed java scripts and image with css3 easily with few lines . In this post I will show how to create some cool effects using text-shadow only .

Let’s Start

The property text-shadow add one or more shadow to a text .It’s included into Css3 text module .

Syntax

  • The vertical and horizontal distance can have + or – values . They also can have the value 0.
  • Blur radius : Represents the size of the blur effect if the value is zero or it wasn’t represented then the shadow won’t be blurred .
  • Color:is the Shadow color . If it is not represented then the shadow color will use the text color instead .

Browser Support :

  • Opera 9.5+( Although I’ve noticed that color: transparent was not supported )
  • Firefox 3.5+
  • Safari 1.0+
  • Google Chrome

 

1. Glow and extra glow

To achieve the glow effect

.glow {color:#FFFFFF ;

text-shadow:0 0 20px yellow ;

}

Try experimenting …change the radius value to get different effects .

Using the previous cc will add some glow but not as intense as sometimes you might need the solution is to add multiple shadows with different radius values .

.extraGlow {color:white;

text-shadow:0 0 30px yellow , 0 0 70px yellow ;

}

We’ve added 2 shadows with 30 and 70 radius values with the same yellow color .

2. Apple style

Pretty simple .. That’s why I love css3

applestyle{background:#666

color: #000;

text-shadow: 0px 1px 1px #fff;

}

3. Photoshop Emboss

.Emboss  {background:#ccc ;

color:#ccc;

text-shadow: -1px -1px white, 1px 1px #333;

}

I used multiple shadows here to achieve the effect one to the top/right other to the bottom/left .One down side to this is that if the browser doesn’t support text-shadow (you know what and who I’m talking about ?! :) ) then you’ll end up with unreadable text .

4. Photoshop Pillow emboss

.PillowEmboss {background:#ccc;

color:#ddd;

text-shadow: 1px 1px white,

-1px -1px #444;

}

Again multiple shadows used here .

5. Blurry text

I found this at Simurai Website. Which is a cleaver trick to make the text color transparent and add a blurred shadow to achieve a blurred text effect.Changing the radius value will change the blur value the higher the value the more blurred text you’ll get.

.blurytext {color: transparent;

text-shadow: #fff 0 0 10px;

}

6. Inset text

I found this trick at StylizedWeb .This a very light and elegant effect it adds a nice touch to the text .

.insettext{color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}

The shadow color and the background color are the same .

7. Stroke text

I will admit this is not a very neat effect and needs little improvement to have “realistic” look stroke ..but thought I’ll add it any way .

.Stroke{color:red;

font-weight: bold;

text-shadow: 1px 1px 0px #000,

-1px -1px 0px #000;

}

By adding 2 shadows in the opposite directions you can have what looks like a stroked text.

8.  3D effect

I love this .. I can’t think of much uses for it but I still love it .Found this on Css-trick and thought it’s really cool .By adding multiple shadows with the same color you can achieve what looks like a 3d text .

.effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}

Thanks to you for reading this article.