Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1450

Nov 6th, 2009

Shadow

Expand Post »

how to give shadow in dreamweaver to textfield area?

this is my code nd i want to give inner shadow for this

html Syntax (Toggle Plain Text)
<label>
      <input name="textfield" type="text" size="25" maxlength="25" width="300px" />
      </label>
<label>
      <input name="textfield" type="text" size="25" maxlength="25" width="300px" />
      </label>

Last edited by peter_budo; Nov 8th, 2009 at 4:27 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

Similar Threads

there is a blue shadow underneath my icons in Windows NT / 2000 / XP
shadow admin in Windows NT / 2000 / XP
Drop shadow around content? in JavaScript / DHTML / AJAX
CSS Border's Shadow ??? in HTML and CSS
Disable BIOS shadow on Presario 700 in Windows NT / 2000 / XP

prachipote

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Oct 2009

Permalink

Nov 6th, 2009

Re: Shadow

Here's a demo of the border effects theoretically available from CSS.

html Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Border Styles Demo</title>
<style type="text/css">
body { background-color: #e0e0e0; }
input {
	margin: 6px 0;
	width: 200px;
	height: 30px;
	border-width: 2px;
}
</style>
</head>
 
<body>
 
<input style="border-style:none"   name="textfield" type="text" size="25" value="none" /><br />
<input style="border-style:dotted" name="textfield" type="text" size="25" value="dotted" /><br />
<input style="border-style:dashed" name="textfield" type="text" size="25" value="dashed" /><br />
<input style="border-style:solid"  name="textfield" type="text" size="25" value="solid" /><br />
<input style="border-style:double" name="textfield" type="text" size="25" value="double" /><br />
<input style="border-style:groove" name="textfield" type="text" size="25" value="groove" /><br />
<input style="border-style:ridge"  name="textfield" type="text" size="25" value="ridge" /><br />
<input style="border-style:inset"  name="textfield" type="text" size="25" value="inset" /><br />
<input style="border-style:outset" name="textfield" type="text" size="25" value="outset" /><br />
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Border Styles Demo</title>
<style type="text/css">
body { background-color: #e0e0e0; }
input {
	margin: 6px 0;
	width: 200px;
	height: 30px;
	border-width: 2px;
}
</style>
</head>

<body>

<input style="border-style:none"   name="textfield" type="text" size="25" value="none" /><br />
<input style="border-style:dotted" name="textfield" type="text" size="25" value="dotted" /><br />
<input style="border-style:dashed" name="textfield" type="text" size="25" value="dashed" /><br />
<input style="border-style:solid"  name="textfield" type="text" size="25" value="solid" /><br />
<input style="border-style:double" name="textfield" type="text" size="25" value="double" /><br />
<input style="border-style:groove" name="textfield" type="text" size="25" value="groove" /><br />
<input style="border-style:ridge"  name="textfield" type="text" size="25" value="ridge" /><br />
<input style="border-style:inset"  name="textfield" type="text" size="25" value="inset" /><br />
<input style="border-style:outset" name="textfield" type="text" size="25" value="outset" /><br />

</body>
</html>

I say theoretically, because last time I ran a check, not all these border styles were available in all the major browsers. IIRC, IE was most comprehensive and Opera least - or was it FF?

To see what's going on in more detail, change border-width to something like 15px.

I think Dunceweaver will let you do all that - surely?

Airshow

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,527 posts
since Apr 2009

Permalink

Nov 7th, 2009

Re: Shadow

thanks.can we give top border bottom or left border to this box

Last edited by prachipote; Nov 7th, 2009 at 1:49 am.

prachipote

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Oct 2009

Permalink

Nov 7th, 2009

Re: Shadow

Yes, standard CSS box model applies.

Top, bottom, left and right can be individually set but please note that with groove, ridge, inset and outset, the styles of the four edges are managed for you to give the right effect, which will probably be lost if you try to address the edges individually. But by all means try.

Airshow

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,527 posts
since Apr 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Why font-size is affecting the gap between divs in this example?

Next Thread in HTML and CSS Forum Timeline: problem with fireFox web design extensions

DaniWeb Message

Cancel Changes

User Name
Password