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>
Related
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 am doing a this challenge on CSS Battle and get a very thin border around the rotated div object. Why is that? How can I get rid of it? When I submit it on the website it also scores only 98.somewhat %, so it's not just a rendering problem.
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<style>
body {
background: #222730;
margin: 0;
}
div {
position: absolute;
background: #4CAAB3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#a {
width: 400px;
height: 150px;
}
#b {
z-index: 1;
border: solid 50px #222730;
width: 150px;
height: 150px;
transform: translate(-50%, -50%) rotate(45deg);
}
#c {
z-index: 2;
background: #393E46;
border-radius: 25px;
width: 50px;
height: 50px;
}
</style>
It's coming from the background property of #b (inherited from div).
Simply shift this property setting to be exclusive to #a:
body {
background: #222730;
margin: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#a {
width: 400px;
height: 150px;
background: #4CAAB3;
}
#b {
z-index: 1;
border: solid 50px #222730;
width: 150px;
height: 150px;
transform: translate(-50%, -50%) rotate(45deg);
}
#c {
z-index: 2;
background: #393E46;
border-radius: 25px;
width: 50px;
height: 50px;
}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
You can simplify your code like below:
html {
background:
linear-gradient(#4CAAB3 0 0)center/100% 150px repeat-x /* the bar below the rotate square */
#222730
}
body {
width: 150px;
height: 150px;
margin: 25px auto;
border: 50px solid #222730; /* the border */
background:
#4CAAB3 padding-box /* the main color */
radial-gradient(1px, #393E46 24px, #0000 25px); /* the circle */
transform: rotate(45deg);
}
I have a div which contains an image and overlay:
<div class="container">
<div class="overlay"></div>
<img src="tablet.png" alt="tablet">
</div>
How can I make an overlay with shadow like ?
While it surely can be done via CSS or SVG, most likely that shadow is just a background image where the shadow is already drawn.
However, here's an example of how you could think of it in css:
.scene {
position: relative;
width: 200px;
height: 200px;
background: #60c18b;
overflow: hidden;
}
.object {
position: absolute;
width: 40px;
height: 45px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
}
.object:after, .object:before {
content: '';
display: block;
width: 100%;
height: 100px;
background: linear-gradient(rgba(0,0,0,0.3), transparent);
transform: skew(-45deg, 0deg);
transform-origin: top left;
position: absolute;
}
.object:before {
transform: translateY(2px) skew(0deg, -45deg);
transform-origin: top right;
width: 100px;
height: 100%;
position: absolute;
right: 0;
background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
<div class="scene">
<div class="object"></div>
</div>
Note that this is just for fun, it's not perfect and I wouldn't use this on a production site.
I am trying to make a sort of Venn-Diagram that is going to be used for navigation later.
I have three intersecting ellipsoids created with CSS shapes. Each ellipsoid, as well as their two intersections, will be distinct links later on. Also, when you hover over them they should pop out as per transform: scale(1.3).
My issue is that I'm using ellipsoids which are partially transparent with :after to create the intersections, which creates a problem when hovering over them because the :hover condition gets triggered when hovering anywhere on the partially transparent ellipsoid and not just the :after part. This means that the nonintersecting areas are not hoverable because they are obstructed by the other invisible ellipsoid.
I think the example will make this clearer.
Here is the code:
CSS:
.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}
HTML:
<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>
And here is a fiddle: https://jsfiddle.net/y3Lvmuqg/2/
I would like the :hover to only get triggered in the intersections, and later make cat_one and cat_two hoverable outside the intersections.
I don't know if there is a way I'm doing this is the best and I'm open to suggestions.
Thanks for getting back to me #ge0rg I spent about an hour fiddling with CSS and HTML and came up with this code using just divs with background colors, hover events and border radius's (along with a few z-index and positioning techniques).
Hope you enjoy your reworked venn diagram...
You may have to mess around with the size, and definetly will have to mess with the positioning (however they're all inside a div and so it makes it so that you can just position the div and the rest will happen magically) I added a background color to the div just to show that nothing was transparent, and I also added a always on top function for viewing a section, and I hope you enjoy!
.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit #keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
#keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>
For those of you who would prefer a JSfiddle/ CodePen here you go a Codepen.
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>