I'm playing at CodePen and trying to make a cinematic CSS3 lens flare like in multimillion blockbusters. I tried to make it through the box-shadows but I'm unable to make them with needed shape, this is totally wrong. I can't use canvas or JS at all, so the point is to make it only with css, if it's possible. The result effect I want to get is something like this:
http://codepen.io/byob/pen/azzbjB This is that pen
#-webkit-keyframes blink {
0% { box-shadow: none; }
100% {
box-shadow: inset 10px 0px 50px 0px rgba(255, 0, 0, 0.5),
inset -10px 0px 50px 0px rgba(255, 0, 0, 0.5),
1px 1px 500px 30px rgba(255, 0, 0, 0.5),
50px 0px 0px 0px rgba(255, 0, 0, 0.5),
-20px 0px 0px 0px rgba(255, 0, 0, 0.5);
}
}
The one i want to do, is way more complex, so, guess i need help or the fact that it is impossible w/o js.
Related
I am trying to recreate the image below that gives the button a "opaque" or blurred transparency look. I have tried googling for an opaque background but did not find much. How can I recreate this look?
The effect is called, I believe, glassmorphism. It is generally achieved using backdrop-filter. You can find a generator for this effect at https://css.glass/. Here's some example CSS it kicked out that seems like it approaching the style in your image:
.your-class-here {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
Obviously there's some extra properties in there you might not need, but you can strip out what you do.
I have a form with orange background and a shadow:
and I'm trying to make the shadow with css.
the best result I got is here: https://jsfiddle.net/2f903rcr/
box-shadow: 0px 1px 2px 0px #505857, 0px 0px 7px 0px #505857;
Somebody know to do the same shadow in css?
I can't see your code and can't understand your image but there is something for you:
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, .3);
https://jsfiddle.net/2f903rcr/3/
I am trying to add a box shadow to my div but i only want the shadow to appear on the left, right and bottom of the div, does anyone know or can show me how i might remove only the top shadow from my div?
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
The basic Box-shadow values are:
box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]
So for example:
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
would just be a shadow with no offset
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
would be a shadow with 5px vertical offset, effectively pushing the shadow down, like so:
http://jsfiddle.net/TLQs9/
Rather than add an extra div to your markup, you can use :before to cover up the box-shadow with absolute positioning and negative margin.
div {
position: relative;
background-color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}
p {
padding: 20px;
}
div:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
<div><p>Some container with shadow</p></div>
As of November 2022 there's a nice, clean way to do this using the CSS clip-path property.
div {
box-shadow: 0 0 10px black;
clip-path: inset(0px -10px -10px -10px);
}
Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we're clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.
It's the clean, ideal solution to the problem in my opinion. Browser support is good, but if you want support in IE11 still you'll want to explore the polygon option instead of inset.
You can try this:
div {
-moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
The first value is horizontal position.
Second value is Vertical position.
Third value applies blur in shadow.
Four value spread.
So try that your vertical an horizontal position match with blur and spread
Try this:
div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}
When I use this I have a shadow on all sides except the top. You can change the values and it still works. Just don't add a fourth value and you'll be fine.
Try This :
div
{
box-shadow: 0px 9px 29px rgb(102, 102, 102);
-webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
-moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
}
See in jsfiddle
See More 1
See More 2
None of the answers above worked for me. So as an alternative solution I used a patch. Inside the element/div with the box shadow.
Place a second div, width 100% and its background the same color as the main div, then position it to cover over the box-shadow, like so.
background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0;
top -10px;
You may need to tweek the height to patch over the box shadow. But it does work.
plus this trick could be used for any side.
CSS border radius works fine, but it's now revealing a white background. (I'd prefer transparent or grey, similar to body background...)
CSS:
.window_header{
width:600px;
height:42px;
background: #333 url("../img/bg-2.png") repeat;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-bottom:1px dotted #666;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3),inset 0 -4px 5px rgba(0, 0, 0, 0.2),inset 1px 0px 1px rgba(0, 0, 0, 0.7),inset -1px 0px 1px rgba(0, 0, 0, 0.7),inset 0 -2px 1px rgba(0, 0, 0, 0.5),inset 0 2px 6px rgba(255, 255, 255, 0.15),inset -2px 0 6px rgba(255, 255, 255, 0.15),inset 2px 0 6px rgba(255, 255, 255, 0.15);
}
The white should be from the background of the container "behind" the one you applied border-radius to.
Maybe try to apply border-radius to it as well.
I would recommend either applying Border Radius to the underlying Element so instead of having rough white edges, the element would have rounded corners. So you wouldn't see the white edges.
-or-
Place the whole element edit before the containing element so it sits on top of the white background and go from there.
Perhaps the bg-2 file isn't transparent in that area? Depending on the editor that you used to create the image, it may not have had the ability to make it transparent.
Max Gherkins's explanation is also a very big possibility. :)
background: #333 url("../img/bg-2.png") repeat;
Your background image is not transparent. If it is a "flattened PNG", make sure the background is "transparent" and not "white".
I got a requirement for text that looks like this:
Top shadow: 2px, #000, 75%
What does that mean? Is that just a text-shadow? What's the 75% mean?
Top Shadow, as described in this post, uses CSS3's box-shadow and the :before pseudo selector to add a shadow under the browsers bar by targeting the body element.
There is no top-shadow property in CSS, regarding the Top shadow: 2px, #000, 75% bit. There is however text-shadow & box-shadow.
It is not valid text-shadow.
May be you need such example (with correct syntax):
text-shadow: 0 0 2px rgba(0, 0, 0, .75);
or
text-shadow: 0 2px 2px rgba(0, 0, 0, .75); /* down shadow */
Notes:
rgba(0, 0, 0, .75) = #000 with 75% opacity
Updates: #Xander found technique which you are asked us about. In it box-shadow with css generated content are using:
body:before {
content: '';
position: fixed;
top: -1px;
left: 0;
width: 100%;
height: 1px
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
z-index: 100;
}