We're Moving. So, we've disabled new registrations on this forum. The forum will not officially be released until 8 PM Pacific Standard Time (Friday, Sept, 9th, 2010)~ http://www.ego-one.net/

View previous topic View next topic Go down  Message [Page 1 of 1]

avatar

Jalokim
Manager
Box border radius

Border radius is a special features that comes with CSS3. What it does is render completely fluid corner images for your div boxes. This means that you no longer need to use a large quantity of corner images to get a web 2,0 rounded edges effect.



Preview:



The code is really simple. and for mozilla all you need is 1 line of text.

For the first example with all the borders the same radius all you need is to add this code to your CSS id or class.

Code:
-moz-border-radius: XXpx;
for Chrome, Safari and soon to be Opera you need to separate each corner like so:
Code:
-webkit-border-top-left-radius: 10px;
-webkit-border-top-rigth-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

the code used to work joined, just like the mozilla example in beta css3 versions. But the current live version only supports separated corners

In the second image example we can see the different borders even though its on 1 single div. This is achievable by add different radii classes for each corner

Code:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 15px;


that is the whole magic behind rounded corners is CSS3. Internet Explorer does not support these changes. If you are using IE (and especially IE6) I recommend converting to firefox , Safari, Chrome or Opera.



Text-Shadow Effect




Another big thing that CSS3 brings to us is Text-Shadow effect. With this feature, we can create Photoshop like effects without using images!

Well, here is an example...



Now, lets have a look at the codes...

HTML :

Code:
<p id="example-text">I Like TeaLeaf Graphics!</p>

Pretty simple, isn't it? We have paragraph named 'example-text' having a small sentence in it.
Lets see how the CSS looks...

Code:
#example-text {
text-shadow : 3px 3px 2px #888;
}

Here, we just apply 'text-shadow' property and we are done! The values 3px and 3px are representating the horizontal and vertical offset respectively and the 2px shows the sharpness of the shadow. Its pretty similar to box-shadow Wink

Here is some more interesting stuff with text-shadow.
Its multi-text-shadow Wink Here is a preview...



and here is the CSS for it...

Code:
#example-text {
text-shadow :0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
font-size : 30px;
font-weight : bold;
color : red;
}

In above example, I've just repeated the values of text-shadow property separated by a comma.




Box Shadow

A big thing that CSS3 brings this time is box-shadow effect. CSS coders know that giving shadow effect was not possible without using background images that took hours to make perfect excluding the time they spend after making IE fixes Razz

But, now, with CSS3 box-shadow we can apply shadow effect to any element with just a line of code.

Here is a preview Wink



...and here is how the code looks

HTML :

Code:
<div id="example-box">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>

and the CSS code looks like this...

Code:
#example-box {
margin : 8px;
padding : 8px;
width : 450px;
border : 1px solid black;
-moz-box-shadow : 8px 8px 10px #888;
-webkit-box-shadow : 8px 8px 10px #888;
}

Here, we have a container called 'example-box' having 8px of margin and padding just to make it look neater Wink We have fixed the width at 450px and applied a solid dark-gray border of 1px.

Now, coming to the point, -moz-box-shadow is for applying shadow effect for mozilla and -webkit-box-shadow for other browsers like Opera, Safari, Netscape etc. As you notice, the property takes 3 lengths and a color as it’s attributes, the lengths are:

1) The horizontal offset of the shadow, positive value shows the shadow on the right of the box and negative value shows the shadow on the left of the box.

2) The vertical offset, a positive value puts the shadow below the box while a negative value puts the shadow on the top of the box.

3) The blur radius, it defines the sharpness of the box-shadow. If set to 0, the shadow effect looks the sharpest. More the value is set, less sharp the shadow effect shows Wink


Now lets have some more fun with this code Wink We'll try to make a glowing edge effect.
Here is the CSS for that...

Code:
#example-box {
margin : 8px;
padding : 8px;
width : 450px;
border : 1px solid red;
-moz-box-shadow : 0px 0px 10px orange;
-webkit-box-shadow : 0px 0px 10px orange;
}

Here, I've changed the border color to red and the shadow color to orange. In addition, I've set both horizontal and vertical offset to 0 and blur radius to 10px. This will make a Photoshop like effect on the box. The border will have a glowing edge effect.

Here is the preview...





@fontface - the new font-family

@font-face isn't really CSS3 ... it uses CSS2 @improt settings to retrieve any font files located at your host. Font-face has been perfected with css3.
Did you know that even though this trick is CSS2 IE6 still can't render it?


But lets get to business: here is a
preview:



Now @font-face is a very intelligent system.
This is its CSS markup:
Code:
/* For IE */

@font-face {
   font-family: Journal;
   src: url('http://yourhost.com/fonts/journal.eot');
}

/* For Other Browsers */

@font-face {
   font-family: Journal;
   [code]src: local('Journal Regular'),[/code]
       local('Journal-Regular'),
       [code]url('http://yourhost/fonts/journal.ttf') format('truetype')[/code];
}

Obviously (for forumotion members) a host will be required, like webs.com to fully use the system.

As you can see the code merely imports your font file either directly from your PC:
Code:
src: local('Journal Regular'),

Or if you don't have the font installed on your PC
it imports it from your host:
Code:
url('http://yourhost/fonts/journal.ttf') format('truetype')


to activate the font you need to mark the div that you wish to format as you would normally do... using a simple font-family script:
Code:
.fontfacesample {
   margin: 0 auto;
   width: 500px;
   background-color:#87B00B;
   /* CSS fontface */
   font-family: Journal;
}


And thats how simple it is.

I bet you all noticed that there is an IE hack for font-face... true. Since its basically CSS2 IE will support the font... but look again.
IE has no clue what TTF(TrueType Font) is. It needs a special EOT font format.
Unfortunately most major font sites don't provide fonts in EOT? now what?

Luckily , there is a new site dedicated to web fonts
www.fontsquirrel.com

On that site you can obtain full font-face kits with CSS and upload files... nothing simpler.





Thank you for reading this tutorial.
Special credits to Ankillien who willingly helped in this article typing out half of it.

Stay tooned for more CSS3 tips and tricks as well as recent news.

Guest posting activated





avatar

Post on Sat Aug 15, 2009 7:01 pm by ankillien

Hey Jal! Nice wotk on this article Wink
The thing I liked the most about CSS3 is @font-face Big Grin
Its a really good addition.

avatar

Post on Sat Aug 15, 2009 7:03 pm by Dragonfir731

for some reason the box shadow isnt showing up on my chrome.

avatar

Post on Sat Aug 15, 2009 7:04 pm by Jalokim

dragonfir731 wrote:for some reason the box shadow isnt showing up on my chrome.

Yeah i've also noticed that.
I'll be checking the chrome shadow update

avatar

Post on Sat Aug 15, 2009 7:09 pm by Dragonfir731

Jalokim wrote:
dragonfir731 wrote:for some reason the box shadow isnt showing up on my chrome.

Yeah i've also noticed that.
I'll be checking the chrome shadow update

ok thanks

and is it possible to set a negative raidius?

avatar

Post on Sat Aug 15, 2009 7:11 pm by ankillien

I don't think you can set negative redius Wink
How is it going to be?

avatar

Post on Sat Aug 15, 2009 7:13 pm by Jalokim

radius no...
but the shadows have negative values.

you can make the shadow appear on the top left instead of the bottom right.

You will need minus codes for that

shadow: -2px -2px 4px #000;

avatar

Post on Sat Aug 15, 2009 7:18 pm by Dragonfir731

Jalokim wrote:radius no...
but the shadows have negative values.

you can make the shadow appear on the top left instead of the bottom right.

You will need minus codes for that

shadow: -2px -2px 4px #000;

can you have two shadows on one box?

avatar

Post on Sat Aug 15, 2009 7:21 pm by ankillien

I don't think so Wink
Multiple shadows can only be applied to text not the box.

avatar

Post on Sat Aug 15, 2009 7:36 pm by Dragonfir731

ankillien wrote:I don't think so Wink
Multiple shadows can only be applied to text not the box.

damn, so I cant put a shadow in the top right corner and the bottom left? That sucks lol

Drag~

avatar

Post on Sat Aug 15, 2009 8:05 pm by Jalokim

wait a moment.
You can't have both at the same time... that is true ankillien
but you can have a drop shadow all the way around with equal spacing.

shadow: 0px 0px 4px #000;
remember that the first 2 pixel sizes refer to the distance.
So if distance is 0 its just like distance 0 in photoshop dropshadow... makes it goes all over the show.

you might need to make a larger blur from 4 - 8 pixels to make the shadow visible/
and a darker color to make up for the more distilled blur.

lols

avatar

Post on Sun Aug 16, 2009 3:07 am by KingOfSports

im using chrome and everything looks fine.

avatar

Post on Sun Aug 16, 2009 5:07 am by Dragonfir731

Jalokim wrote:wait a moment.
You can't have both at the same time... that is true ankillien
but you can have a drop shadow all the way around with equal spacing.

shadow: 0px 0px 4px #000;
remember that the first 2 pixel sizes refer to the distance.
So if distance is 0 its just like distance 0 in photoshop dropshadow... makes it goes all over the show.

you might need to make a larger blur from 4 - 8 pixels to make the shadow visible/
and a darker color to make up for the more distilled blur.

lols


thats all I needed to hear lol. Thanks alot!!!

and am I doing this font thing right?

http://forumotioninfo.forumotion.com/index-h1.htm

and for some reason I cant think of a way to move the .tutpic class away from the contbox1 border by 2px. any suggestions?

avatar

Post on Sun Aug 16, 2009 7:11 am by ankillien

Jalokim wrote:wait a moment.
You can't have both at the same time... that is true ankillien
but you can have a drop shadow all the way around with equal spacing.

shadow: 0px 0px 4px #000;
remember that the first 2 pixel sizes refer to the distance.
So if distance is 0 its just like distance 0 in photoshop dropshadow... makes it goes all over the show.

you might need to make a larger blur from 4 - 8 pixels to make the shadow visible/
and a darker color to make up for the more distilled blur.

lols


oh well! I know it. The glow edge thing is done by 0 0 10px values. I thought he is asking to put multiple shadows like in text I've done Razz Thats not possible Wink

avatar

Post on Sun Aug 16, 2009 12:33 pm by Jalokim

Actually ankillien...
I have to say you are wrong.

You can create inside border gradients and full div gradients.
These settings are in beta, but I think the border gradient works.

I had an example somewhere around here


As you may have noticed... images of gradients and corner images is a thing of the past. CSS3 gives total control

http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
http://girliemac.com/sandbox/button.html

here are the gradient borders:
http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

avatar

Post on Wed Aug 26, 2009 10:39 am by tommo

Thanks for the tuturial jalokim

avatar

Post on Wed Aug 26, 2009 4:04 pm by Bambiy

Amazing.

Thanks Jalo.

Got a css for moving the navbar over the logo, forumotion (PUNBB)?

avatar

Post on Sun Aug 30, 2009 9:42 pm by Cyberlord

awesome tutorial jalo.....

avatar

Post on Wed May 12, 2010 10:23 am by Guest

This is awesome Miko!thanks for the article!

avatar

Post on Wed May 12, 2010 8:10 pm by zealous

Cool tut..Awesome..

avatar

Post on Thu May 13, 2010 3:53 am by I♥Ego-One

I am gonna use Them In my Web

Post  by Sponsored content

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum




Site powered by Forumotion
Copyright 2006-2013 | JalokimGraphics | Ego-One
<!-- <script type="text/javascript"> var vglnk = { key: '0d80ae9fe71cec9484f682bd59232f9e' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script><script type="text/javascript"> document.write('<scr' + 'ipt data-cfasync="false" type="text/javascript" src="https://www.adexchangeguru.com/a/display.php?r=1242764"></scr' + 'ipt>'); </script> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({flush: true}); </script></body></html><strong><a href="http://www.forumotion.com/create-forum/phpbb3" target="_blank">Forumotion.com</a></strong>&nbsp;|&nbsp;<span class="gensmall">&copy;</span> <a href="https://www.forumotion.com/punbb" target="_blank">PunBB</a>&nbsp;|&nbsp;<a name="bottom" href="http://help.forumotion.com/" target="_blank">Free forum support</a>&nbsp;|&nbsp;<a href="/abuse?page=%2Ft392-css3-techniques-and-tutorial&amp;report=1" rel="nofollow">Report an abuse</a>&nbsp;|&nbsp;<strong><a href="http://www.forumotion.com" target="_blank">Free forum</a></strong>Derp