So I am attempting to make a really simple lightbox that I can use for something, however for whatever reason the div thats supposed to darken the background is canceling out any background attribute.
HTML
<div class="zoom-placeholder">
<div class="zoom-container">
<img class="zoom" src="image.png" />
</div>
</div>
CSS
.zoom {
margin: 1em 0em; padding: 1em;
background: #f9f9f9;
border: 1px solid #ccc; border-bottom-width: 2px;
box-shadow: rgba(0,0,0,0.075) 0px 2px 3px, inset rgba(255,255,255,0.5) 0px 0px 25px;
user-select: none;
user-drag: none;
}
.zoom-container, .zoom-placeholder {display:table-cell}
.zoom-container.open {
position: fixed;
z-index: 999;
width: 100%; height: 100%;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
background: rgba(0,0,0,0,0.5); /* <--- Not Working --- */
}
.zoom-container.open .zoom {
width: auto;
height: auto;
position: absolute;
margin: 0em;
border-color: rgba(0,0,0,0.1);
box-shadow: rgba(0,0,0,0.5) 0px 10px 30px, inset rgba(255,255,255,0.5) 0px 0px 25px;
}
There isn't anything I have that's writing it over but its still not displaying correctly.
You can see this in use here:
http://jsfiddle.net/JamesKyle/8H7hR/34/
Look at the CSS background: rgba(0,0,0,0,0.5); /* <--- Not Working --- */ is not working because that's invalid CSS3 should be background: rgba(0,0,0,0.5);
Notice the missing 0 you had 1 too many. R ed, G reen, B lue, A lpha transparency. :]
Your problem is you have too many parameters in the statement that is not working (you have 5 when there should only be four):
background: rgba(0,0,0,0.5);
Side note: please improve your acceptance rate.
Related
This question already has answers here:
Box-shadow only on right and left
(3 answers)
Closed 3 years ago.
I currently have global box shadow on a site -
box-shadow: 0 0 5px rgba(0,0,0,.1);
But how do I modify the above so that it only appears on left or right side or both left and right?
Remember that you can use negative values for spread and multiple values for box-shadow.
.shadow {
width: 30%;
height: 40px;
margin: 2rem;
box-shadow:
-5px 0px 5px -6px rgba(0,0,0,1),
5px 0px 5px -6px rgba(0,0,0,1);
}
<div class="shadow"></div>
Another solution could be to use ::before and ::after and filter: blur. The benefits here is that you can transform: rotate the shadows to make it look like the parent element is slightly tilting.
.shadow {
position: relative;
margin: 2rem;
width: 30%;
height: 30px;
background-color: white;
}
.shadow::before,
.shadow::after {
z-index: -1;
content: '';
position: absolute;
top: 2px;
bottom: 2px;
background-color: #000;
width: 2px;
filter: blur(2px);
}
.shadow::after {
right: 0px;
}
.tilting.shadow::before,
.tilting.shadow::after
{
height: 4px;
top: initial;
bottom: 0px;
width: initial;
}
.tilting.shadow::before {
left: 0px;
right: 10px;
transform: rotate(-3deg);
}
.tilting.shadow::after {
left: 10px;
right: 0px;
transform: rotate(3deg);
}
<div class="shadow"></div>
<div class="tilting shadow"></div>
Try this:
box-shadow:
5px 0 5px -2px rgba(0,0,0,.5),
-5px 0px 5px -2px rgba(0,0,0,.5);
how can i create this shape via css ?
Example
Here is an example of a paper folding effect achieved via CSS.
The key here is the box shadow which is positioned over the div using :before
HTML
<div class="note">
</div>
CSS
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
Codepen example https://codepen.io/Washable/pen/BJqMJd
I have modified the bootstrap alerts so they show on the top of the content without moving down any other div, but the issue i have is that the application can show at the same time warnings, errors or success messages but they are overlapping each other.
Here is my alert's css:
.alert {
position: absolute;
z-index: 999999;
width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Edit: Here is the Example in jsfiddle
Edit 2: Thanks to Praveen, here is the code that suits my app: Final code on jsfiddle
Since the position is absolute, you are facing this problem. Make them relative this way:
.alert {
position: relative;
Fiddle: http://jsfiddle.net/praveenscience/Q6nA9/2/
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;
}
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.