One color on image symbolizes one div. Is it possible to put first div under second, second under third, third under fourth, and fourth under first?
Is it possible to do with pure CSS (without SVG/image etc.)?
You can also play with transform:rotate
div {
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
display: grid;
grid-template-columns: 300px 300px;
grid-template-rows: 200px 200px;
}
div p {
margin: 2em;
}
div :nth-child(1),
div :nth-child(2) {
background: lightblue;
margin: 0 3em;
grid-column: 2;
grid-row: 1 / span 2;
}
div :nth-child(1) {
background: black;
grid-column: 1;
color: white;
}
div :nth-child(3),
div :nth-child(4) {
background: yellow;
margin: 2em 1em;
grid-column: 1 / span 2;
grid-row: 1;
}
div :nth-child(4) {
background: lightgreen;
grid-row: 2;
}
div :nth-child(1) {
transform: rotateX(1deg)
}
div :nth-child(2) {
transform: rotateX(-1deg)
}
<div>
<p>one</p>
<p>two</p>
<p>three</p>
<p>four</p>
</div>
Nope - tis is impossible (at least by using z-index layers) - however you can use some trick to get this effect e.g use 5 div-s:
.boxA {
position: absolute;
width: 97px;
height: 175px;
background: black;
left: 17px;
z-index: 2;
}
.boxB {
position: absolute;
width: 248px;
height: 60px;
background: yellow;
top: 32px;
z-index: 3;
}
.boxC {
position: absolute;
width: 248px;
height: 60px;
background: #00ff7b;
top: 112px;
z-index: 1;
}
.boxD {
position: absolute;
width: 62px;
height: 175px;
background: cyan;
left: 157px;
z-index: 0;
}
.boxE {
position: absolute;
width: 62px;
height: 100px;
background: cyan;
left: 157px;
z-index: 4;
}
<div class="boxA"></div>
<div class="boxB"></div>
<div class="boxC"></div>
<div class="boxD"></div>
<div class="boxE"></div>
Related
So i have this widget and as you can see in the top right and left of each of the sections that has mix-blend-mode: screen active but it's getting a border-radius from a div which is set about in the main div.
HTML:
<div class="widget-box top-earners-widget">
<div class="box-header">
<h3 class="text-accent-2">Top Earners (<a class="dropdown-trigger" data-target='data-switcher-{{ #instance-guid }}'
id="switcher_type"></a>)</h3>
</div>
<div class="top-earners" foreach="data" foreach-limit="5">
<div class="earner">
<img src="{{ item.image }}" class="user-image">
<div class="white-bg"></div>
<div class="black-bg"></div>
<div class="marked-bg"></div>
<div class="marked-bg-2"></div>
<span class="name">{{ item.name }}</span>
<span class="total" amount="{{ item.value }}">£{{ item.value }}</span>
</div>
</div>
</div>
SASS:
.widget-box {
border-radius: 0.4em;
box-sizing: border-box;
border: 1px solid $stroke;
background: $background;
height: 100%;
position: relative;
overflow: hidden;
&.top-earners-widget,
&.top-taskers-widget {
.top-earners,
.top-taskers {
width: 100%;
height: 15em;
min-height: 15em;
.earner,
.tasker {
width: 100%;
height: 3em;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
.user-image {
height: 1.5em;
width: 1.5em;
z-index: 5;
position: absolute;
margin-left: 0.5em;
}
.name {
color: white;
padding-left: 2.5em;
position: absolute;
mix-blend-mode: difference;
z-index: 3;
}
.total {
z-index: 3;
margin-left: auto;
padding-right: 10px;
color: white;
mix-blend-mode: difference;
}
.white-bg {
background: $background;
background: white;
width: 100%;
z-index: 1;
height: 100%;
position: absolute;
}
.black-bg {
background: black;
width: 0;
z-index: 2;
height: 100%;
position: absolute;
}
.marked-bg {
background-color: $accent;
mix-blend-mode: screen;
width: 100%;
z-index: 4;
height: 100%;
position: absolute;
left: 0;
}
.marked-bg-2 {
background-color: $top-earners;
mix-blend-mode: screen;
width: 100%;
z-index: 4;
height: 100%;
position: absolute;
right: 0;
}
&:nth-child(2) .marked-bg {
background-color: lighten($accent, 10%);
}
&:nth-child(3) .marked-bg {
background-color: lighten($accent, 20%);
}
&:nth-child(4) .marked-bg {
background-color: lighten($accent, 30%);
}
&:nth-child(5) .marked-bg {
background-color: lighten($accent, 35%);
}
}
}
}
}
I found the problem was to do with the position of the parent object. So i added position: inherit; to the sub parent of the div.
So its looks like this now.
&.top-earners-widget,
&.top-taskers-widget {
position: inherit;
...
}
This question already has answers here:
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 2 years ago.
So I have this:
Then I add text:
.front {
background: #e0e0e0;
width: 100%;
height: 200px;
border: 5px solid black;
}
#keyframes animateonload {
0% {
top: 0;
left: 200px;
background: #80ed9d;
}
25% {
top: 200px;
left: 200px;
background: #9f80ed;
}
50% {
top: -101px;
left: -900px;
background: #eda380;
}
75% {
top: 900px;
left: 200px;
background: #3e6b66;
}
100% {
top: 450px;
left: 100px;
background: #ccfa8c;
}
}
body {
animation-name: animateonload;
animation-duration: 5s;
animation-iteration-count: 1;
position: relative;
width: 100%;
height: auto;
}
.divver3 {
width: 33%;
height: 600px;
background: #faa68c;
font-size: 20px;
display: inline-block;
grid-column: 3;
grid-row: 1;
}
.divver2 {
width: 33%;
height: 600px;
background: #faa68c;
font-size: 20px;
display: inline-block;
grid-column: 2;
grid-row: 1;
}
.divver1 {
width: 33%;
height: 600px;
background: #faa68c;
font-size: 20px;
display: inline-block;
grid-column: 1;
grid-row: 1;
}
.div {
width: 100%;
height: auto;
}
.divver1 h1 {
text-align: center;
margin: 0;
}
<div class="div">
<div class="divver1">
<h1> Price option 1 </h1>
</div>
<div class="divver2">
</div>
<div class="divver3">
</div>
</div>
</div>
So why does my thing do this when I add text to the box? I have no answer, and how can this do this?
Is this just a flaw in my code in the .divver?
The code contains the full grid layout, and correct <div> positioning so why hasn't this worked?
Is it that I need padding/margins? Or does the width need to vary each box? Please help me.
Thank you,
Ring Games
display: inline-block will, by default, vertically align elements according to their baseline.
When they're empty, the baseline is just the bottom of the element.
But when you add some text, the baseline is the baseline of that text. Notice how the bottom of the text is now aligned to the bottom of the other elements.
In this case you may be better off with display: grid;, display: flex; or maybe even column-count: 3; to achieve your layout, but if you're stuck with what you've got then adding vertical-align: top; should do the trick.
Try making your position absolute like this:
.front {
background: #e0e0e0;
width: 100%;
height: 200px;
border: 5px solid black;
}
#keyframes animateonload {
0% {top: 0; left: 200px; background: #80ed9d;}
25% {top: 200px; left: 200px; background: #9f80ed;}
50% {top: -101px; left: -900px; background: #eda380;}
75% {top: 900px; left: 200px; background: #3e6b66;}
100% {top: 450px; left: 100px; background: #ccfa8c;}
}
body {
animation-name: animateonload;
animation-duration: 5s;
animation-iteration-count: 1;
position: relative;
width: 100%;
height: auto;
}
.divver3 {
width: 33%;
height: 600px;
background: #faa68c;
font-size: 20px;
display: inline-block;
grid-column: 3;
grid-row: 1;
}
.divver2 {
width: 33%;
height: 600px;
background: #faa68c;
font-size: 20px;
display: inline-block;
grid-column: 2;
grid-row: 1;
}
.divver1 {
width: 33%;
height: 600px;
background: #faa68c;
font-size: 20px;
display: inline-block;
grid-column: 1;
grid-row: 1;
position: absolute;
}
.div {
width: 100%;
height: auto;
}
.divver1 h1 {
text-align: center;
margin: 0;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Ring Games - Official Site</title>
</head>
<body>
<div class="div">
<div class="divver1">
<h1>this is some text</h1>
</div>
<div class="divver2">
</div>
<div class="divver3">
</div>
</div>
</body>
</html>
I am trying to create a target out of div elements but I cannot seem to figure out how to align them so that they are all centered and the smallest of the div elements is visible on top. In the html file all I have are div elements since I am doing all of the modifications in the CSS file. It should look something like this but with different colours.Target
/* box_model.css */
div {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50px;
display: inline-block;
position:absolute;
}
div:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50px;
display: inline-block;
position: relative;
}
div:nth-of-type(3) {
height: 150px;
width: 150px;
background-color: yellow;
border-radius: 80px;
display:inline-block;
position: relative;
}
div:nth-of-type(4) {
height: 250px;
width: 250px;
background-color: green;
border-radius: 150px;
display: inline-block;
position: relative;
}
<div></div>
<div></div>
<div></div>
<div></div>
First, I gave the parent container (in your case, body), a flex display. Next, I made all children absolutely positioning, so that they can stack on top of one another using z-index. Finally, the vertical transform was added to account for their own height, so that the elements would be truly positioned in the center of the screen.
Note: I condensed all the border-radius lines into a single line, to hopefully make your life a bit easier.
body {
display: flex;
align-items: center;
justify-content: center;
}
body>div {
position: absolute;
transform: translateY(-50%);
top: 50%;
border-radius: 50%;
}
div {
height: 50px;
width: 50px;
background-color: red;
display: inline-block;
}
div:nth-of-type(1) {
z-index: 4;
}
div:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: orange;
z-index: 3;
}
div:nth-of-type(3) {
height: 150px;
width: 150px;
background-color: yellow;
z-index: 2;
}
div:nth-of-type(4) {
height: 200px;
width: 200px;
background-color: green;
z-index: 1;
}
<div></div>
<div></div>
<div></div>
<div></div>
Result:
jsFiddle
I guess this is what you want to accomplish. This is your CSS code:
div.red {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50px;
display:flex;
align-items: center;
position:absolute;
z-index: 3;
}
div.orange {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50px;
display:flex;
align-items: center;
position:absolute;
z-index: 2;
}
div.yellow {
height: 150px;
width: 150px;
background-color: yellow;
border-radius: 80px;
display:flex;
align-items: center;
position: absolute;
z-index: 1;
}
div.green {
height: 250px;
width: 250px;
background-color: green;
border-radius: 150px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
}
And this is you HTML code:
<div class="green">
<div class="orange"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
#a1{
display:flex;
height: 250px;
width: 250px;
background-color: green;
border-radius: 125px;
z-index:5;
justify-content:center;
align-items:center;
}
#a2{
display:flex;
height: 200px;
width: 200px;
background-color: yellow;
border-radius: 100px;
z-index:10;
justify-content:center;
align-items:center;
}
#a3{
display:flex;
height: 150px;
width: 150px;
background-color: orange;
border-radius: 75px;
z-index:15;
justify-content:center;
align-items:center;
}
#a4{
display:flex;
height: 100px;
width: 100px;
background-color: red;
border-radius: 50px;
z-index:20;
justify-content:center;
align-items:center;
}
use flexbox with z-index
<div id='a1'>
<div id='a2'>
<div id='a3'>
<div id='a4'></div>
</div>
</div>
</div>
There's a few techniques you might want to to use here.
Firstly, absolute positioning lets you position an object relative to its parents layout.
Remember that absolute positioned elements are positioned based on the next parent that has absolute or relative positioning. That is, if the immediate parent has position: static that parent will be ignored for the purpose of absolute positioning. This is why, in my example, I've given the container div position: relative - just to make the absolute positioning apply.
Secondly, the calc() function lets you make derived calculations - in this case to perfectly center things, we calc the left and right properties as 50% of the parent's width, minus 1/2 * however wide we want this thing to be.
Thirdly, the z-index property lets us control how which element displays on top.
I've quickly modified what you've done, and here's what I've got.
/* box_model.css */
.container {
position: relative;
height: 250px;
width: 250px;
}
.container>.target {
position:absolute;
}
.target:nth-of-type(1) {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50px;
z-index: 4;
left: calc(50% - 25px);
top: calc(50% - 25px);
}
.target:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50px;
z-index: 3;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
.target:nth-of-type(3) {
height: 150px;
width: 150px;
background-color: yellow;
border-radius: 80px;
z-index:2;
left: calc(50% - 75px);
top: calc(50% - 75px);
}
.target:nth-of-type(4) {
height: 250px;
width: 250px;
background-color: green;
border-radius: 150px;
z-index:1;
left: calc(50% - 125px);
top: calc(50% - 125px);
}
<div class = "container">
<div class ="target"></div>
<div class ="target"></div>
<div class ="target"></div>
<div class ="target"></div>
</div>
I would note though - that generally manually setting z-index values should be avoided, because as your application grows you might find other things over lapping when you don't want them to.
Instead, you can control how the elements stack just by their document position - in this case - make the largest circle the first element, rather than the last.
I hope This help
.wrapper {
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
margin: 20px;
}
.wrapper div:nth-child(1) {
height: 300px;
width: 300px;
background-color: red;
border-radius: 150px;
position: absolute;
top:calc(50% - 150px);
left: calc(50% - 150px);
}
.wrapper div:nth-child(2) {
height: 200px;
width: 200px;
background-color: white;
border-radius: 100px;
position: absolute;
top:calc(50% - 100px);
left: calc(50% - 100px);
}
.wrapper div:nth-child(3) {
height: 100px;
width: 100px;
background-color: red;
border-radius: 100px;
position: absolute;
top:calc(50% - 50px);
left: calc(50% - 50px);
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
Anyone can help me figure out how to do this. I'm trying to expand the div when hover, but I cannot expand it from center for the b and c div, and d from right, and I trying to overlay the other div when expand instead of pushing it.
The transform:scale() method cannot be use, because I will change the background with image later. I also trying to avoid using jQuery. Thanks in advance.
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: -1;
}
.box1, .box2, .box3, .box4 {
width: 25%;
height: inherit;
display: block;
float: left;
z-index: 1;
}
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
.box3 {
background-color: red;
}
.box4 {
background-color: purple;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
width:100%;
z-index: 0;
transition: 1s ease;
}
<div class="displaybox">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
<div class="box4">d</div>
</div>
You can do this with css transitions but I think the mouse out animation is poor as it loses it's z-index too early (so you do not see the right side animating backwards):
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
display:flex;
background-color: pink;
width: 100%;
height: 500px;
position: relative;
}
.box {
display: block;
position: absolute;
top: 0;
bottom: 0;
width:25%;
transition: 1s ease;
}
.box:hover {
left: 0;
width:100%;
z-index:1;
}
.box1 {
background-color: green;
left: 0;
}
.box2 {
background-color: blue;
left: 25%;
}
.box3 {
background-color: red;
left: 50%;
}
.box4 {
background-color: purple;
left: 75%;
}
<div class="displaybox">
<div class="box box1">a</div>
<div class="box box2">b</div>
<div class="box box3">c</div>
<div class="box box4">d</div>
</div>
Instead I would probably use a js animation instead (below is a simple jQuery animation):
var $boxes = $('.box');
$boxes.hover(function() {
var $this = $(this);
$this.stop().css('z-index', 2).animate({ // change z-index before animation and animate width to 100 % and move to the left
width: '100%',
left: 0
});
},
function() {
// mouse out animation
var $this = $(this);
$this.stop().css('z-index', 2).animate({ // make highest z-index and shrink back to 25% moving left to original place
width: '25%',
left: $boxes.index($this) * 25 + '%'
}, function() {
$this.css('z-index', 1); // change z-index back after animation
});
});
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
display:flex;
background-color: pink;
width: 100%;
height: 500px;
position: relative;
}
.box {
display: block;
position: absolute;
top: 0;
bottom: 0;
width:25%;
}
.box1 {
background-color: green;
left: 0;
}
.box2 {
background-color: blue;
left: 25%;
}
.box3 {
background-color: red;
left: 50%;
}
.box4 {
background-color: purple;
left: 75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displaybox">
<div class="box box1">a</div>
<div class="box box2">b</div>
<div class="box box3">c</div>
<div class="box box4">d</div>
</div>
You can achieve the effect with absolute positioning. Setting the left and right values to 0 will make the div expand out to the edges. I used percentages on the left and right values instead of a 25% width and I had to put a higher z-index value on the hover state to get the current div to jump to the front right away.
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: 0;
}
.box1, .box2, .box3, .box4 {
height: inherit;
z-index: 0;
position: absolute;
transition: 1s ease;
}
.box1 {
background-color: green;
left: 0;
right: 75%;
}
.box2 {
background-color: blue;
left: 25%;
right: 50%;
}
.box3 {
background-color: red;
left: 50%;
right: 25%;
}
.box4 {
background-color: purple;
left: 75%;
right: 0;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
z-index: 10;
left: 0;
right: 0;
}
<div class="displaybox">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
<div class="box4">d</div>
</div>
A solution is to animate the background by using a pseudo element overflowing:
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: -1;
overflow:hidden;
}
.box {
width: 25%;
height: inherit;
display: block;
float: left;
z-index: 1;
position:relative;
background-color:var(--c);
transition:z-index 1s 1s;
}
.box:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background-color:var(--c);
transition:1s left,1s right;
}
.box:hover {
z-index:2;
transition:z-index 0s;
}
.box:hover::before {
left:-100vw;
right:-100vw;
}
<div class="displaybox">
<div class="box box1" style="--c:green">a</div>
<div class="box box2" style="--c:blue">b</div>
<div class="box box3" style="--c:red">c</div>
<div class="box box4" style="--c:purple">d</div>
</div>
I'm trying to replicate this, essentially:
So basically two 50% <div>'s side-by-side, with some form of absolute positioning (I assume) to achieve the left box to go over the top of the right box (the red line is just representing the middle of the viewport)
Any hints? Thanks :)
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 100%;
height: 100%;
background-color: blue;
transform: skewX(-20deg) translateX(-40%);
position: absolute;
z-index: 10;
}
.box2 {
width: 100%;
height: 100%;
background-color: red;
z-index: 0;
}
Should be pretty simple with CSS3.
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
I offer a version without the transformation, using pseudoelement. It is faster and does not distort the text.
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 50%;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
}
.box1::after{
background: linear-gradient(to bottom right, blue 50%, transparent 0);
content: " ";
width: 20%;
height: 100%;
position: absolute;
left: 100%;
z-index: 1;
}
.box2 {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
right: 0;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Try this
.wrapper {
overflow-x: hidden;
}
.outer {
position: absolute;
width: 2000px;
left: 50%;
bottom: 0;
margin-left: -1000px;
display: flex;
justify-content: center;
align-items: center;
}
.left__inner {
background: goldenrod;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
display: flex;
justify-content: flex-end;
}
.right__inner {
background: #222;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
}
.left__text,
.right__text {
transform: skew(-45deg);
span {
font-weight: 200;
font-size: 36px;
text-transform: uppercase;
}
}
.left__text {
color: #3c3c3c;
}
.right__text {
color: Goldenrod;
}
<div class="wrapper">
<div class="outer">
<div class="left__inner">
<div class="left__text">
<span> so skewy</span>
</div>
</div>
<div class="right__inner">
<div class="right__text">
<span>span much angle</span>
</div>
</div>
</div>
</div>
I would do it like this
this is just an example, not a ready-made solution ))
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: flex;
}
.container div {
width: 50%;
height: 200px;
position: relative;
}
.container .left:before {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: skewY(-1.5deg);
background: inherit;
}