How do I fix the gap between shadows? I would like the shadow to be continuous, not intermittent. Shadow should be in one black line without any spaces
This is my example:
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend> </filter></defs><path d='M0,5 C25,0 35,10 60,5 v5 H0' filter='url(%23shadow)'/></svg>");
height: 50px;
left: -160px;
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
The discontinuity you are seeing is the fading of the shadow as it reaches the edge of the shape.
Instead of ending your path exactly at the edge of the SVG, try extending the shape a bit further off the left and right edges. In the example below I have extend the shape wider on each side with a five unit line segment.
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend> </filter></defs><path d='M-5,5 L0,5 C25,0 35,10 60,5 H 65 v5 H-5' filter='url(%23shadow)'/></svg>");
height: 50px;
left: -160px;
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
An idea is to keep the SVG simple and apply drop-shadow filter
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewbox='0 0 60 10' version='1.1'><path fill='white' d='M0,5 C25,0 35,10 60,5 v5 H0' /></svg>");
height: 50px;
left: -160px;
filter:drop-shadow(0 -4px 3px #000);
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
Related
i want to use z-index for text and overlay.
https://jsfiddle.net/osm2rkbx/1/
it is my code.
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mainArea p {
display: flex;
height: 50vh;
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 2px 2px 4px #000000;
z-index: 999999 !important;
}
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
<div class="mainArea">
<div class="container">
<div class="col-md-12 text-center ">
<p>its the text..</p>
</div>
</div>
<div class="mainAreaOverlay"></div>
</div>
when i use z-index for text, its not working. It seems pale. How can i see text with white. İf you help me i will be glad, thanks.
Put z-index:-1 in mainArea class and update z-index:-1 to mainAreaOverlay class.
Old mainArea class:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Updated:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-1;
}
Old mainAreaOverlay class:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
Updated:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
z-index: -1;
}
I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:
Does someone have an idea perhaps how it could be achieved?
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}
<div class="container">
<div class="curved"></div>
</div>
Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background: #fff;
}
<div class="container">
</div>
You can also use radial-gradient if you want a transparent shape:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>
And here is another way using clip-path
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background-color: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: -5%;
left: -5%;
height: 120px;
background: #fff;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>
You can also consider SVG:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>
Here is an example if you want also to add border around your shape:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
border: 2px solid #000;
border-bottom: 0;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #fff;
z-index: 2;
}
.container:before {
content: "";
position: absolute;
height: 82px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #000;
z-index: 1;
}
<div class="container">
</div>
If you want to have an image or gradient as background with the transparency, use mask-image:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
-webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>
Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.
.curved {
margin: 0 auto;
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.curved:after{
background: white;
position: absolute;
content: "";
left:0;
right:0;
bottom: -25px;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="container">
<div class="curved"></div>
</div>
I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:
Does someone have an idea perhaps how it could be achieved?
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}
<div class="container">
<div class="curved"></div>
</div>
Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background: #fff;
}
<div class="container">
</div>
You can also use radial-gradient if you want a transparent shape:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>
And here is another way using clip-path
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background-color: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: -5%;
left: -5%;
height: 120px;
background: #fff;
-webkit-clip-path: ellipse(50% 60% at 50% 100%);
clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>
You can also consider SVG:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>
Here is an example if you want also to add border around your shape:
.container {
margin: 0 auto;
width: 500px;
height: 200px;
border: 2px solid #000;
border-bottom: 0;
background: lightblue;
position: relative;
overflow: hidden;
}
.container:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #fff;
z-index: 2;
}
.container:before {
content: "";
position: absolute;
height: 82px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -62px;
background: #000;
z-index: 1;
}
<div class="container">
</div>
If you want to have an image or gradient as background with the transparency, use mask-image:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
-webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);
background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>
Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.
.curved {
margin: 0 auto;
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.curved:after{
background: white;
position: absolute;
content: "";
left:0;
right:0;
bottom: -25px;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="container">
<div class="curved"></div>
</div>
I spent the last two hours creating the following code, and I'm almost done. I just want the text to transition upwards on the image when hovering (image to still be visible). I have looked at other questions/answers that are similar, but the code they use isn't working with mine. Any suggestions?
HTML
<div class="One">
<p class="img-description">TEST!</p>
<img src="https://media2.giphy.com/media/vFKqnCdLPNOKc/giphy.gif?cid=ecf05e47eb603b7921279bc600f6c24e2c59bff5d8050e4b&rid=giphy.gif">
</div>
<div class="Two"> <p class="img-description-two">TEST!</p>
<img src="https://media0.giphy.com/media/26xBEez1vnVb2WgBq/200w.webp?cid=ecf05e47eb603b7921279bc600f6c24e2c59bff5d8050e4b&rid=200w.webp">
</div>
<div class="Three">
<p class="img-description-three">TEST!</p>
<img src="https://media.giphy.com/media/Y7l6oTRsxCC1a/giphy.gif">
</div>
CSS
body {
position: relative;
height: 500px;
border: #ffd28a 5px solid;
}
.One {
display: inline-flex;
justify-content: space-evenly;
background-color: #ffd28a;
width: 250px;
height: 250px;
position: relative;
top: 100px;
left: 110px;
margin: 0 100px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.img-description {
display: none;
width: 240px;
height: 240px;
background-color: #ffd28a;
position: relative;
margin: 0 90px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.One:hover .img-description {
display: inline-block;
visibility: visible;
opacity: .5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 5px;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.Two {
display: inline-flex;
justify-content: space-evenly;
background-color: #ffd28a;
border: royalblue;
width: 250px;
height: 250px;
position: relative;
top: 100px;
left: 175px;
margin: 0 100px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.img-description-two {
display: none;
width: 240px;
height: 240px;
background-color: #ffd28a;
position: relative;
margin: 0 90px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.Two:hover .img-description-two {
display: inline-block;
visibility: visible;
opacity: .5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 5px;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.Three {
display: inline-flex;
justify-content: space-evenly;
background-color: #ffd28a;
border: sandybrown;
width: 250px;
height: 250px;
position: relative;
top: 100px;
left: 220px;
margin: 0 100px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.img-description-three {
display: none;
width: 240px;
height: 240px;
background-color: #ffd28a;
position: relative;
margin: 0 90px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.Three:hover .img-description-three {
display: inline-block;
visibility: visible;
opacity: .5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 5px;
border: 5px solid #ffd28a;
border-radius: 8px;
}
img {
width: 250px;
height: 250px;
border: 5px ;
border-radius: 7px;
}
Basic idea is
Make container position to relative, hide overflowing content.
Make text absolute position and push it bottom (hide it).
Reveal it on hover
.img-container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.img-container p {
background: #fff;
position: absolute;
bottom: -50px;
z-index: 1;
left: 35%;
transition: 1s;
}
.img-container:hover p {
bottom: 20px;
}
<div class="img-container">
<img src="https://i.picsum.photos/id/83/300/250.jpg" />
<p>Image Caption</p>
</div>
I want a border around my image which is translucent showing 'background' (i.e. not the picture). As the css order is content, padding, border, margin, so I would expect the border around my picture-content, but probably because my picture is set as background (to make it scale) it does not work as I expected. Now it shows parts of my picture through my lightgrey border, see e.g.:
and
How do I get my border around my picture?
body {
background-color: #fff;
margin: 0 0;
padding: 0 0;
}
.overlay {
display: flex;
position: absolute;
background-color: #808080;
cursor: pointer;
color: #f00;
flex-flow: row nowrap;
justify-content: flex-start;
height: 40vh;
width: 100vw;
bottom: 0;
left: 0;
margin: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.overlay .item-image {
border-radius: 5px;
flex: 1 1 auto;
min-width: 45vw;
width: 45vw;
margin-left: 4vw;
border: 15px solid rgba(255,255,255,0.3);
border-radius: 2px;
}
<meta name="description" content="Transparent border not working">
<body>
<div class="overlay">
<div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
</div>
<div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
</div>
</div>
</body>
The property you are probably looking for is background-clip. Set the value either to content-box or padding-box and the result is that the background-image won't continue under the border (which by the way is caused by the fact that the image dimensions are different from the dimensions of the div and background-size: cover).
body {
background-color: #fff;
margin: 0 0;
padding: 0 0;
}
.overlay {
display: flex;
position: absolute;
background-color: #808080;
cursor: pointer;
color: #f00;
flex-flow: row nowrap;
justify-content: flex-start;
height: 40vh;
width: 100vw;
bottom: 0;
left: 0;
margin: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.overlay .item-image {
border-radius: 5px;
flex: 1 1 auto;
min-width: 45vw;
width: 45vw;
margin-left: 4vw;
border: 15px solid rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
<meta name="description" content="Transparent border not working">
<body>
<div class="overlay">
<div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover; background-clip: content-box'>
</div>
<div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover; background-clip: content-box'>
</div>
</div>
</body>
Just in case I misunderstood the question and you want to have a transparent border on all sides, you could do it like this:
body {
background-color: #fff;
margin: 0 0;
padding: 0 0;
}
.overlay {
display: flex;
position: absolute;
background-color: #808080;
cursor: pointer;
color: #f00;
flex-flow: row nowrap;
justify-content: flex-start;
height: 40vh;
width: 100vw;
bottom: 0;
left: 0;
margin: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.overlay .item-image {
position: relative;
border-radius: 5px;
flex: 1 1 auto;
min-width: 45vw;
width: 45vw;
margin-left: 4vw;
}
.overlay .item-image:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 15px solid rgba(255, 255, 255, 0.3);
}
<meta name="description" content="Transparent border not working">
<body>
<div class="overlay">
<div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
</div>
<div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
</div>
</div>
</body>