What I have: https://jsfiddle.net/f6z1km3k/1/
What I need after :hover (with values that make sense! - not just from the eye)
HTML:
.header-hamburger:hover span:nth-child(1) {
transform: rotate(45deg)
}
.header-hamburger:hover span:nth-child(2) {
transform: scaleX(0);
opacity: 0;
}
.header-hamburger:hover span:nth-child(3) {
transform: rotate(-45deg)
}
I have changed slightly your style.
I move the spans 6px, since now every span is 3px high and the empty space is also 3px
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
}
.header-hamburger {
height: 15px;
width: 20px;
background: #ff0000;
position: relative;
top: 120px;
left: 120px;
transform: scale(10, 10);
}
.header-hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
transition: 250ms;
transition-property: transform, opacity;
}
.header-hamburger span:nth-child(1) {
top: 0px;
transform-origin: center center;
}
.header-hamburger span:nth-child(2) {
top: 6px;
transform-origin: left center;
}
.header-hamburger span:nth-child(3) {
top: 12px;
transform-origin: center center;
}
.header-hamburger:hover span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.header-hamburger:hover span:nth-child(2) {
transform: scaleX(0);
opacity: 0;
}
.header-hamburger:hover span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg)
}
<div class="header-hamburger">
<span></span>
<span></span>
<span></span>
</div>
Modified like this
.header-hamburger span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.header-hamburger:hover span:nth-child(1) {
transform: rotate(36deg);
right: -2px;
}
.header-hamburger:hover span:nth-child(3) {
transform: rotate(-36deg);
right: -2px;
}
.header-hamburger span:nth-child(3) {
top: 12px;
transform-origin: left center;
}
Related
I need to rotate icon to left side. I have example in right side and this is work good but i need also in left side.
Check this ->
https://codepen.io/HektorW/pen/eJMMaR
This is example code ->
.arrow {
cursor: pointer;
height: 120px;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
transition: transform 0.1s;
width: 80px;
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
What i am try ->>>
.arrow {
cursor: pointer;
height: 120px;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(180deg); ADD ROTATE
transition: transform 0.1s;
width: 80px;
}
I am added rotate(180deg) but this is no work property because on click the whole arrow turns to me.
I need arrow top and botton to change
I am also try to set
transform-origin: top left;
Insted transform-origin: top right;
but also is not accurate arrow corner.
Edit:
Also try to no change animation....
You need to add the rotation in the :active class too:
&:active {
transform: translateX(-50%) translateY(-50%) scale(0.9) rotate(180deg);
}
So the rotation keeps taking effect.
Example: CodePen
You can do some small changes to have an arrow that has the animation in the correct direction.
You need to reverse the transform-origin and the transition-delay switching the two would give you an arrow that has a similar animation with the correct origin and format the arrow in the correct way.
body {
background-color: #111;
}
.arrowleft {
cursor: pointer;
height: 120px;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
transition: transform .1s;
width: 80px;
$transition-time: .15s;
&-top,
&-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
&:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all $transition-time;
}
}
&-top {
transform: rotate(45deg);
transform-origin: top left;
&:after {
left: 100%;
right: 0;
transition-delay: $transition-time;
}
}
&-bottom {
transform: rotate(-45deg);
transform-origin: bottom left;
&:after {
left: 0;
right: 100%;
transition-delay: 0s;
}
}
&:hover & {
&-top:after {
left: 0;
transition-delay: 0s;
}
&-bottom:after {
right: 0;
transition-delay: $transition-time;
}
}
&:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
}
https://codepen.io/Kaehler/pen/QWajVgr
I want to make a theme for Youtube using Stylish. Currently, I'm trying to make replace the spinner that appears while buffering with a gif. However, I can't seem to figure out how to properly adjust the size of the gif. I've gotten pretty close but I can't seem to actually resize the gif or move it all the way to the left.
Here's where I got the HTML and original CSS: https://codepen.io/Webevasion/pen/VQEdRd
Here's the CSS I came up with:
.ytp-spinner {
position: relative;
width: 100%;
margin-left: 0;
z-index: none;
pointer-events: none;
}
.ytp-spinner-container {
background: url("url to background here");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: auto;
pointer-events: none;
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
animation: none;
-webkit-animation: none;
}
.ytp-spinner-rotator {
display: none;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.ytp-spinner-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
.ytp-spinner-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.ytp-spinner-left {
right: 0%;
}
.ytp-spinner-right {
left: 0%;
}
.ytp-spinner-circle {
box-sizing: border-box;
position: absolute;
width: 200%;
height: 100%;
border-style: solid;
border-color: #ddd #ddd transparent;
border-radius: 50%;
border-width: 6px;
}
.ytp-spinner-left .ytp-spinner-circle {
left: 0;
right: 0%;
border-right-color: transparent;
-webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.ytp-spinner-right .ytp-spinner-circle {
left: 0%;
right: 0;
border-left-color: transparent;
-webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
#-webkit-keyframes ytp-spinner-linspin {
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes ytp-spinner-linspin {
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes ytp-spinner-easespin {
12.5% {
-webkit-transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
}
}
#keyframes ytp-spinner-easespin {
12.5% {
transform: rotate(135deg);
}
25% {
transform: rotate(270deg);
}
37.5% {
transform: rotate(405deg);
}
50% {
transform: rotate(540deg);
}
62.5% {
transform: rotate(675deg);
}
75% {
transform: rotate(810deg);
}
87.5% {
transform: rotate(945deg);
}
to {
transform: rotate(1080deg);
}
}
#-webkit-keyframes ytp-spinner-left-spin {
0% {
-webkit-transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
}
}
#keyframes ytp-spinner-left-spin {
0% {
transform: rotate(130deg);
}
50% {
transform: rotate(-5deg);
}
to {
transform: rotate(130deg);
}
}
#-webkit-keyframes ytp-right-spin {
0% {
-webkit-transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
}
}
#keyframes ytp-right-spin {
0% {
transform: rotate(-130deg);
}
50% {
transform: rotate(5deg);
}
to {
transform: rotate(-130deg);
}
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
min-height: 250px;
padding-top: 20px;
font-weight: bold;
background: #f0f0f0;
}
.infos {
width: 500px;
text-align: center;
font-family: 'Roboto', Arial;
font-size: 14px;
line-height: 16px;
margin-top: 50px;
color: #000;
}
.infos a {
color: #555;
text-decoration: none;
}
.infos a:hover {color: #999;}
It's currently oversized and only covers half of the gif. Please, how do I make the whole thing show up and fit inside of the video player perfectly. The ratio should be the same as the player already, I just can't figure out how to properly adjust it.
Major issue I had: you have to utilize the existing CSS and alter it rather than delete it. If you don't overwrite it, it'll persist.
Positioning was the issue.
The positioning in the CSS was not optimal. Changing the top, left, and margin properties to 0px and setting the position of the container worked extremely well.
Working CSS:
.ytp-spinner {
border-style: solid;
border-color: lime;
position: static;
left: 50%;
top: 50%;
width: 100%;
margin-left: 0px;
z-index: 0;
pointer-events: none
}
.ytp-spinner-container {
border-style: solid;
border-color: lime;
background: url("url to background here");
background-repeat: no-repeat;
background-attachment: relative;
background-position: center;
background-size: auto;
pointer-events: none;
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 0px;
margin-top: -50%;
margin-left: 0px;
animation: none;
}
.ytp-spinner-rotator {
display: none;
position: absolute;
width: 100%;
height: 100%;
animation: none;
}
.ytp-spinner-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden
}
.ytp-spinner-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden
}
.ytp-spinner-left {
right: 49%
}
.ytp-spinner-right {
left: 49%
}
.ytp-spinner-circle {
box-sizing: border-box;
position: absolute;
width: 200%;
height: 100%;
border-style: solid;
border-color: #ddd #ddd transparent;
border-radius: 50%;
border-width: 6px
}
.ytp-spinner-left .ytp-spinner-circle {
left: 0;
right: -100%;
border-right-color: transparent;
animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.ytp-spinner-right .ytp-spinner-circle {
left: -100%;
right: 0;
border-left-color: transparent;
animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
#keyframes ytp-spinner-linspin {
to {
transform: rotate(360deg)
}
}
#keyframes ytp-spinner-easespin {
12.5% {
transform: rotate(135deg)
}
25% {
transform: rotate(270deg)
}
37.5% {
transform: rotate(405deg)
}
50% {
transform: rotate(540deg)
}
62.5% {
transform: rotate(675deg)
}
75% {
transform: rotate(810deg)
}
87.5% {
transform: rotate(945deg)
}
to {
transform: rotate(1080deg)
}
}
#keyframes ytp-spinner-left-spin {
0% {
transform: rotate(130deg)
}
50% {
transform: rotate(-5deg)
}
to {
transform: rotate(130deg)
}
}
#keyframes ytp-right-spin {
0% {
transform: rotate(-130deg)
}
50% {
transform: rotate(5deg)
}
to {
transform: rotate(-130deg)
}
}
I have a div whose height and width will be dynamic. I'm tring to have an dotted animation border to that div. Problem which i'm facing is animation duration is not relative to the height and width. i.e whatever height and width its animation should be at same speed across all the corners
.dynamic {
position: absolute;
height: 30px;
width: 300px;
overflow: hidden
}
.dynamic::before {
animation: slideDash 2.5s infinite linear;
position: absolute;
content: '';
left: 0;
right: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic::after {
animation: slideDash 2.5s infinite linear reverse;
position: absolute;
content: '';
right: 0;
bottom: 0;
outline: 1px dashed #fff;
left: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic div::before {
animation: slideDashRev 2.5s infinite linear reverse;
position: absolute;
content: '';
top: 0;
bottom: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
height: 200%;
}
.dynamic div::after {
animation: slideDashRev 2.5s infinite linear;
position: absolute;
content: '';
top: 0;
bottom: 0;
outline: 1px dashed #fff;
right: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
height: 200%;
}
#keyframes slideDash {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0%);
}
}
#keyframes slideDashRev {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0%);
}
}
<div class="dynamic">
<div></div>
</div>
Just correcting the direction of the animation
.dynamic {
position: relative;
width: 300px;
height: 30px;
overflow: hidden;
color: red;
}
.dynamic .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.dynamic .line:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(1) i, .dynamic .line:nth-of-type(3) i {
-webkit-animation: move 2.5s infinite linear reverse;
animation: move 2.5s infinite linear reverse;
}
.dynamic .line:nth-of-type(2) i, .dynamic .line:nth-of-type(4) i {
-webkit-animation: move 2.5s infinite linear;
animation: move 2.5s infinite linear;
}
.dynamic .line i {
left: 0;
top: 0;
width: 200%;
display: block;
position: absolute;
border-bottom: 1px dashed;
}
.dynamic .text {
width: 100%;
line-height: 30px;
display: block;
text-align: center;
position: absolute;
font-size: 18px;
}
#-webkit-keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
<body>
<div class="dynamic">
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="text">Same Direction!!</div>
</div>
</body>
Try below snippet.
.dynamic {
position: relative;
width: 300px;
height: 30px;
overflow: hidden;
color: green;
}
.dynamic .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.dynamic .line:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: -164px;
/* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
margin-left: 164px;
/* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line i {
left: 0;
top: 0;
width: 200%;
display: block;
position: absolute;
border-bottom: 1px dashed;
-webkit-animation: move 2.5s infinite linear reverse;
animation: move 2.5s infinite linear reverse;
}
.dynamic .text {
width: 100%;
line-height: 30px;
display: block;
text-align: center;
position: absolute;
font-size: 18px;
}
#-webkit-keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
<body>
<div class="dynamic">
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="text">Some text here</div>
</div>
</body>
.dynamic {
position: absolute;
height: 50px;
width: 50px;
overflow: hidden
}
Having the same dimensions for the height and and width makes the animation speed the same.
Note: You can replace the 50 with any dimension of your choice.
I'm trying to create a circular menu with 6 radials using html and css. I only get 5 of the 6 total radials (borders). I need get the last radial, between item5 and item6. I need get the same of the picture:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
overflow: hidden;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I figured out a simple problem to get your line break in, albeit it is a little odd.
All I did was add an additional item without any content and then rotated it, gave it a background and transformed it into place.
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
width: 1px;
height: 70px;
left: 68px;
top: 81px;
jsFiddle demo
The reason why you didn't have a white border there is because your item6 was rotated so it lined up with your item1, instead of it being rotated so it created the border between item5 and item6.
I tried rotating item6 so it created the border between itself and 5, but it caused it to overlap with item1, which just caused a never ending z-index loop in order to solve it
I'm trying to create a circular menu with radials using html and css, but the white borders are not built well. And it is not look fine in google chrome (not like a circle). I need get the last white radial, between item5 and item6. I have tried the next code:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
/*overflow: hidden;*/
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I need get the six borders like this image :
Help, please!
Your border-radius was defined in px instead of %
JSfiddle
#menu {
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
This is the reason it's not being a circle in Chrome:
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
You're defining a different border radius for Webkit and Mozilla than for everyone else. Use the same value in all three styles.
Also:
border-radius: 50%;
...will get you a circle no matter the size of the element.