Forums
View unanswered posts | View active topics It is currently Thu Oct 23, 2014 7:04 am



Reply to topic  [ 3 posts ] 
 Is text-shadow supported? 
Author Message

Joined: Mon Sep 10, 2012 4:19 pm
Posts: 1
Post Is text-shadow supported?
Hello all

I just found this great magic ;)
I want to ask if it supports text-shadow.

Thank you.


Mon Sep 10, 2012 4:20 pm
Profile

Joined: Tue Nov 13, 2012 8:39 am
Posts: 2
Post 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>


Tue Nov 13, 2012 8:51 am
Profile

Joined: Sat May 21, 2011 7:50 am
Posts: 6
Post Re: Is text-shadow supported?
@amnotafraid

thx it works in ie8.. but the fonts are missing rendering/anti-alias.. doesn't look smooth any more..

in ie9 i get a black background. i remove it.. but still get it.. need transparent...

when will css3pie get this function?


edit:
this is the only one that works(searching for about 13days for it)
http://www.hintzmann.dk/testcenter/js/j ... extshadow/

gr.


Thu Dec 13, 2012 4:51 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.