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>
Related
I'm trying to give my headings a nice embossed look. It works great in Chrome, but Firefox bows out. How can I make this effect work in both? Here's the fiddle:
https://jsfiddle.net/7p15s3nv/
And my CSS:
h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
Thanks for any help.
maybe without background-clip, but a more 'classical' approach ?
h1:first-of-type {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
h1+h1 {
color: rgba(255,255,255,0.4);
text-shadow: 0 -2px rgba(0,0,0,0.6);
}
<h1>Hello there! webkit</h1>
<h1>Hello there! FF ?</h1>
fiddle to play with https://jsfiddle.net/7p15s3nv/5/
to test side by side in chrome and any other browser such as IE or FF
Is this the desired output?
h1{
font-size: 100px;
color: rgba(255,255,255,0.4);
text-shadow: 1px 2px 3px #eee, 0 0 0 #000, 1px 2px 3px #eee;
}
<h1>This is text</h1>
UPDATE
This update is to cover the last comment from question author:
h1 {
margin-top: 0;
font-size: 200px;
color: rgba(255,0,0,0.8);
text-shadow: 1px 2px 0 #EEE, 0 0 0 #000, 1px 2px 0 #EEE;
}
<h1>This is text</h1>
While background-clip is a valid CSS3 property, the text value in non-standard. That's why it does not work in most browsers.
A trick that might work for you is a combination of semi-transparent text (with rgba) and text-shadow like this:
h1 {
color: rgba(0,0,0, 0.6);
/* #FFF should be the same as background color of the text */
text-shadow: 3px 3px 6px #fff, 0 0 0 #666, 3px 3px 6px #fff;
}
<h1>TEXT</h1>
I think that the only solution is to duplicate the text in a pseudo.
Not very easy to maintain, but it can work
In case you go with this solution, to make it easier to maintain would be to set the text in an attr in the element, and use this attr for the content of the pseudo
.demo {
font-size: 200px;
color: darkgreen;
position: relative;
}
.demo:after {
content: "Hello";
position: absolute;
left: 0px;
top: 0px;
color: transparent;
text-shadow: 0px 20px 30px rgba(255, 255, 255, 0.91);
}
<div class="demo">Hello</div>
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 just modified some td's in a table because I am using a split colored backgrounds and my problem is that when I use a half white and half brown background, the text is not visible unless I set a text-shadow
This is how it looks when printed out on Safari. As you can see the text has a border shadow. This is all set in my code bellow.
border-radius: 5px;
border:1px;
border-color:#000;
-webkit-text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-webkit-print-color-adjust: exact;
font-family: Arial, Helvetica, sans-serif;
font-size:40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #000;
width: 80px;
height: 80px;
vertical-align: -52px;
font-weight: bold;
-webkit-print-color-adjust: exact;
}
When I try and print it out on Chrome, All Works the same a safari apart from the text shadow. Should be read mlk.
Has anyone been faced to this problem before?
Try something like this #media Print text-shadow under Chrome. see snippet below.
.shadow {
border-radius: 5px;
border: 1px;
border-color: #000;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
text-align: center;
border-style: solid;
padding: 0px;
color: #fff;
width: 80px;
height: 80px;
vertical-align: -22px;
font-weight: bold;
background: linear-gradient(to right, #ffffff 0%,#ffffff 48%,#752201 52%,#752201 100%);
}
/*
this is the part you are interested in
*/
#media print {
#media print and (-webkit-min-device-pixel-ratio: 0) {
.shadow {
-webkit-filter: drop-shadow(-1px 0 black) drop-shadow(0 1px black) drop-shadow(1px 0 black) drop-shadow(0 -1px black);
}
}
/*
additional print specific css styling can go here
*/
}
<div class='shadow'>mlk</div>
Is there any way to add a glow around the div? Look at twitter login and how there is a blue glow around the input box, can that be done for the div?
CSS3 can do that
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Working JSFiddle.
Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
As shown before, use css: focus, border and box-shadow.
If using IE, make sure <doctype> is specified.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
jsFiddle example.
Also you will face some problem with Internet Explorer while dealing this issue. IE-9 How ever supports box-shadow but the previous versions don't, Check it out here for making it work in all versions of IE
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).