i have a school project where i need to replicate a website.
i want to add the shadow effect under text in a stretched oval way but i cant figure out how to do this prefectly, i just end up with a blurry rectangle.
this is what i have at the momentClick here
and this is what it is supposed to look like Click here
This is the code that i have (that creates the blurry rectangle
box-shadow: 0 50px 20px -8px #000000;
can anyone help me on how to make the shadow that i have now into the shadow that it is supposed to be? (2nd picture)
Thanks in advance,
I would use a pseudo-element, translate and rotate it through transform, and add a filter: blur to it. Do note eventual compatibility issues.
button {
position: relative;
margin: 2rem;
}
button::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: translate(0, 200%) rotateX(70deg);
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
filter: blur(3px);
}
<button>Click me</button>
Related
I applied a drop shadow filter to a image and now the image is offset by about 10 pixels.
Is there a way to keep the filter from adjusting the position of the image?
#Image_3 {
opacity: 1;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 1));
position: absolute;
width: 36px;
height: 36px;
left: 20px;
top: 20px;
overflow: visible;
outline: 1px dashed #000000;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<img src="data:image/png;charset=utf-8;base64,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") 0 0 no-repeat" id="Image_3">
Update:
It was an issue on my end. The image already had a drop shadow. The filter did not adjust the position of the image. I changed the title of the question slightly.
it's unlikely that your filter is moving your image, just taking up additional space with the drop shadow. you can either add additional padding/margin on the right and bottom sides of your image to account for the drop shadow, or offset the image top/left position to counterbalance the shadow
try
#Image_1 {
/* other styles */
margin-right:10px;
margin-bottom:10px;
}
or
#Image_1 {
/* other styles */
transform: translate(-5px, -5px);
}
I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.
I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.
Does anyone have any solutions?
Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?
.box {
height: 100px;
width: 100px;
background: blue;
position: relative;
box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}
.box:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
<div class='box'>
</div>
</div>
What you're looking for is filter!
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
Maps the shadow around the visible parts of the element, instead of its box.
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.
The steps you need to do:
Add a :before pseudo element which the same size of :after element
Slightly move :before element downward
Add the filter with blur aspect
Then it will alike the shadow ;)
For your quick editing, you can add this CSS into your file:
.box:before {
content: '';
position: absolute;
top: 105%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid rgba(0, 0, 0, 0.5);
filter: blur(2px);
}
And then change the box-shadow of the original box:
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);
Cheer ;)
Alright, I cant think of a way to do this but on My Blogger behind the post is a brownish tan background and I cant change the opacity, I can make it a solid color but not change the opacity. I as wondering if there is a CSS workaround for that. or any other workaround to make the opacity less see through so the text does not clash so hard with the dark liquid in the wine glass.
Any help is awesome, thanks
Maxthespy
What you're looking for is opacity: 0.5;. Note that you'll also need filter: alpha(opacity=50); in order to deal with those pesky early IE versions ;)
EDIT:
Changing the opacity will change the entire opacity of the div, including its text contents. In order to use both a transparent background-url and have solid text, you'll need a bit of a hack CSS to actually use the background image in the :after of post-outer, and set it to appear in the same spot in the background:
.post-outer {
display: block;
position: relative;
padding: 15px 20px;
margin: 0 0 25px;
border: dotted 1px #ccb299;
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-outer::after {
content: "";
background: url(https://resources.blogblog.com/blogblog/data/1kt/watermark/post_background_birds.png);
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Hope this helps!
Replace this line for .post-outer
background: rgba(0, 0, 0, 0) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/post_background_birds.png) repeat scroll top left`
With an rgba background color, where the first 3 values are the RGB value for whatever color you want to use, and the last value is the opacity value. This is "white" (255,255,255) with 90% opacity.
background: rgba(255,255,255,0.9);
Found an interesting way to make centered popup window ( http://www.w3.org/Style/Examples/007/center ) in application.
Simple and good looking in code ( http://jsfiddle.net/babaca/6rwL0v0c/22/ ).
html
<div class="__holder">
<div class="__box">
<h2>Some header</h2>
Some bunch of content etc
</div>
</div>
css
.__holder {
position: fixed;
z-index: 15000;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
.__box {
position: absolute;
z-index: 16000;
top: 50%;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: -50%;
padding: 0;
transform: translate(-50%, -50%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
-webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
padding: 29px;
}
The only problem with render: depending on zoom level of the browser window, there is or horizontal or vertical sides are not sharp, smoothed/blured between 2 pixels... (chrome Version 39.0.2171.95 m
, firefox 34.0.5 ) Here is an example(with smoothed left and right sides of the window):
As I figured out it is responsibility of the transform: translate(-50%, -50%) line.
Anyone have met the same problem? Any solutions?
Well, this is indeed a nice solution as it doesn't require you to know the width and height of positioning container. If you knew them you could just replace transform with apropriate negative margins:
margin-left: -90px; // half of the popup width
margin-top: -45px; // half of the popup height
Here's the fiddle, see if those issues still appear: http://jsfiddle.net/bcbpc6ey/
If they do, than the problem is probably caused by internal browser scaling algorithm and there is nothing you can do, because thats how the browser works.
However, if problem dissapears after switching transform to margins than you have probably experienced some antyaliasing issues that were caued by moving the rendering of your popup to GPU. Since transform is one of commonly known hardware accelerated CSS property, to make it run smooth browsers often move such elements into a separate layer that is than being handled entirely by GPU which is faster, but often causes some artifacts (mostly visible on fonts and scaled elements).
I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
How do I get a triangle using only css/html with a drop shadow?
Seems like impossible. Definitely using an imagine is much more easier solution.
I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;
What about put another div with similar property and play with positions?
something like http://jsfiddle.net/eveevans/JWGTw/
You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}
Demo on jsfiddle.
Lifted from this CSS Tricks page with modifications.
Probably the best option is using filter:
filter: drop-shadow(0 0 10px black);
Would <canvas> with a PNG fallback be an option?
Demo: jsfiddle.net/Marcel/3dbzm/1
Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.
div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}