How would you achieve an 10px high oval blurry shadow below a 200px box?
.box {
width:200px;
height:200px;
background: #c00;
position:relative;
}
.box:before {
content:'';
position: absolute;
bottom: -20px;
left:20px;
width: 210px;
height: 10px;
background: none; /*This cuts off some portion of the box shadow*/
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
-webkit-box-shadow: 0 15px 10px #000000;
-moz-box-shadow: 0 15px 10px #000000);
-0-box-shadow: 0 15px 10px #000000);
box-shadow: 0 15px 10px #000000;
}
http://jsbin.com/uqugob
The above code is almost perfect, except that I want a more thin oval blurry shadow, and remove the disturbing white background of :before.
Thanks, finally I got it as expected, almost, except that the left and right should be more blurry:
http://jsbin.com/uqugob/4
Thanks
removed the styles with vendor-prefixes (they were annoying, you can add them back using what i provided) but here's the shadow's code:
.box:before {
content:'';
position: absolute;
bottom: -50px;
left:20px;
width: 210px;
height: 30px;
background: #333;
border-radius: 200px / 30px;
box-shadow: 0 0 10px 10px #333;
}
I always like a challenge. Here's what I came up with: http://jsbin.com/uqugob/3/edit
Like #Joseph, I got rid of the vendor prefixes.
.box:before {
content:'';
position: absolute;
bottom: -10px;
left:20px;
width: 210px;
height: 8px;
background: transparent; /*Without a color, the box shadows fails*/
border-radius: 100px / 5px;
box-shadow: 0 25px 25px #000000;
}
I try to change the code for showing shadow after 'hover' event , doesn't work
try using:
margin:0 auto;
to make a shadow in the center and want to reduce the shadow from both left and right sides. Tried assigning it width less than the width of the div/box.
Related
I am looking to create a tunnel-like div which has inverted circle borders
As you can see it has an 'expanding tunnel effect' from left to right. Ideally the checkered background is transparent but if that is impossible I can maybe make it work with a solid background color.
Can anyone help me out creating this css3 shape? Hopefully with a jsfiddle that I can play with?
Thank you!
This can be created using a :before and :after pseudo element:
The background colour is provided with the box-shadow colour, allowing the top and bottom of the shape to be transparent
The curve is created with the border-radius like so:
(the red area is transparent)
Complete Example
div {
height: 300px;
width: 200px;
position: relative;
overflow: hidden;
}
div:before {
top: -60px;
border-bottom: solid #EEE;
border-right: solid #EEE;
border-radius: 0 0 60% 0;
box-shadow: 50px 10px 0 60px #F90;
}
div:after {
bottom: -60px;
box-shadow: 50px 10px 0 60px #F90;
border-radius: 0 60% 0 0;
border-top: solid #EEE;
border-right: solid #EEE;
}
div:before,
div:after {
content: '';
position: absolute;
width: 100%;
height: 160px;
right: 0;
border-width: 3px;
}
<div></div>
Trying to simulate a top border that doesn't start at the left edge of the element.
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px -1px 0 0 black;
}
The above css is close, but produces a black 15px wide shadow to the right of the div. How do I contain that?
http://jsfiddle.net/3sjngyk1/
Top border with just a box shadow?
.border-top {
height: 50px;
width: 100px;
box-shadow: 0px -10px 0px 0px red;
margin-top: 25px;
background: lightblue;
}
<div class="border-top"></div>
Alternatively, you can use a pseudo-element and calc (if the border isn't going to be full width - it's not clear from your question).
.border-top {
height: 50px;
width: 100px;
background: lightblue;
position: relative;
margin-top: 25px;
}
.border-top::after {
content: '';
position: absolute;
height: 5px;
bottom: 100%;
left: 15px;
width: calc(100% - 15px);
background: red;
}
<div class="border-top"></div>
How about this?
http://jsfiddle.net/vleong2332/3sjngyk1/2/
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}
Put another shadow with the same color as the background on top of the black one.
i have a box whose width is variable because it depends of the size of a container. The box has no content so im using margins to define its width relatively but it is not working. This is my code:
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
content:"";
border-top: 2px solid red;
margin: -20px 0 7px -7px;
position:absolute;
width:auto;
}
This is my fiddle http://jsfiddle.net/x7rrj/3/
Please notice how the red border goes outside of the box without honoring the right margin and if i set the width to auto then the red border wont display at all. Is it possible to solve this using CSS only?
Thank you.
I looked at the fiddle and noticed the top red border wasn't showing.
It had a line with the padding: 0 100%;
Removing that line seem to fix your issue.
Is this the final result you wanted?
http://jsfiddle.net/z5952/
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
margin: -9px 0 7px -7px;
position: absolute;
width: auto;
}
Is this something you are looking for?
http://jsfiddle.net/x7rrj/16/
since you are using position:absolute to position the line, you may also use top, right and left to control the position and width as well:
.box:before {
border-top: 2px solid red;
content: "";
padding: 0 100%;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
Okay, i found the answer thanks to an idea given to me by Edward. The problem was solved by replacing margins with top, left and right.
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
width: auto;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
I'm trying to create a webpage with some tabs and I want the tabs that are not selected to "lie behind" the active tab. I've got different tabs with different appearances, one is plain square but the other is a trapezoid.
I've managed to create the shadow effect on the square tab by using
"-webkit-box-shadow: inset 0 -10px 30px -10px #555;"
but that doesn't work for the trapezoid.
This is a simplified example of my code:
HTML
<div id="first-tab">
</div>
<div id="second-tab">
</div>
<div id="main-content">
</div>
CSS
#first-tab {
position:relative;
float: left;
background-color: #ED3627;
-webkit-box-shadow: inset 0 -10px 30px -10px #555;
width: 100px;
height: 70px;
}
#second-tab {
position:relative;
float: left;
margin-left: 50px;
border-bottom: 70px solid #365F91;
border-right: 40px solid transparent;
height: 0;
width: 60px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
#main-content {
clear:both;
position:relative;
float: left;
height: 100px;
width: 250px;
background-color: #365F91;
}
JSFiddle: http://jsfiddle.net/Nx9ex/
Does anyone have any suggestions how I can fix this?
It only has to work for Chrome!
Thanks!
Not perfect, but can be a start:
demo
It didn't work because the second tab had really a height of 0px, and was in top of the trapezoid, the visible portion being the border.
I changed the method of creating a trapezoid, now it has all the space and the corner is hide setting there a transparent background:
#second-tab {
position:relative;
float: left;
margin-left: 50px;
background: linear-gradient(-114deg, transparent 30px, #365F91 31px);
height: 70px;
width: 100px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
The remaing problem is that the shadow is slightly visible in the transparent border
Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here's what I have so far:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
My fiddle: http://jsfiddle.net/4ZeCz/
You actually have to fake it with two triangles....
.container {
margin: 15px 30px;
width: 200px;
background: #fff;
border: 1px solid #a00;
position: relative;
min-height: 200px;
padding: 20px;
text-align: center;
color: #fff;
font: bold 1.5em/180px Helvetica, sans-serif;
text-shadow: 0 0 1px #000;
}
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
.container:after {
top: 10px;
border-color: transparent transparent transparent #fdd;
border-width: 10px;
}
.container:before {
top: 9px;
border-color: transparent transparent transparent #a00;
border-width: 11px;
}
Updated Fiddle here
I know you accept that but check this one also with less css:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
right:-7px;
width: 10px;
height: 10px;
background: #FFFFFF;
border-right:1px solid #CAD5E0;
border-bottom:1px solid #CAD5E0;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
http://jsfiddle.net/4ZeCz/3/
I think this is a simpler one using clip-path:
.container {
width: 150px;
min-height: 150px;
background: #ccc;
padding: 8px;
padding-right: 6%;
display: inline-block;
clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>
Another way to accomplish this, especially for somebody who needs this to work with equilateral or even scalene triangles like I did, is to use filter: drop-shadow(...) with multiple values and no blur radius. This has the added benefit of not needing multiple elements, or access to both :before and :after (I was trying to accomplish this with :after content that was inline, so wanted to avoid absolute positioning too).
For the above case, the :after's CSS could look like this (fiddle):
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
Test Container
</div>
I think there are some limitations or weirdness, though:
No support in IE11 (though seems fine in FF, Chrome, and Edge)
I'm not quite sure why .5px for the <offset-y> value in the second drop-shadow() above appears more like 1px than 1px would have, though I imagine it's related to trigonometry (though at least on my monitor I see no difference between the actual trig-based values or .5px or even .1px for that matter).
Borders greater than 1px (well, their appearance that way) don't seem to work well. Or at least I haven't found the solution, though see below for a less-than-optimal way to go a little bigger. (I would think the documented-but-unsupported 4th parameter (<spread-radius>) of drop-shadow() might be what I'm really looking for instead of multiple filter values, but adding it in just broke things entirely.) Here you can see what starts to happen when going beyond 1px (fiddle):
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
Test Container
</div>
Notice the funniness that the first one (green) gets applied once, but the second one (red) is getting applied both to the yellow triangle created via border as well as the green drop-shadow(), and the last one (blue) gets applied to all of the above. (Perhaps that's also related to the .5px appearance thing).
But I guess you can take advantage of these drop-shadows building on each other if you need something wider-looking than 1px, by changing them to something like the following (fiddle):
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
where the very first one has a blur-radius set (2.5px in this case, though the result appears multiplied), and all the rest have blur at 0. But this will only work for the same color on all sides, and it results in some rounded-looking corners as well as quite rough edges the bigger you go.
.triangle{
position: absolute;
width:0px;
height:0px;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 72px solid #DB5248;
}
.triangle:after{
position: relative;
content:"!";
top:8px;
left:-8px;
color:#DB5248;
font-size:40px;
}
.triangle:before{
content:".";
color: #DB5248;
position: relative;
top:-14px;
left:-43px;
border-left: 41px solid transparent;
border-right: 41px solid transparent;
border-bottom: 67px solid white;
}