I ran across something peculiar today regarding inset box-shadows and https vs http.
Using Chrome (Version 37.0.2062.120 m), if I do an inset box-shadow on an img, it works just fine so long as that img's URL is http (example: http://somebodyelseswebsite.com/myimage.png). If that image is using https (example: https://thisotherguyswebsite.com/hisimage.png), the inset drop-shadow will not show up.
Is it a security issue or perhaps a bug/oversight by Google? Anyone have any thoughts?
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://kfscdn.api.np.km.playstation.net/64924751177e14943eec338b1f02cb08a838321c2ed38d0dc546622311399dc5/48b8a11c7d5f31a1efd874e197d0e1b9/1410306322100.png"></img>
<br>
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>
http://jsfiddle.net/9TMdc/4/
Http or Https is not the problem, see this:
http://jsfiddle.net/carloscalla/9TMdc/6/
I am calling it the two ways:
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="http://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>
<img style="width:150px; box-shadow:inset 0 0 0 5px #000" src="https://static-resource.np.community.playstation.net/avatar/default/DefaultAvatar.png"></img>
Http and Https the same image and I see the box-shadow. The problem is that the first image have white background and the second image has background transparent. So you see the box-shadow in the second image but not in the first one because of the white background.
See that the first image I called it the two ways Http and Https, in the first one with box-shadow: inset and the second one not inset and it worked fine. You just dont see the inset shadow because of the white background of the image.
UPDATE
http://jsfiddle.net/carloscalla/9TMdc/9/
I set a background-color in a div containing your images so you can see the background of your images. The first one has a background color white and the second one is transparent. Remember that in PNG images you can have transparent background colors while in JPEG images you can't.
UPDATE
http://jsfiddle.net/carloscalla/9TMdc/10/
I included a workaround to set the box-shadow: inset in your image with background color different than transparent. I wrapped it in a div and set the z-index: -1 to your image so the div comes in front. Notice that position: relative is important because z-index property only applies to positioned elements, that means relative, absolute and fixed. Does not apply to static elements (which comes by default).
Related
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
I have a very basic static HTML web page with borders and box shadow on a containing element.
The box shadow displays correctly on desktop browsers but on the Chrome mobile browser (only tested on Chrome) the box shadow on the bottom edge of the element is much larger than it should be.
There are also inconsistencies in how it displays. Sometimes when I first load the page I don't see the box-shadow and then it will suddenly appear.
I've checked for errors in the HTML and CSS but can't find anything wrong.
This is the code I'm using for the box shadow:
-webkit-box-shadow: 0 1px 5px rgba(255,255,0,0.5);
-moz-box-shadow: 0 1px 5px rgba(255,255,0,0.5);
box-shadow: 0 1px 5px rgba(255,255,0,0.5);
I've recreated the page on Codepen:
https://s.codepen.io/sean-collins/debug/GRKvBeP/YvkgOeODyLNk
I've changed the colors of the borders and color and size of the box-shadow to make it easier to see them but otherwise everything is the same as on the actual page.
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'm trying to find a reasonable CSS style for highlighting a particular table row (i.e. on a click selection) that doesn't involve changing the background color, because the row colors already serve a purpose in my application.
This probably means making the border stand out or doing something to the background that doesn't change its color. I've tried the following
border: 2px ... with margin: -2px or something like that. However, it doesn't display too well, especially when the table is scrolling, and doesn't offer a good highlight without a super thick border. Browser support of borders on <tr> elements also isn't great.
outline: 3px ... only seems to display on the top and bottom when the div containing the table is scrollable.
box-shadow: 5px 5px ... color inset doesn't seem to display properly without messing up the table.
Does anyone have any good CSS suggestions for how to achieve this?
It turns out that you can do this using css selectors on the <td> elements, being careful with the two ends. For example, I created the following stylus code, which could be turned into a mixin. The trick is to use a negative spread value to get rid of the borders that would show up on any side you don't want, while using the blur and horizontal/vertical values to get the nice effect on the sides you do want. The blur must be at most half the spread.
shadow-color = rgba(0,0,0,0.5)
shadow = 15px
-shadow = - shadow
blur = 5px
spread = -10px
tr.selected > td
box-shadow:
0 shadow blur spread shadow-color inset,
0 -shadow blur spread shadow-color inset
// Since we have to, make the top left and bottom right corners the dark overlapping ones
tr.selected > td:first-child
box-shadow:
shadow -shadow blur spread shadow-color inset,
0 shadow blur spread shadow-color inset
tr.selected > td:last-child
box-shadow:
0 -shadow blur spread shadow-color inset,
-shadow shadow blur spread shadow-color inset
This creates a shadow border like the following, allowing any background color to still show up:
However, it's not possible to do this with normal (non-inset) box-shadows because they will show up in between the table cells.
Change the HTML to:
<td style="padding:20px;">
<div class="tdContentWrapper">
<div>SomeStuff</div>
<div>SomeMoreStuff</div>
</div>
</td>
Change the CSS to:
#MyTable .tdContentWrapper:hover{
background: black;
}
How about increasing the padding and/or line-height with a subtle increase in font-size?
The row gets highlighted explicitly enough without affecting the visual styling of its corresponding peers; I might even tweak the color, if it's possible, depending on the alternating backgrounds.
I'm using box shadow CSS feature on images in my gallery, but somehow the inset parameter is not working. I tried z-index and I tried to put in different places code and it's still not working.
Visit the website here.
Code
box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;
It has nothing to do with your syntax. It's just a peculiarity of an img element, not the box-shadow property.
Consider looking at this example: http://jsfiddle.net/YhePf/ - if you disable showing images in your browser - you will see that instead of an image there will be a green block with the box-shadow applied to it.
Edit: In other words, the inset box-shadow property is applied but it cannot be seen because it's under the image itself (just like the background-color property). I may prove that with another fiddle. It's different from my previous one in the padding property. See here: http://jsfiddle.net/YhePf/6/ - see the red 2px shadow and the green background
I think you might just be missing the spread radius value from the first shadow. :)
i think there is a issue because inset box-shadow cant be applied on a image.the effect which you require can be easily achieved with help of border property. if you want to use inset box shadow apply it on div.
for more detail chk it out http://jordandobson.com/_expirements/css/vignette/