Re: Is text-shadow supported?
This post has gone unanswered for a while, so I assume the answer is no text shadow.
I think PIE is great. It helped me get rounded corner gradient buttons to be cross browser compatible.
I had the issue with text shadow in IE. Here is the article that helped me overcome it:
http://www.useragentman.com/blog/2011/04/14/css3-text-shadow-can-it-be-done-in-ie-without-javascript/#more-2720.
Here's my CSS:
.main_button {
border: 1px solid #b7b7b7;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 1% 2%;
padding: 0.5em;
float: left;
text-align: center;
color: white;
background-color: #21515d;
width: 27%;
height: 3em;
behavior: url(PIE.htc);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(100%, #707070));
background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
background-image: -ms-linear-gradient(top, #d3d3d3, #707070);
background-image: -o-linear-gradient(top, #d3d3d3, #707070);
-pie-background: linear-gradient(top, #d3d3d3, #707070); }
.main_button:active {
border: 1px solid #a0a0a0;
background-color: #707070;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #707070), color-stop(100%, #d3d3d3));
background-image: -webkit-linear-gradient(top, #707070, #d3d3d3);
background-image: -moz-linear-gradient(top, #707070, #d3d3d3);
background-image: -ms-linear-gradient(top, #707070, #d3d3d3);
background-image: -o-linear-gradient(top, #707070, #d3d3d3);
background-image: linear-gradient(top, #707070, #d3d3d3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#707070, endColorstr=#d3d3d3); }
.main_button a {
color: white;
text-decoration: none; }
.main_button a:active {
outline: none; }
div.button_text {
font-weight: bold;
line-height: 3em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); }
#IEroot div.button_text {
font-weight: normal;
line-height: 3em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
zoom: 1;
background-color: #cccccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(Color='#60000000', OffX=-1, OffY=-1)";
filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(OffX=-1, OffY=-1, Color='#60000000'); }
Here's my HTML:
<body id="home">
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<div class="main_button">
<div class="button_text">
Submit
</div>
</div>
<!--[if IE]>
</div>
<![endif]-->
</body>
Forums
