I have added drop shadows to labels for checkboxs so that when they are checked the drop shadow appears. They work perfectly on chrome however when I tried them on safari on both my mac and iPhone the drop shadows are not appearing. I have tried using the -webkit-filter CSS but this has not had any effect.
I have included both the HTML and CSS below.
<li>
<input type="checkbox" id="dairy" name="lifestyle" value="dairy-">
<label for="dairy">
<img src="https://cdn.shopify.com/s/files/1/0433/2958/5306/files/Cheese_Icon.png?v=1611093331" class="choose--contents--img" alt="">
<p>Dairy</p>
</label>
</li>
label {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #5E7735;
background-color: white;
border-radius: 8px;
width: 117.5px;
height: 140px;
box-sizing: border-box;
cursor: pointer;
}
:checked + label {
filter: drop-shadow(6px 6px 0 #5E7735);
-webkit-filter: drop-shadow(6px 6px 0 #5E7735);
-moz-filter: drop-shadow(6px 6px 0 #5E7735);
-ms-filter: drop-shadow(6px 6px 0 #5E7735);
-o-filter: drop-shadow(6px 6px 0 #5E7735);
transition: filter 0.1s ease-in;
-webkit-transition: filter 0.1s ease-in;
}
They should look like this
But they look like this (the shadow is cut off)
As I was playing with this I think one solution could be to use a box shadow, and apply border-radius that is using vw, for proportionality.
Something like this:
.class {
box-shadow: 6px 6px 0 #5E7735;
border-radius: 5vw; /* Or whatever fits the corners of the image used) */
}
It's a workaround but hopefully it can help someone out there!
Related
I added transitions on the images for the image gallery on this website https://sandbox.graphicandwebdesign.ca/karim-jamous/newsletter/index.html eases in (fades in), but instantly goes back to its original state, when the mouse goes off the image? Any way to have the transition reverse when you take your mouse off?
Add the transition to the non-hovered state:
.gallery img {
box-shadow: 7px 7px 13px 0px rgba(0,0,0,0.75);
filter: grayscale(100%) blur(1px);
transition: 1s;
}
The rationale here is that when you're not hovering over the image the :hover rules no longer apply. So if the transition is declared under :hover it effectively ceases to exist the moment you exit the hover.
here is your solution
.gallery img:hover {
filter: grayscale(0%);
}
/*you need to use transition in image here*/
.gallery img {
box-shadow: 7px 7px 13px 0px rgba(0,0,0,0.75);
filter: grayscale(100%) blur(1px);
transition: 1s;
}
<div class="gallery"> <img src="https://sandbox.graphicandwebdesign.ca/karim-jamous/newsletter/pic4.jpg" width="250" height="250" alt="fourthpicture"> </div>
I've always been using CSS box-shadows since, but now I have an image with rounded corners and wanted to give it a rounded shadow. So I tried using filter: drop-shadow, but unfortunately it looks different from box-shadow. In my opinion, they should look the same, am I doing something wrong?
td {
padding: .5em 3em;
}
.box-shadow img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.drop-shadow img {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}
<table>
<tr>
<th>box shadow</th><th>drop shadow</th>
</tr>
<tr>
<td class="box-shadow">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
</td>
<td class="drop-shadow">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
</td>
</tr>
</table>
Is the appearance of these shadows defined in any spec, or do browsers just what they think they should do? Why do those look different?
Chrome/OS X:
Firefox/OS X:
I believe this is a bug. The W3C specification for CSS filters states that "values are interpreted as for box-shadow [CSS3BG]." Therefore, similar results should be expected from the two properties.
I achieved a similar issue, as seen here:
#box1, #box2 {
position: absolute;
top: 10px;
width: 100px;
height: 100px;
background: red;
}
#box1 { /* Using drop shadow, should appear identical to box shadow */
left: 10px;
filter: drop-shadow(0 5px 10px black)
}
#box2 {
left: 120px;
box-shadow: 0 5px 10px black;
}
<div id="box1"></div>
<div id="box2"></div>
This will display incorrectly in Chrome and Firefox like this:
However, it will display correctly in Safari like this:
If I decrease the shadow blur radius in Chrome by a factor of two, I get the expected result:
I have filed a bug report for Chromium and Firefox.
UPDATE: January 12, 2017
It turns out it wasn't a bug, but an issue with the specification.
For a box shadow the blur value is generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius. - Robert Longson
A specification issue has been raised here.
they are not the same . they achieve different things.
in the case of filter:drop-shadowsome browsers do not support the spread value as the box-shadow does. that's why they look different.
it also doesn't support inset
but as an advantage with filter:drop-shadow you can generate shadow around irregular shapes or images, whereas box-shadows generates a rectangular shadow.
see example below :
.boxShadow,.dropShadow {
width:100px;
height:100px;
background:green;
position:relative;
float:left;margin:20px;
}
.boxShadow {
box-shadow: 0 0 10px black;
}
.dropShadow {
-moz-filter: drop-shadow(0 0 10px black);
-webkit-filter: drop-shadow(0 0 10px black);
-o-filter: drop-shadow(0 0 10px black);
-ms-filter: drop-shadow(0 0 10px black);
filter: drop-shadow(0 0 10px black);
}
.boxShadow:before,.dropShadow:before {
position:absolute;
content:"";
width: 0;
height: 0;
right:0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
<div class="boxShadow">
</div>
<div class="dropShadow">
</div>
as you can see , with drop-shadow the pseudo-element also has a shadow around it, whereas with box-shadow it does not.
see more info here > Comparison drop-shadow vs box-shadow or here > Filter CSS
hope it helps
This most likely explains the rendering differences you are seeing.
The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element.
Also note the browser support of CSS Drop shadow vs Filter.
Can I use box-shadow
Can I use filter
I am trying to do a css blurry glass effect with filters, but it's not working in the way it should.
The div has no opacity at all and it's not blurry.
Code(CSS):
#siteDesc
{
text-align: center;
background-color: #FFFFFF;
width: 1200px;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after
{
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
Edit:
Link to jsfiddle: http://jsfiddle.net/qy1sar8h/
Updated for relevance Sep 2021
There is a backdrop-filter CSS property that can achieve the frosted glass look.
See https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for full details.
It is part of CSS Filter Effects Module Level 2 and the syntax for a blur filter is as follows:
backdrop-filter: blur(10px);
The background of the element will be blurred, but not the content or descendent elements.
To create a frosted glass effect, combine this property with an RGBA background colour that gives the background some transparency, e.g.:
background-colour: Reba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
This feature is available in all major browsers except Firefox (available behind a flag from Firefox 70) and Internet Explorer.
The technique you attempted will blur the full contents of whatever element it is applied to, and not just the background as you intended.
The only technique I know involves faking the blur with positioned background images either using a pre-blurred image or taking advantage of the filter CSS property to blur the original. I don't use this technique because it's too easy for the images to be out of alignment and your trick no longer looks good.
The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.
Applying a filter to the pseudo-element will only blur the content of the pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
background-color: #FFFFFF;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after {
content: 'SOME TEXT';
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
If you apply the blur to the div itself you get this: JSFiddle Demo
EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
width: 90%;
margin: 10px auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
position: relative;
font-weight:bold;
}
#siteDesc:before {
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(1px);
filter: blur(1px);
background-color: rgba(255,255,255,0.7);
z-index:-1;
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
I have this css code for an select tag
.sele {
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
opacity: 0.75;
margin: 0 10px 5px 0;
}
.sele:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
It is working well on Mozilla Firefox but has no effect on chrome or Internet explorer
First of all i would advice you to have a look into this
That's weird... i have tested your code on 5 browsers ( Chrome, Mozilla , Safari , Opera , IE ) and only IE had a problem with the transform which you can solve it by adding the code below:
transform: scale(2,4);
Check the fiddle here
Edit: I don't think you can use this directly on a select option, but you have wrap the select tag within a div and apply that to the div.
Example
Make glowing effect around the text box while placing the cursor inside the textbox.
For example : just place the cursor inside the search textbox in our stackoverflow.com.
Its because of css, but i dont know how to achieve it.. Please help me.
Instead of outlines, the box-shadow property achieves a very smooth, nice effect of any text field:
field {
border-color: #dbdbdb;
}
field:focus { /* When you click on the field... */
border-color: #6EA2DE;
box-shadow: 0px 0px 10px #6EA2DE;
}
Here's a JSFiddle Demo I once made myself showing the above code with a transition fade effect.
While the effect you observe on the stackoverflow search box is probably browser specific (e.g. Google Chrome) there is a way to achieve what you want using the CSS :focus pseudo class:
#foo:focus { border: 2px solid red; }
<input id="foo" type="text"/>
Outline property
http://www.w3schools.com/css/pr_outline.asp
If you want it to appear when clicking on a text box:
input:focus { outline: /* whatever */ }
IE7 doesn't support the :focus selector, but you can use jQuery:
$("input").focus(function () {
$(this).css('outline','yellow solid thin');
});
Obviously outline isn't supported by IE7 and even if it was I doubt it would "glow". You need to do this with a custom background image or something. There's an example of doing that here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html
BTW: You say "border color". A border is not an outline. You can just use:
<input onfocus="this.style.border='2px solid yellow'">
You can do it with the CSS :focus pseudo-class but chances are IE6/7 doesn't support it.
Code-
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
Demo- http://www.labshab.com/submit-guest-posts/
If you're using bootstrap you can use
class="form-control"