Jump to content
xisto Community
Sign in to follow this  
Followers 0
rvovk

Rounded Edges For Textarea With Css CSS way of formatting elements

By rvovk, in General Discussion

Recommended Posts

rvovk    0

rvovk
Posted

Today's tutorial is meant for spicing up graphical looks of textarea in our websites. Instead of plain squared edges we will gain rounded edges. Result of this tutorial will look like this:

 

Posted Image

 

So let begin with CSS file. First we will define body:

 

body{ 	width:100%;  margin:0;   padding:0;   text-align:center; 	background:#FFFFFF;}

We have choosen that our body background will be white (#FFFFFF). Cause we will be using rounded corners for our textarea with background color bright blue (#B4D5ED). Rounded corner's images are:

 

Topleft Posted Image

Topright Posted Image

Bottomright Posted Image

Bottomleft Posted Image

 

We will embed then into our textarea, next pictures is showing us how it is done:

 

Posted Image

 

It is like pilling onion. In HTML. If we look at text which is defined with class TEXT which is relativly looking at the top, then we have class TOPLEFT, TOPRIGHT, BOTTOMRIGHT and BOTTOMLEFT which are in sequence from topleft clockwised to bottomright, at the bottom lies class TEXTAREA which is cover with other classes and being formatted that way.

 

Posted Image

 

So documents starts rendering with BODY and goes towards up to last class, which is TEXT and all classes (or ID) are closed with </div>. I see this as pyramidal structure.

 

So HTML file looks like this:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd;<html><head><link rel="shortcut icon" href="slike/favicon.ico" type="image/x-icon"><title>Rounded edges for textarea with CSS.</title><meta http-equiv="content-type" content="text/html;charset=windows-1250"><style type="text/css" media="all">@import "layout1.css";</style></head><body><div class="textarea"><div class="topleft"><div class="topright"><div class="bottomright"><div class="bottomleft"><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p></div><!--bottomleft--></div><!--bottomright--></div><!--topright--></div><!--topleft--></div><!--textarea--></body></html>

Textarea is defined in CSS with next code. There is no padding (if there was any then your background would be corrupted). Background is set to #B4D5ED and width to 300px.

 

.textarea{	margin:10px auto 0 auto;	padding:0;	width:300px;	background:#B4D5ED;}

Div classes for rounded edges are name with TOPLEFT, TOPRIGHT, BOTTOMRIGHT, BOTTOMLEFT. They are almost same code, so I will explain only one.

 

So here is code for all divclasses of rounded edges. As we saw at beggining we have background images that are named same as div classes. Margin and padding is set to 0, cause we don't wanna have corrupted background, url is defining relative path to your background image. Position is declared for class TOPLEFT with code: top left no-repeat. This defines topleft positon and no-repeat, cause we wanna for every image to be presented only once. Same goes for other div classes, only position is changes and name of image file.

 

.topleft{	margin:0;	padding:0;	background:url(topleft.jpg) top left no-repeat;}		.topright{	margin:0;	padding:0;	background:url(topright.jpg) top right no-repeat;}		.bottomright{	margin:0;	padding:0;	background:url(bottomright.jpg) bottom right no-repeat;}		.bottomleft{	margin:0;	padding:0;	background:url(bottomleft.jpg) bottom left no-repeat;}

Code for text is next. This rather formatting of text, important thing is that we used padding of 10px to have same space around text.

 

p.text{  font:12px/16px verdana, arial, serif;	color: #000000;	margin:0;	padding:10px;	text-align:justify;	}

Working example is available: here.

CSS file is available: here.

 

Any suggestions are welcome.

Best regards.

Share this post

Link to post
Share on other sites

rvovk    0

rvovk
Posted

Dammit, Tyssen. I am always two steps behind you :D I wonder how would you make shadows without images :D Thanx for link, It was educational.

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

I wonder how would you make shadows without images  :D

Filters, for example:

<style>.DS{filter: dropshadow(color=black, offx=1, offy=1, positive=1);height: 9}

This may only work for IE. For some reason it wont work without the height property.

Share this post

Link to post
Share on other sites

Sprnknwn    0

Sprnknwn
Posted

Very interesting. I thought the tutorial was really good (I still think it) but the link to the explanation to do the same effect without images it?s impressive!I think I?ll learn some CSS with time and nice people like you.

Share this post

Link to post
Share on other sites

Dragonfly    0

Dragonfly
Posted

I went to your site for tutorials, of course the link was from your signature and when I visited your webpage the tutorial is redirecting me here. Now my comment: Really nice and helpful. Thanks for sharing it here. I have been using table to place curve images. And loading time is taking much... CSS always come in handy in this kind of situation.

Share this post

Link to post
Share on other sites

Tyssen    0

Tyssen
Posted

I wonder how would you make shadows without images  :D

You could use a combination of absolute and relative positioning and z-index to place a solid colour element of the same dimensions behind an image that would do the job.
Or, still using an image: CSS drop shadows.

Share this post

Link to post
Share on other sites

rvovk    0

rvovk
Posted

@Dragonfly - Yes links are there just to point you at my tutorials here. If anyone is needed.Kinda don't find time to write them twice. Maybe in the future. But if somebody finds some other tutorial intresting, then he will be pointed here to check it out -_-@Tyssen - I guess it is this thing, what are you more used of. IMportant rule is that your site looks good in final result and it doesn't take longer time to load.Thanx for comments :P

Share this post

Link to post
Share on other sites

NNNOOOOOO    0

NNNOOOOOO
Posted

The images are not loading please update this I need this for my assignment :(

border-radius: 6px;

That's what I did on mine with no images. Just remember to make the border larger than zero pixels:

border:2px solid

And here is just one line of the file:

p.two {border:2px solid #00f;padding:9px;border-radius:6px;background-color:#007;color:#dd0;}

Just increase the radius for a larger curve.

 

And as a bonus, here is the code for a text area:

input[type="text"] {background-color:#222;color:#ddd;border-radius:9px;border:2px solid #777;padding:3px;}

And here is the page I done it on:

http://muknot.com/

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept