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>
Related
I'am beginner at frontend, and got some design-layout to train. Designer expects that on hover part of string or even letter will change color Example
I thought about CSS 'clip', but doubt
I change the snippet. Play with font-size.
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-weight: bold;
font-family: sans-serif;
background-color: red;
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 50% 0 0);
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 0 0 50%);
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="wrapper1">Hello World!</div>
<div class="wrapper2">Hello World!</div>
</div>
As G-Cyrillus has pointed out, background-clip with value text can be used, it will 'cut out' characters from the background.
In this simple snippet the background is half white, half black and the blue/white background is supplied in a pseudo before element.
Note that the property requires a -webkit- prefix in some browsers.
* {
margin: 0;
}
div::before {
background-image: linear-gradient(to right, blue 0 50%, white 50% 100%);
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
div {
position: relative;
width: 100vw;
height: 500px;
font-size: 50px;
text-align: center;
rmix-blend-mode: difference;
rcolor: white;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, white 0 50%, black 50% 100%);
}
<div>Hello how are you?</div>
So, Thanks for your help, A Haworth , G-Cyrillus! I think, I've found the solution. I experimented with background-clip:text, but in my case it was excess, but I used mix-blend-mode, thanks. I've found an article Taming Blend Modes: difference and exclusion, where explained filter:invert(1). Tried to show in snippet. When hover the cell part of title change color to white. But color of title and hovering background should be the same.My realized layout from designer
.block {
width: 100%;
height: 200px;
padding-top: 10px;
position: relative;
filter: invert(1);
}
h1 {
position: relative;
color: #091C91;
text-align:center;
font-size: 2rem;
z-index: 5;
mix-blend-mode:difference;
filter: invert(1);
}
.list {
display: flex;
justify-content: center;
border: 1px solid red;
height: 130px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.column {
color: white;
flex: 0 1 25%;
border: 1px solid black;
filter: invert(1);
}
.column:hover {
background: #091C91;
}
<div class="block">
<h1>Snippet for Inverting colores</h1>
<div class="list">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
I have a gallery item with some image in its body. It has to display MORE link in the center of the body when I hover over gallery item (which works just fine) and display 0.5 opacity when I hover over MORE link. Even though z-index is bigger than parent's, for some reason :hover event simply does not fire. Any clue on how to fix this? My cursor: pointer also does not work.
HTML:
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
CSS:
._absolute-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery {
margin-top: 4em;
width: 90%;
}
.gallery-item__footer {
font-size: 1.6rem;
margin-top: 1em;
width: 100%;
border: 1px solid black;
text-align: center;
border-radius: 35px;
padding: .5em 0;
letter-spacing: 2px;
background-color: white;
transition: background-color .3s, color .3s;
}
.gallery__item {
position: relative;
width: 30%;
max-width: 600px;
}
.gallery-item__more-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
transition: background-color .3s;
border-radius: 35px;
z-index: 2;
}
.gallery-item__link {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
z-index: 4;
}
.gallery-item-more {
position: relative;
z-index: 1000000000;
width: 50%;
background-color: rgba(255, 255, 255, 1);
opacity: 0;
transition: background-color .3s;
color: black;
font-weight: bold;
letter-spacing: 1px;
padding: 1em 0;
border-radius: 35px;
text-align: center;
cursor: pointer;
}
.gallery-item-more:hover {
background-color: rgba(255, 255, 255, .5);
}
.gallery-item__link:hover ~ .gallery-item__footer {
background-color: black;
color: white;
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item__more-container {
background-color: rgba(0,0,0,0.8);
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item-more {
opacity: 1;
}
.gallery-item__body {
width: 100%;
position: relative;
}
._flex-column-center {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery__img {
object-position: top;
height: 25vw;
width: 100%;
border-radius: 35px;
}
Move the image before the more-button and it should work: Codepen
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
Am working on a design of a card whereby I need to make the red/maroon part bend inwards (from the black part) using css. Please assist?
HTML Markup
<div class="container phonecard2">
</div>
<div class="btm-right">
</div>
CSS code
.container.phonecard2 {
position: relative;
background: #000;
margin-top: 140px;
width: 35%;
height: 260px;
padding: 20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius: 15px;
}
.btm-right{
position: absolute;
width: 0;
height: 0;
bottom: 0;
right:0;
border-style: solid;
border-width: 0 0 160px 450px;
border-color: transparent transparent #ba0c2f transparent;
}
PNG image of my design after the above code
<div class="container phonecard2">
<div class="btm-right"></div>
</div>
<style>
.container.phonecard2 {
position: relative;
background: linear-gradient(to left, #ba0c2f 70%, #000000 30%);
margin-top: 140px;
width: 600px;
height: 260px;
padding: 20px;
border-radius: 15px;
overflow: hidden
}
.btm-right {
position: absolute;
background: #000;
width: 800px;
height: 680px;
left: -130px;
top: -330px;
border-radius: 0 0 580px 0;
transform: rotate(21deg);
}
</style>
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>
There have been several questions regarding some kind of transparent border but not what I am looking for, I think.
It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border?
So you have a continuous background and each item on top of it "cuts out" some part of it.
A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.
If not, what would be the way to achieve a responsive design like that?
Sorry, I don't know any other way to explain it. Thank you.
See example/fiddle here: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
My thought process
The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.
Example:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
Solution:
The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
you could create a image with transparent background and use that as a border-image.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}
<div class="background">
<hr>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
</div>