I'm using this css code
.result{
background-color: #aaa;
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 22px;
text-shadow: 0px 0px 4px 3px #000;
}
But the text shadow is not working the Inspector show that the value property is not valid,Do I missed something?
text-shadow shorthand only has 4 properties: X offset, Y offset, blur & Color.
text-shadow: 2px 2px 4px #333;
This is different from box-shadow which has: X offset, Y offset, spread, blur & color.
box-shadow: 2px 2px 0px 4px #333;
(would look the same as above)
text-shadow can only take 3 values except color. Should be like this:
text-shadow: 0px 0px 4px #000;
CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
change to text-shadow: 0px 0px 4px #000;
Related
How can I create inset shadow on text? Here is what I am trying to achieve
I am creating this in Figma, on text I have added both drop shadow and text shadow. It seems that Figma only shows source code for drop shadow. Can I achieve inner shadow as well? Values in Figma are these:
x:0
y:4
blur:4
spread:0
color: #000
percentage:25%
h1 {
font-size: 6rem;
margin-bottom: 1rem;
text-shadow: -1px -1px 7px rgba(0,0,0,.2), -1px -1px 2px rgba(255,255,255,.6);
color: #C92929;
text-align: center;
}
<h1>Lorem ipsum</h1>
In CSS you can experiment with transparency of text color and its shadow.
For example:
h1 {
color: rgba(201, 41, 41, 0.8);
text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
font-size: 6rem;
margin-bottom: 1rem;
text-align: center;
}
<h1>Lorem ipsum</h1>
I think, the main problem is calculate that values of colors, to receive advisable effect.
We make a blurred white text-shadow, and a black text-shadow, while making the color of the text transparent. This can give the illusion that the text-shadow is inset... There is no such property, though.
h1 {
color: transparent;
text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
font-size: 6rem;
margin-bottom: 1rem;
text-align: center;
}
<h1>Lorem ipsum</h1>
You can try with transparency as subject here and the code below:
I know result is not the one you expect, because I did not change your shadow. But this the way I use transparantrency that is important.
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0px 0px 7px rgba(0,0,0,.2), 0px 0px 2px rgba(255,255,255,.2);
text-align: center;
background: white;
}
span{
background: #C92929;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:block;
}
<h1><span>Lorem Ipsum</span></h1>
I'm trying to set a fill color of #333 for the arrow on webshim's HTML5 form validation bubble, but I can't seem to identify the correct class.
My CSS so far:
.ws-po-box {
padding: 10px;
/* border: 1px solid red; */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #333;
-webkit-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #fff;
letter-spacing: 0.1pt;
}
.ws-po-arrow {
/* border-bottom: .61538em solid red; */
}
Fiddle: http://jsfiddle.net/zhwdbhdd/.
Any help would be appreciated!
Looks like arrow CSS is contained in ws-po-arrowbox class.
<div class="ws-po-arrow">
<div class="ws-po-arrowbox"></div>
</div>
Arrows color is not a background-color, but a border color, since the arrow is made with borders. So add this CSS
.ws-po-arrowbox{
border-bottom-color:red!important;
}
I updated your fiddle to demonstrate:
http://jsfiddle.net/zhwdbhdd/1/
I have the following box shadow css on my site. It looks great in Chrome, but Firefox and IE do not recreate the effect I'm looking for. I want a white solid shadow only on the bottom of a box. How do I make this work for all browsers?
box-shadow: 0px 10px -14px 14px #FFF;
-webkit-box-shadow: 0px 10px -14px 14px #FFF;
-moz-box-shadow: 0px 10px -14px 14px rgb(255, 255, 255);
Use this article or this code:
-moz-box-shadow: 13px 13px 0px 0px #FFFFFF;
-webkit-box-shadow: 13px 13px 0px 0px #FFFFFF;
box-shadow: 13px 13px 0px 0px #FFFFFF;
I've got it working in IE9 and FF by simply removing the vendor prefix lines. All you should need is:
box-shadow: 0px 10px -14px 14px #FFF;
You have a negative value for the shadow size:
box-shadow: 0px 10px -14px 14px #FFF;
A negative 14px shadow would be nothing, as it would be less than it having a size of 0. If you're looking for an inset shadow, simply add that to the style:
box-shadow: inset...
Solution, change -14px to 14px.
I have this button that appears fine on desktop and mobile, but when viewed on an android tablet there is this white background around the corners where the transparency for the button would be. Has anyone encountered this?
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
padding: 10px 20px;
background: none;
background: -moz-linear-gradient(top,#41f0ed 0%,#278a88);
background: -webkit-gradient(linear, left top, left bottom, from(#41f0ed), to(#278a88));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 0px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
have you tried
background:none;
to
background: transparent;
Try removing box-shadow or gradient. I imagine one of them is the culprit. If it is, you can do a conditional check for and Android tablet, and exclude that from your CSS.
var userAgent = window.navigator.userAgent.toLowerCase();
if ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) {
//it's an android tablet, remove box-shadow
};
I'm trying to replicate a button style in a Photoshop mock-up that has two shadows on it. The first shadow is an inner lighter box shadow (2px), and the second is a drop shadow outside the button (5px) itself.
In Photoshop this is easy - Inner Shadow and Drop Shadow. In CSS I can apparently have one or the other, but not both at the same time.
If you try the code below in a browser, you'll see that the box-shadow overrides the inset box-shadow.
Here's the inset box shadow:
box-shadow: inset 0 2px 0px #dcffa6;
And this is what I would like for the drop shadow on the button:
box-shadow: 0 2px 5px #000;
For context, here's my full button code (with gradients and all):
button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}
You can comma-separate shadows:
box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;
Box shadows can use commas to have multiple effects, just like with background images (in CSS3).