I am currently attempting to create a two SVG overlay / masking like the image below
I have created a Svg for the overlay. As it stands i am trying to create two elements one for the green side and one for the blue side.
I have almost achieve the effect using the clip css property it seems to be working however i have noticed when i decrease the screen size both SVG masks overlay each other and i lose the effect.
Also i not 100% sure about the css property transform: rotate; as I want to add text inside each div
For what i am trying to achieve is this the best approach, if it not what is?
Below is a snippet of my code, i have also added a link below with my code.
.hero-overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
-webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
clip: rect(0px, 580px, 500px, 0px); }
.mask-left {
background-color: red; }
.mask-right {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
background-color: blue; }
http://jsfiddle.net/newkidontheblock/72dL79bd/
You can also use css to achieve this using box-shadow
.container {
background: url(https://unsplash.imgix.net/photo-1425036458755-dc303a604201?q=75&fm=jpg&w=1080&fit=max&s=d8d14b1bb37691447e6cf7d4f5a16112) no-repeat;
position: Relative;
width: 100%;
height: 300px;
background-size: cover
}
.left,
.right {
position: absolute;
width: 49.5%;
left: 0;
height: 100%;
background: transparent;
overflow: hidden;
}
.right {
right: 0;
left: auto;
}
.left:before,
.right:before {
content: '';
background: transparent;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
transform: translatey(-50%);
}
.left:before {
left: calc(100% - 47px);
box-shadow: 0px 0px 0px 391px rgba(0, 170, 177, 0.90)
}
.right:before {
right: calc(100% - 47px);
box-shadow: 0px 0px 0px 391px rgba(0, 179, 220, 0.90);
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Related
What I want to achieve: https://imgur.com/h7beFvI
(don't mind the weirdly-clipped pictures, they are just placeholders)
What I got: https://imgur.com/zF1hm1g
I need to place the circles with images directly into circles of SVG background (I put png in snippet for ease of use).
I tried: recreating the shape in CSS, putting SVG as an image into a container and using translate() with %, putting SVG as a background-img of a parent container and adding child-divs. None of the options are remotely responsive. I don't aim to have that option on the mobile view, but I need it responsive on desktop viewing. How do I place those images in relation to the div? Is HTML canvas the last and only option there?
.red {
background-color: var(--red);
}
.white {
background-color: var(--white);
}
.yellow {
background-color: rgb(207, 159, 0);
}
.circle {
border-radius: 50%;
}
.paint-drip {
background-color: var(--white);
margin-top: -6.25rem;
width: 90vw;
height: 38rem;
position: relative;
background-image: url(https://i.imgur.com/5U286gO.png);
background-repeat: no-repeat;
/* clip-path: polygon(0 0, 100% 0, 100% 99%, 0 99%); */
}
.p-nest-1 {
width: 30vw;
height: 30vw;
position: absolute;
top: 80%;
left: 16%;
transform: translate(-50%, -50%);
}
.p-nest-2 {
position: absolute;
top: 40%;
left: 44%;
transform: translate(-50%, -50%);
width: 20vw;
height: 20vw;
border: 2vw solid var(--white);
}
.p-nest-3 {
position: absolute;
top: 80%;
left: 58%;
transform: translate(-50%, -50%);
width: 20vw;
height: 20vw;
border: 2vw solid var(--white);
}
<div class="paint-container mt-0">
<div class="paint-drip">
<div class="p-nest-1 circle yellow "></div>
<div class="p-nest-2 circle yellow"></div>
<div class="p-nest-3 circle yellow"></div>
</div>
</div>
I am making a design using CSS like this image.
Here is a parent element having 3 child elements. How can I make All child elements are overlapping one another without using: position: absolute; in 3 children. How can I make same pattern using position: static;.
.container {
width: 370px;
height: 370px;
margin: calc(50vh - 185px) auto;
background-image: radial-gradient(#fff, #fff, #fff, #eee, #ddd, #ccc);
}
.outer-flower {
width: 80px;
height: 350px;
border: 1px solid #f00;
position: absolute;
margin: 10px auto;
left: 155px;
}
.outer-flower:nth-child(1){
transform: rotate(0deg);
}
.outer-flower:nth-child(2){
transform: rotate(120deg);
}
.outer-flower:nth-child(3){
transform: rotate(240deg);
}
<div class="container">
<div class="outer-flower" data-rotate="0"></div>
<div class="outer-flower" data-rotate="120"></div>
<div class="outer-flower" data-rotate="240"></div>
</div>
You just have to center all three outer-flower in the container using
position: relative on .container and apply following css on outer-flower
position: absolute;
top: 50%;
left: 50%;
As they are in the center then you can rotate them accordingly:
No need to rotate the first element
Rotate the second element by 120deg
Rotate the third element by 240deg
body{
height: 500px;
}
.container {
position: relative;
width: 370px;
height: 370px;
margin: calc(50vh - 185px) auto;
background-image: radial-gradient(#fff, #fff, #fff, #eee, #ddd, #ccc);
}
.outer-flower {
width: 80px;
height: 350px;
border: 1px solid #f00;
position: absolute;
top: 50%;
left: 50%;
}
.outer-flower:nth-child(1) {
transform: translate(-50%, -50%);
}
.outer-flower:nth-child(2) {
transform: translate(-50%, -50%) rotate(120deg);
}
.outer-flower:nth-child(3) {
transform: translate(-50%, -50%) rotate(240deg);
}
<div class="container">
<div class="outer-flower" data-rotate="0"></div>
<div class="outer-flower" data-rotate="120"></div>
<div class="outer-flower" data-rotate="240"></div>
</div>
When you are not using absolute, every element will be either after one another or even in next lines based on the display property. If you have display:inline-block then you can have 3 divs in a single row. Then applying position:relative to the divs in order to move them to a single place and then rotating should be able to meet your requirement. The code is as follows:
P.S: I have changed the dimension values a little bit.
<style>
.container {
width: 250px;
height: 250px;
}
.outer-flower {
width: 78px;
border: 1px solid #f00;
height: 240px;
display:inline-block;
}
.outer-flower:nth-child(1){
transform: rotate(120deg);
position: relative;
left:80px;
}
.outer-flower:nth-child(2){
transform: rotate(0deg);
}
.outer-flower:nth-child(3){
transform: rotate(240deg);
position: relative;
right:80px;
}
</style>
Output:
To avoid using absolute but to maintain the divs as position static we cannot position them using left and top - static just ignores them.
Instead we can use margin positioning and no CSS position property need be set on any of the elements.
This snippet needs a bit of refinement to get the alignment exactly right (don't forget to allow for the border widths if needed, though box-sizing helps) but is given here as a pointer to a way forward.
body {
width: 100vw;
height: 100vh;
}
.container {
width: 370px;
height: 370px;
margin: calc(50vh - 185px) auto;
background-image: radial-gradient(#fff, #fff, #fff, #eee, #ddd, #ccc);
}
.outer-flower {
width: 80px;
height: 350px;
border: 1px solid #f00;
padding: 0;
margin: 10px auto;
box-sizing: border-box;
}
.outer-flower:nth-child(1){
transform: rotate(0deg);
}
.outer-flower:nth-child(2){
transform: rotate(120deg);
margin-top: -350px;
}
.outer-flower:nth-child(3){
transform: rotate(240deg);
margin-top: -350px;
}
<div class="container">
<div class="outer-flower" data-rotate="0"></div>
<div class="outer-flower" data-rotate="120"></div>
<div class="outer-flower" data-rotate="240"></div>
</div>
Use CSS grid to avoid position:absolute
.container {
width: 370px;
height: 370px;
margin: 20px auto;
display: grid;
background: radial-gradient(#fff, #fff, #fff, #eee, #ddd, #ccc);
}
.outer-flower {
grid-area: 1/1; /* make all of them on the same track so they will overlap */
width: 80px;
border: 1px solid #f00;
margin: 10px auto;
}
.outer-flower:nth-child(2) { transform: rotate(120deg) }
.outer-flower:nth-child(3) { transform: rotate(240deg) }
<div class="container">
<div class="outer-flower" data-rotate="0"></div>
<div class="outer-flower" data-rotate="120"></div>
<div class="outer-flower" data-rotate="240"></div>
</div>
i want help to add two image one over the other and position two images in center
<div class="im1"> </div>
.im1{
position: relative; top: 0; left: 0;
background-image:url("../images/img-shadow.png"),url("../images/img-1.png");
background-size:contain;
height:358px;
background-repeat: no-repeat,no-repeat;
}
background image is with shadow
i want it to be
This actually can be solved only with CSS.
I created an example here that generates the rotated border of the image.
Now you can insert any image inside :)
p.s of course you need to change the width and the height of the image inside to be the same as the frame diagonal. you can use CSS calculate for this.
body {
background-color: #F3F5F6;
}
.shadow:before,
.shadow:after {
content: "";
position: absolute;
z-index: -1;
height: 10%;
max-width: 90%;
width: 90%;
}
.shadow:before {
-webkit-transform: rotate(86deg);
left: -72px;
right: auto;
top: 118px;
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
}
.shadow:after {
-webkit-transform: rotate(84deg);
left: auto;
right: -92px;
bottom: 75px;
box-shadow: 0 -15px 5px rgba(0, 0, 0, 0.2);
}
.rotate {
-webkit-transform: rotate(45deg);
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.pic-wrapper {
width: 100%;
height: 100%;
border: 10px solid #fff;
overflow: hidden;
}
.pic {
background-image: url('http://modernschoolec.com/wp-content/uploads/2015/04/11-980x408.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* (side)(sqrt(2)) */
width: 282px;
height: 282px;
-webkit-transform: rotate(-45deg);
position: relative;
top: -40px;
left: -40px;
}
<div class="box shadow rotate">
<div class="pic-wrapper">
<div class="pic"></div>
</div>
</div>
You could either give the shadow image a z-index of 100 and give the school image a z-index of 101 or set one to be position relative and one to be position absolute, but you will need media queries to make it responsive.
.im1{
background-image:url("../images/img-1.png"),url("../images/img-shadow.png");
height:358px;
background-repeat: no-repeat,no-repeat;
background-position: center , center;
}
I'm looking for a way to stack divs, with a pointer leading into the next div that is a continuation of the previous div's background image.
I've looked around and I've seen some options, but in all of them the bottom div has to be a solid color.
For example: http://jsfiddle.net/nhqKb/
#container{
height: 300px;
background: url('http://farm8.staticflickr.com/7358/9532233404_58763bd668_b.jpg') no-repeat;
position: relative;
}
#one {
position: absolute;
width: 100px;
left: 0;
bottom: 0;
border-bottom: 20px solid green;
border-right: 20px solid transparent;
}
#two {
position: absolute;
left: 120px;
bottom: 0;
right: 0;
border-bottom: 20px solid green;
border-left: 20px solid transparent;
}
<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
Is there any way to implement this using divs with background images instead of solid colors?
You can use skewX and pseudo elements to make this.
#container {
background: url('https://images.unsplash.com/photo-1440635592348-167b1b30296f?ixlib=rb-0.3.5&q=80&fm=jpg&w=1080&fit=max&s=a029f986631f264fdbc8c0272cab9c40') no-repeat;
height: 300px;
position: relative;
overflow: hidden;
}
#one {
background-color: rgba(0, 0, 0, 0.3);
bottom: 0;
left: 0;
padding-bottom: 15px;
position: absolute;
width: 100%;
}
#one:before,
#one:after {
background-color: inherit;
bottom: 100%;
content: '';
padding-bottom: inherit;
position: absolute;
width: 50%;
}
#one:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
#one:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
HTML code:
<div id="container">
<div id="one"></div>
</div>
I've found this tutorial
I have an element with background image. So I want to set background image to :before element. But when I try it, there is no background image at all.
Here is fiddle As you can see I set background property:
background: #6D7B8F url('http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png') -10px -20px no-repeat;
And it is fine. But if you comment that css code and uncomment other css (implementation of tutorial) the background dissapears.
Check Following Which you need from given tutorial
#settings {
border: 2px solid #666;
border-radius: 7px;
font-size: 2em;
line-height: 5em;
margin: 3em auto;
text-align: center;
width: 12em;
transform: rotate(30deg);
overflow: hidden;
position: relative;
}
#settings::before {
background: url("http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
height: 200%;
left: -50%;
position: absolute;
top: -50%;
width: 200%;
z-index: -1;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
<div id="settings">Test</div>
Check Fiddle Here.
Add z-index property, to your :before selector
You code seems just fine.
You should not use the 'overflow:hidden' as it seems to hide the background element in your fiddle.
.kitten {
width: 150px;
height: 150px;
background-color: pink;
}
.kitten::before {
position: absolute;
left: 100px;
content: "";
display: block;
background: url(http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif);
background-size: contain;
width: 250px;
height: 250px;
}
<div class="kitten"></div>