Solved

3-D text box

Posted on 2013-06-21
5
204 Views
Last Modified: 2013-06-21
I want to make a single cell table that looks like a textbox.  Meaning I want that 3D look.   How could I do this?
0
Comment
Question by:HLRosenberger
5 Comments
 
LVL 9

Expert Comment

by:TvMpt
ID: 39266329
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39266361
Try this one:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.boxtd{
	box-shadow: 1px 1px 2px #313131 inset;
    display: block;
    height: 30px;
    width: auto;
}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="boxtd">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39266365
You can add various border styles to your table cell. Like with margins and paddings, you can specifiy different border style / color / width etc for the 4 different sides. The border style can be solid, double, groove, inset, ridge etc. Here's the full spec on CSS borders:

http://www.w3schools.com/cssref/pr_border-style.asp

Have a play with this and see how you get on:

http://jsfiddle.net/ChrisStanyon/Ap4B7/
0
 
LVL 1

Author Comment

by:HLRosenberger
ID: 39266596
jagadishdulal

Visual studio tells me box-shadow is not a known CSS property name.  but it seems to work anyway.
0
 
LVL 1

Author Closing Comment

by:HLRosenberger
ID: 39266661
thanks!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now