I'm trying to create a rainbow circle with 8 segments, 45 degrees in size.
You'll notice that the orange segment is double the size of the others. I think these are number 1 and 8. I can't however figure out how to separate them. Are my degree wrong?
Thanks for your help.
body {
overflow: hidden;
}
.pie {
position: relative;
margin: 1em auto;
border: dashed 1px;
padding: 0;
width: 32em;
height: 32em;
border-radius: 50%;
list-style: none;
}
.slice1 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(-22.5deg) skewY(0deg);
}
.slice2 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(22.5deg) skewY(0deg);
}
.slice3 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(67.5deg) skewY(0deg);
}
.slice4 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(112.5deg) skewY(0deg);
}
.slice5 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(157.5deg) skewY(0deg);
}
.slice6 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(202.5deg) skewY(0deg);
}
.slice7 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(247.5deg) skewY(0deg);
}
.slice8 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(-67.5deg) skewY(0deg);
}
.slice-contents1 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #ffff4d;
text-align: center;
transition: background-color .5s;
}
.slice-contents2 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #9AC147;
text-align: center;
transition: background-color .5s;
}
.slice-contents3 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #639b47;
text-align: center;
transition: background-color .5s;
}
.slice-contents4 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #3869c3;
text-align: center;
transition: background-color .5s;
}
.slice-contents5 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #1e3868;
text-align: center;
transition: background-color .5s;
}
.slice-contents6 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #c682bb;
text-align: center;
transition: background-color .5s;
}
.slice-contents7 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #9a1d34;
text-align: center;
transition: background-color .5s;
}
.slice-contents8 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #f7941e;
text-align: center;
transition: background-color .5s;
}
.slice1 .slice2 .slice3 .slice4 .slice5 .slice6 .slice7 .slice8 .slice-contents1 .slice-contents2 .slice-contents3 .slice-contents4 .slice-contents5 .slice-contents6 .slice-contents7 .slice-contents8 {
transform: skewY(40deg) rotate(25deg);
}
.slice-contents1:hover {
background: #ffff1a;
}
.slice-contents2:hover {
background: #8db23c;
}
.slice-contents3:hover {
background: #588a3f;
}
.slice-contents4:hover {
background: #2d549b;
}
.slice-contents5:hover {
background: #132340;
}
.slice-contents6:hover {
background: #ad4f9e;
}
.slice-contents7:hover {
background: #85192d;
}
.slice-contents8:hover {
background: #f38809;
}
<html>
<body>
<ul class='pie'>
<li class='slice1'>
<div class='slice-contents1'>#</div>
</li>
<li class='slice2'>
<div class='slice-contents2'>#</div>
</li>
<li class='slice3'>
<div class='slice-contents3'>#</div>
</li>
<li class='slice4'>
<div class='slice-contents4'>#</div>
</li>
<li class='slice5'>
<div class='slice-contents5'>#</div>
</li>
<li class='slice6'>
<div class='slice-contents6'>#</div>
</li>
<li class='slice7'>
<div class='slice-contents7'>#</div>
</li>
<li class='slice8'>
<div class='slice-contents8'>#</div>
</li>
<ul>
</body>
</html>
Ohh thats obvious ... you are using square element(li) and rotating it in different angles to make that pi..
According to your design each li div will be of 90 Degree ,while 45 degree of every will be hidden by other element,
for every element upto slices 7 will work good but slice 8 of angle=90.will cover yellow colored element.
take your fiddle for example ..you will notice only yours orange element(slice 8) is of 90 degree and rest are good except yellow(slice 1 ) that was hidden inside your slice 8.
to solve it you should reduce your arc to make it fit..
Make changes to following ..your pie will be go to go
.slice-contents8 {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;
text-align: center;
transition: background-color .5s;
background-image: linear-gradient(135deg, transparent 50%, #f7941e 50%), linear-gradient(90deg, white 50%, transparent 50%);
}
.slice8 {
overflow: hidden; /**/
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%;
transform: rotate(-112.5deg);
}
see the below demo
Working Fiddle
Related
I am quite new to html and css, and have started using transitions. I watched Kevin Powell's video on it, and all his demonstrations had the transition applied when transitioning out (for instance when he stopped hovering on the element). However in my example, the transition works when the logo moves to the left, but instantly teleports back. Why is this, and what have I done wrong?
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}
<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>
you should add this rule:
nav .logobg {
left: 50%;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
So when mouse leave the element it should apply the transition you defined that overrides the :hover rule.
Lety has a solid answer but I thought I would elaborate on my comment earlier. So I had the right idea just wrong placement. I moved .logobg up above nav:hover .logobg and added your duration and timing to .logobg. It now transitions smoothly back and forth.
body {
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav {
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
.logobg {
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
nav:hover .logobg {
left: 0;
transform: translateX(0);
}
.navtext {
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo {
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.navelements {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover {
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221, 16, 247, 1) 0%, rgba(0, 212, 255, 1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}
<nav>
<a href="index.html">
<div class="logobg">
<div class="logo">
AI
</div>
</div>
</a>
<a href="blank.html">
<div class="">
</div>
</a>
</nav>
<div class="navbarline"></div>
CSS transitions reverse once the "hover" event stops. Here's a way to do it with javascript.
I'm adding an "id" with the styling that you require. An id's css will always override that of a class, which is why this works.
The javascript:
const nav = document.querySelector("nav");
const logobg = document.querySelector(".logobg");
nav.addEventListener("mouseover", () => {
logobg.setAttribute("id", "move");
})
The css:
body{
background: #121212;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
}
nav{
background: #212121;
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
}
#move {
left: 0;
transform: translateX(0);
transition-duration: 1000ms;
transition-timing-function: ease-in-out;
}
.navtext{
left: 50%;
transform: translateX(-50%);
position: absolute;
font-size: 30px;
}
.logo{
top: 0%;
font-size: 65px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
text-decoration: none;
color: #FFF;
}
.logobg{
width: 150px;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navelements{
position: absolute;
left: 50%;
transform: translateX(-50%);
background: red;
height: 100%;
}
.navelements:hover{
background: #303030;
transition-duration: 300ms;
}
.navbarline {
background: linear-gradient(90deg, rgba(221,16,247,1) 0%, rgba(0,212,255,1) 100%);
width: 100%;
height: 4px;
position: absolute;
top: 80px;
left: 0;
}
I am trying to skew both the top and bottom of a div to create a shape that I can then insert a background pattern to however, after a few hours of research I can't really come up with a solid solution. I'm nearly there in the sense that all I need to do is to skew the bottom but am looking for some help or guidance on doing so.
I would like the bottom to mirror the skew of the top. Any suggestions?
#test {
position: relative;
width: 100%;
height: 400px;
}
.bg {
width: 50%;
height: 800px;
-webkit-transition: all 300ms ease-in;
background: black;
border-radius: 80px 0px 0px 80px;
position: absolute;
right: 0;
top: 0;
-ms-transform: skewY(-9deg);
-webkit-transform: skewY(-9deg);
transform: skewY(-9deg);
}
<section id="test">
<div class="bg"></div>
</section>
Example of what I currently have
https://jsfiddle.net/3atsj1e5/
With some rotation and perspective you can do it:
.box {
margin-left: auto;
width: 200px;
height: 450px;
transform-origin: right;
transform: perspective(100px) rotateY(-10deg);
border-radius: 40px 0 0 40px;
overflow: hidden;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://picsum.photos/id/1074/400/800) center/cover;
transform-origin:inherit;
transform: perspective(100px) rotateY(10deg);
}
body {
margin: 0;
background:#eee;
}
<div class="box"></div>
Why does Transform-style: preserve-3d break z-zindex?
I am experimenting with CSS 3d effects:
My Goal is to create a 3-dimensional animated letter.
As soon as I add transform-style: preserve-3d to #F_cnt the divs appear in the wrong layers. The z-index has no effect.
When I remove transform-style: preserve-3d it works fine.
Please help me! Thank you!
#F1 {
width: 5rem;
height: 25rem;
background: blue;
position: absolute;
transform: translateZ(5rem);
}
#F2 {
width: 10rem;
height: 5rem;
background: blue;
position: absolute;
left: 5rem;
top: 0;
transform: translateZ(5rem);
}
#F3 {
width: 5rem;
height: 5rem;
background: blue;
position: absolute;
transform: translateZ(5rem);
left: 5rem;
top: 10rem;
}
#Fb1 {
width: 5rem;
height: 25rem;
background: yellow;
position: absolute;
transform: translate3d(2.5rem, -2.5rem, 4.99rem);
}
#Fb2 {
width: 10rem;
height: 5rem;
background: yellow;
position: absolute;
left: 5rem;
top: 0;
transform: translate3d(2.5rem, -2.5rem, 4.99rem)
}
#Fb3 {
width: 5rem;
height: 5rem;
background: yellow;
position: absolute;
left: 5rem;
top: 10rem;
transform: translate3d(2.5rem, -2.5rem, 4.99rem)
}
#Ftop_1 {
width: 15rem;
height: 5rem;
background: green;
position: absolute;
bottom: 0;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(5rem);
}
#Ftop_2 {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -10rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(5rem);
}
#Fbot {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -25rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fbot_2 {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -15rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fbot_3 {
width: 10rem;
height: 5rem;
background: green;
position: absolute;
bottom: -5rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fright_1 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
left: 15rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_2 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
bottom: -10rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_3 {
width: 5rem;
height: 10rem;
background: red;
position: absolute;
bottom: -25rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_4 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
bottom: -15rem;
left: 10rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fleft {
width: 5rem;
height: 25rem;
background: red;
position: absolute;
bottom: -25rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(4.99rem);
}
#F_cnt {
margin-top: 5rem;
margin-left: 30rem;
position: absolute;
animation-name: F-anim;
animation-duration: 5s;
animation-iteration-count: infinite;
transform-style: preserve-3d;
}
#F {
perspective: 10000px;
perspective-origin: 50%;
background: black;
position: relative;
}
<body>
<div id="F">
<div id="F_cnt">
<div id="F1"></div>
<div id="F2"></div>
<div id="F3"></div>
<div id="Fb1"></div>
<div id="Fb2"></div>
<div id="Fb3"></div>
<div id="Ftop_1"></div>
<div id="Ftop_2"></div>
<div id="Fbot"></div>
<div id="Fbot_2"></div>
<div id="Fbot_3"></div>
<div id="Fright_1"></div>
<div id="Fright_2"></div>
<div id="Fright_3"></div>
<div id="Fright_4"></div>
<div id="Fleft"></div>
</div>
</div>
</body>
so i have a container div which holds 5 other divs (see picture ) and on hover those divs slide in the direction the arrow is pointed ( to right of picture ). I achieved this simply with CSS's :hover property. However, it achieved it's purpose but I simply just do not like the result ( see snippet ); certain mouse positions would cause the div to go back to the original position then back to hovered position again. Any ideas for improving the hover property? Picture
body, html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow : hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before, #summer:before, #winter:before, #autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
}
#spring:hover {
left: -10%;
top:-10%;
}
#winter:hover{
left:-15%;
top:65%;
}
#autumn:hover{
left:65%;
top:65%;
}
#summer:hover {
left: 65%;
top:-15%;
}
#spring:before {
bottom: -100px;
right: -100px;
}
#summer:before {
bottom: -100px;
left: -100px;
}
#winter:before {
top: -100px;
right: -100px;
}
#autumn:before {
top: -100px;
left: -100px;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
Instead of moving the main div, you create pseudo elements and move them.
When done like that, it will solve the hover issue.
Note, you might need to adjust the movement a little, I just made them up to show how-to
body,
html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before,
#summer:before,
#winter:before,
#autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
transition: 0.6s;
border-radius: 50%;
transform-origin: left top;
}
#spring:before {
left: calc(100% - 100px);
top: calc(100% - 100px);
}
#summer:before {
top: calc(100% - 100px);
left: -100px;
}
#winter:before {
top: -100px;
left: calc(100% - 100px);
}
#autumn:before {
top: -100px;
left: -100px;
}
#spring:after,
#summer:after,
#winter:after,
#autumn:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
transform-origin: left top;
z-index: -1;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
#spring:hover::before,
#spring:hover::after {
transform: translate(-30%,-15%);
}
#winter:hover::before,
#winter:hover::after {
transform: translate(-15%,30%);
}
#autumn:hover::before,
#autumn:hover::after {
transform: translate(30%,15%);
}
#summer:hover::before,
#summer:hover::after {
transform: translate(30%,-15%);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
Fiddle: https://jsfiddle.net/0qqnvrdg/
HTML:
<div class="loading"></div>
CSS:
body {
background: #0d8aa5;
}
.loading {
position: absolute;
left: 50%;
top: 25%;
/*margin: -60px 0 0 -60px;*/
background: #fff;
width: 200px;
height: 200px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.loading:before {
background-image: url('http://i.stack.imgur.com/UTnLP.png');
background-size: 100%;
background-repeat: no-repeat;
display: block;
width: 85%;
height: 85%;
content:"";
position: absolute;
top: 20%;
left: 10%;
}
How can I modify the CSS to that the image is under the thin blue border while being on top of the white.
Is that possible?
added z-index: -1000; for under.
ps: nice effect for scrollbar )
body {
background: #0d8aa5;
}
.loading {
position: absolute;
left: 50%;
top: 25%;
/*margin: -60px 0 0 -60px;*/
background: transparent;
width: 200px;
height: 200px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.loading:before {
background-image: url('http://i.stack.imgur.com/UTnLP.png');
background-size: cover;
background-repeat: no-repeat;
display: block;
width: 100%;
height: 100%;
content: "";
position: absolute;
border-radius: 50%;
z-index: -1000;
}
<div class="loading"></div>
.loading {overflow: hidden} - just add this line
It is Because You are adding Background image before div.loading that makes images as content.Instead add background image to div.