Useful Gibberish

Posts tagged ‘CSS’

Dream dream dream


Am I dreaming?

Yes yes you’re dreaming.

Am I still alive?

Yes, still.

I want to sleep for a while…

Why not?

Fresh and cool CSS techniques stored!

4 Uber Cool Css Techniques For Links
50+ Awesome CSS3 Techniques for Better Designs

Understanding of text-shadow in CSS

CSS give us a cool way to make text more “pop” in the browser rather than pure HTML.

A syntax of a text-shadow is:

text-shadow: 2px 2px 2px #000

In this line, I’ll explain the syntax of the code.

There are three “2px” and a color name after the colon.

The 1st “2px” means the shadow is located on the right of the text and the distance is 2px. If you want to move it to the left, try out “-2px”

Example of 2px and -2px:

1st 2px 1st -2px

The color of the text is maroon, the shadow is black, you can see the exact position of the shadow when I use different parameters.

The following “2px” means nearly the same as the 1st one, but vertically instead of horizontally. It means when you use 2px, the shadow will be laid 2px lower from the main text, the distance will be 2px. If you want to make the shadow go up, just use the sign “-“: “-2px” and the shadow will jump up. This is quite easy to try so I pause the example.

The last “2px” mean the “blur level” of the text, this is hard to explain: the blur radial, so try yourselves. I just give a notive that if you leave it 0px, the shadow will be look exacly the same form as the main text.

The final attribute: color. Easy to understand, it’s the color of the shadow, not like Photoshop (which the color can be adjust the opacity, blending mode …), color of shadow in CSS is only normal as blend mode and 100% as opacity.

Use it wisely, you can make your post looks lively. But don’t get abused.

There’re many ways to use the text-shadow, you can find out yourselves, I just hint you that: popping, neon glow, grave text. Each style can only be used effectively of particular background, so be careful!

Some tips you should know:

-IE8 and newer version don’t support text-shadow.
-To leave a comment in your CSS code, put the comment between /* and */
-I’ll translate this post into VN since I can’t find any sites who teach Vietnamese CSS.

All rounded-corner CSS solutions you should know

Rounded corner element is a trend in webdesigning nowadays, there’re so many techniques to do that. I’ve collected a list of tutorials, hope they may help.
1. Rounded corner in all web browser
2. Creat corner in CSS 2 and 3

The 2nd link provides multi methods to choose, yet CSS 3 hasn’t been fully supported, but the code of that version is the most simple.

Image gallery by jQuery

Writing (pasting) this post reminds me about the time when I managed a site long time ago, when i tried to make a gallery on my site, I’d searched for flash galleries and install it with difficulties. Now that site was down, obviously I’m still dump at Flash, but I found another cool tool to make a image galleries, grâce à CSS and jQuery.

Simply install this code into your site, the effect is really eye-catching.

View the code homepage here.

(A little distraction, I’m doing my exercises on designing concrete and steel structure :P)

Zen coding

A cool info for webdesigners who work gradually with HTML as CSS.

Take a look.

Tag Cloud