Showing posts with label amazing effects. Show all posts
Showing posts with label amazing effects. Show all posts

2.23.2011

Amazing Effect #3! Ehh not really...

UPDATE: the tutorial has been updated (totally changed haha)... scroll down for more!

Hello! I know I have to post the last of the three amazing effects, but I actually thought of one idea but then I realized it would be hard to make you guys understand.
So, instead, here's a banner and a tutorial! :)

2.19.2011

Amazing Effect #2!

HELLO!

That's the next effect... text shadow!

 THIS EFFECT DOESN'T WORK ON INTERNET EXPLORER. SUCKS.

Here's the basic code:
<div style="text-shadow: 5px 5px 5px #45DDE0;">
Text here!</div>
Pretty simple! Now to explain how to change/alter this...

To change the....
Horizontal shadow? Change the FIRST "5px" you see.
Vertical shadow? Change the SECOND "5px" you see.
Blur distance? Change the THIRD "5px" you see.
Shadow color? Change the "#45DDE0" to any color you want! (Click here for color wheel)

That's it!
Until next time...

Alexa

2.15.2011

Amazing Effects... Rounded Corners!


Hi guys!
Here are some cool effects for... stuff. Mostly images and text :)
First lemme just warn you that some of these effects won't work on IE and Opera!
I'll also be posting these effects (3 in total) on 3 different days coz you know I'm just lazy like that :)

So first off...

1. Rounded Corners
This effect does not work on IE (Internet Explorer)
YAYYYYY

So here's the code I used for this...

<div style="border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
-moz-border-radius:25px;
border-radius:25px;">
YAYYYYY
</div>

Now I'll explain this code. HARDIHARHAR

border:2px solid #a1a1a1
2px: width of the border
solid: kind of border
#a1a1a1: the 6 digit HTML color code
 
padding:10px 40px;
can't really explain that so just click here LOL

background:#dddddd
The background color...

width:300px
...I think that explains itself.

-moz-border-radius:25px;
border-radius:25px;

They're both almost the same thing... right? The -moz- at the beginning of the first part stands for "Mozilla". Why? The normal "border-radius:25px;" doesn't work on [Mozilla] Firefox. So, that first code helps support Firefox. SO ADD BOTH CODES! :p
You can also adjust the border radius by increasing or decreasing the 25.

Now that I've explained everything, I think you sorta get it by now...

Here's a starter code to help you get started!!!
 
This code will work for all purposes (blog posts, blog widgets (HTML/Javascript), etc.)

<div style="border:2px solid #CCFFE8;
padding:20px;
background:#F5C9FF;
width:300px;
-moz-border-radius:25px;
border-radius:25px;">
Text here!
</div>

(Here's how it's supposed to look like...)

Text here!

Haha have fun!
Oh yeah and if it doesn't work the first time you try it... TRY AGAIN. AND AGAIN. AND AGAIN...

Until next time...
Alexa
Home Tutorials Freebies Our Favorite Blogs