My goal is to make the icon glow, but if apply shadow it comes with a ugly rounded div.
React code :
<SunIcon
className="h-10 w-10 rounded-3xl mr-2.5 text-suncolor shadow-sunshadow"
/>
The sunshadow is 0 0 20px 7px rgb(255 204 51 / 66%)
Output i get: I get that outline
I also tried using outline none, but doesn't work
I'm taking a guess that the icon library you're using is rendering SVG elements. Using box-shadow on an SVG results in the effect in the image you posted.
SVG can display shadows, which you can read about here, but when using a preexisting library, modifying them can be difficult.
For a CSS-driven shadow, you could use drop-shadow in a filter, however I have always found the effect to be too faded:
filter: drop-shadow( 0 0 5px rgba(255, 204, 51, .66));
Be aware that drop-shadow has limited browser compatibility.
Elements are always Squares and rectangles (or with a radius, even a circle) but never custom shapes
Try it with a ::before pseudo element
.iconClassName::before, .iconClassName::before:hover, .iconClassName::before:active { content:""; box-shadow: 0 0 20px 7px rgb(255 204 51 / 66%)}
Maybe you have to edit width/height, position...
Try to remove your Border-Radius, but without minimal example code it is hard to try
Related
I'm working on some button styles on codepen and am using double box-shadow to produce this effect for use as a :focus state.
box-shadow: 0 0 0 3px currentColor, 0 0 0 5px var(--background);
Is there a way to produce box-shadow like this without knowledge of the background color? Like to somehow inset the box-shadow? I'd like to produce this effect without needing to know the background color.
You could increase the padding, then have an inset border by a certain amount. The inset border (really the outline) would be the white, while the outer orange would be part of the original background.
Box-shadow renders incorrectly in firefox (was observed on v49).
Css:
.block {
width: 90px;
height: 90px;
box-shadow: 0 0 0 1px #0084A3;
border-radius: 100%;
}
It renders asymmetrically and depend on window height.
Here's the fiddle. Try to resize the window vertically and see what is happening to box-shadow. It's easy to achieve something like this:
invalid box-shadow rendering. You can see that top shadow is much wider than bottom one.
Chrome and Safari handles it well.
I would appreciate any helpful ideas.
Please use box-shadow: inset 0 0 0 1px #0084A3; it gives same output in both firefox and chrome browsers.
Try this -moz-box-shadow: 0 0 0 1px #0084A3; for Firefox;
San is right but Just for more detail..
There is 2 type of shadow
1. Inner ( inset )
2. Outer ( default )
so in css3, by default it is taking outer shadow if you are not specified inset property.
inset
If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
check this link for more detail
I read this article http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/ many times. But I can't find the correct way to convert drop shadow of PSD to box shadow of CSS3 in this case:
Stroke: #E4E4E4; opacity 75%
Inner glow: #FFFFFF 50%; opacity 75%
Drop shadow: Angle=90 degrees; distance=1px; spread=5%; size=9px
border: 1px solid rgba(228,228,228,0.75);
box-shadow: inset 0 0 0 9px rgba(255,255,255,0.75), 0 1px 9px 0 rgba(0,0,0,.5);
I had to guess here a bit as there’s missing information. The rgba(r,g,b,a) colour syntax takes a value of 0–255 for each of the colour components and a 0–1 value for the opacity of the colour. So the border rule is equivalent to Photoshop stroke.
There’s no direct equivalent of an inner glow but you can do an inset box shadow which can simulate it. You specify multiple shadows with a comma on the same rule, so the first one can be the inset shadow. This is specified with an inset keyword to start with, then the x and y offset (none in this case), then a blur radius, then a spread distance, then finally the colour of the shadow. Play with the values; I guessed at 9px for the spread and 0 for the rest.
Finally, we specify a box shadow for the outside. The same rules apply as to the inset shadow (again with my guessing to the values). Have a play around!
There is a cloud based Photoshop extension that you can download and install in photo shop here: http://css3ps.com/. Then select a layer or layers which contain the drop shadow and click a button in toolbox then it will give you the css3 you need that matches the box shadow in the PSD. They have done the calculations for you.
I use it all the time for this question its great.
Right now, our mockups / live demo use images to achieve this effect (including button text). This is less than desirable for all of the standard reasons. I can get everything working except that pesky outer border. I'd really like to not add markup to my document just to have that.
I've got my test code on jsfiddle, although it doesn't work as well there as it does on my local machine: http://jsfiddle.net/Axtjm/
tldr: how to add inset border like that and keep rounded corners without extra markup.
As unintuitive as this sounds, don't use outline for outlines. Use box-shadow with a 1px spread:
box-shadow: 0px 0px 1px 1px #049ED9;
Demo: http://jsfiddle.net/Axtjm/4/
The easiest option is to add the extra container element and give each a border.
But the challenge is to do it without the border. Some ideas:
use a border and then a very thin box-shadow.
use the border style attribute AND the outline style attribute
(both dependent on the browser supporting them)
Quick JSBIN demo: http://jsbin.com/irabul
it is using border-radius property of CSS3
and simple CSS border techniques,
some of the border property,
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
inherit Specifies that the border style should be inherited from the parent element
and here is the border-radius in detail,
http://www.css3.info/preview/rounded-border/
Use an inset box-shadow. If you're already using a box-shadow on your buttons, remember that you can stack box-shadows by using commas to separate each.
button {
border: 1px solid #369;
box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}
The above is just an example; replace the values with your own if necessary. If you want a bolder inset shadow, you can also stack two insets of the same value to achieve that.
Live example: http://jsfiddle.net/Axtjm/5/
I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge.
Here is my CSS for the box:
#past{
position:absolute;
left:0;
top:363px;
background-color: rgba(34,34,34,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
/* For IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
z-index:10;
padding:10px;
}
I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image.
Also I would prefer if at all possible for this to work in all browsers.
Thanks for the help. =>
Another option is to use one of my personal favorite CSS tools: box-shadow.
A box shadow is really a drop-shadow on the node. It looks like this:
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
The arguments are:
1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect. 0 means no blur.
color: The color of the shadow.
So, you could leave your current design, and add a box-shadow like:
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a 'blurry' top-edge.
This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/
It depends on what type of fading you are looking for.
But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.
http://jsfiddle.net/tLu7u/
also.. http://css3pie.com/
You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one
Like that: CSS3 Transparency + Gradient
Gradient should be more transparent on top or on top right corner (depending on capabilities)