Whats the best way you would suggest getting a glowing effect around a div of text? Can it be done through CSS?
I tried playing around with the box-shadow but couldn't quite get it how I wanted it.
You're looking for text-shadow - see http://caniuse.com/#feat=css-textshadow for info on what browsers support it, and the "Resources" tab there for links about how to use it
I think you want something like this:
-webkit-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
-moz-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
Just play around with the controls at http://www.cssmatic.com/box-shadow until you get what you want.
div {
-webkit-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
-moz-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
}
<div><p>Text</p></div>
Related
I cannot for the life of me figure out how to do this: subscription box.
Should be trivial for experienced devs... problem is the gradient bleeds onto the white of the box, and doesn't end vertically, like so.
It's a simple box underneath the email form, with a gradient applied, and then blur (a lot of it). Ideally, the gradient rectangle's positioning should be anchored to the box.
Example of the code for the box and the gradient can be found here
pastebin^
Maybe this one helps you
box-shadow: 0px 30px 10px 0px #EBEBEB ;
Also, you can see more here
although the below answer is correct! You might only want one side to have the inner shadow as well as use the inset keyword to have the shadow inside the element
.oneside{
-moz-box-shadow: inset 0 6px 6px -6px black;
-webkit-box-shadow: inset 0 6px 6px -6px black;
box-shadow: inset 0 6px 6px -6px black;
border-radius: 4px;
}
.allaround{
-webkit-box-shadow: inset 0 0 5px #000000 ;
-moz-box-shadow: inset 0 0 5px #000000 ;
box-shadow: inset 0 0 5px #000000 ;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body>
<input class="oneside">
one side
</input>
</br>
<input class="allaround">
all around
</input>
</body>
</html>
I have a weird issue when using box-shadow to apply a padding to the left and right side of a span which has its contents wrapping inside a container:
box-shadow:9px 0px 0px red, -9px 0px 0px red;
It applies the left shadow only to the first line, and the right shadow only to the last line.
http://jsfiddle.net/3zeL5ux8/2/ is a testcase that works as expected in Chrome and various IE versions (see http://imgur.com/XhX1kco for a perfect rendering), why does Firefox mess it up?
you can try:
-moz-box-shadow:9px 0px 0px red, -9px 0px 0px red;
let me know the output. Can't debug right now.
Cheers
You have to use all different box shadow property for all broweser, try following code :-
-moz-box-shadow: 9px 0px 0px red, -9px 0px 0px red;
-webkit-box-shadow: 9px 0px 0px red, -9px 0px 0px red;
box-shadow: 9px 0px 0px red, -9px 0px 0px red;
The answer is a property called box-decoration-break: clone;. This brings Firefox up to speed with IE and Chrome...
Right now I am using an anchor tag to generate a question mark for the help icon. Looks like this
But I want the question mark to look like this:
I'm not exactly sure how I can style it with CSS to look like the 2nd one. How do you create a background that's 1) a circle and 2) has a gradient?
You can do it with css like this.
a {
color:#fff;
background-color:#feb22a;
width:12px;
height:12px;
display:inline-block;
border-radius:100%;
font-size:10px;
text-align:center;
text-decoration:none;
-webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}
?
But Quentin are right that is a graphic problem not a programmer
This question already has an answer here:
Box-Shadow Only on Left and Right
(1 answer)
Closed 8 years ago.
This is css code
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !
You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).
To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).
Here's the quick answer:
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
Updated fiddle
What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).
Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.
To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.
Hi Zey this is the code paste in your css and you will get what you want.
This is CSS
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is HTML
<div class="one-edge-shadow"></div>
and check it out in fiddle http://jsfiddle.net/MfV2Y/
Try this:
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
Do you have any ideas how to improve shadow rendering performance?
whenever, I apply
-webkit-box-shadow:
-moz-box-shadow:
box-shadow:
The browser resource usage dramatically increases.
I draw div shadow working with transform().
From my testing, Chrome performs fastest compared to Firefox and Safari. For IE and the rest browsers, I have not tested yet.
Try this
-webkit-box-shadow: 10px 10px 5px #888 !important;
-moz-box-shadow: 10px 10px 5px #888 !important;
box-shadow: 10px 10px 5px #888 !important;