I am trying to rotate an arrow in a css button but I can't proceed without rotating the whole button...
The point is to make a download button from an upload button. How can I rotate only the arrow?
The button:
body {
background: #2d3e4f;
}
.cntr {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.upload {
display: block;
width: 40px;
height: 50px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #e64d43;
cursor: pointer;
}
.upload:after {
content: '';
position: absolute;
display: block;
top: 0px;
right: 0px;
width: 0px;
height: 0px;
-webkit-border-radius: 0px 2px 0px 2px;
border-radius: 0px 2px 0px 2px;
background: -webkit-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: -moz-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: -o-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: -ms-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.upload i {
width: 2px;
height: 14px;
background: #fff;
display: block;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
-ms-transition: all 150ms linear;
transition: all 150ms linear;
}
.upload i:before,
.upload i:after {
content: '';
position: absolute;
display: block;
width: 2px;
height: 8px;
background: #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
-ms-transition: all 150ms linear;
transition: all 150ms linear;
}
.upload i:before {
-webkit-transform: rotate(45deg) translateX(-3px);
-moz-transform: rotate(45deg) translateX(-3px);
-o-transform: rotate(45deg) translateX(-3px);
-ms-transform: rotate(45deg) translateX(-3px);
transform: rotate(45deg) translateX(-3px);
}
.upload i:after {
-webkit-transform: rotate(-45deg) translateX(3px);
-moz-transform: rotate(-45deg) translateX(3px);
-o-transform: rotate(-45deg) translateX(3px);
-ms-transform: rotate(-45deg) translateX(3px);
transform: rotate(-45deg) translateX(3px);
}
.upload:hover i {
height: 18px;
}
.upload:hover:after {
width: 12px;
height: 12px;
}
There are several more efficient ways to do this.
a) Skip all that and use a tool to create an alternate button image with original image rotated 180 degrees.
b) Use one of the NUMEROUS Unicode characters for it instead. See this wikipedia page: http://en.wikipedia.org/wiki/Arrow_(symbol)
Related
Good afternoon.
I'm having a problem changing the background color of the checkboxes that are selected.
CheckBox to change
I've seen options on the internet and some questions right here in the stack. But none of them were successful. Below is the DOM image where the elements are inserted.
Dom about element
The last code I tested was this and it still didn't work
input[type=checkbox]:checked:after{
background-color: red !important;
color: blue !important;
}
Aimed to have a background in this color # FFEA00 when checked and the arrow to be # 000 when checked.
Best regards and thanks for the help
Yellow background when checked, black arrow when checked. It's here:
.checkbox-label {
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 24px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .checkbox-custom {
position: absolute;
top: 0px;
left: 0px;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border: 2px solid #000;
}
.checkbox-label input:checked ~ .checkbox-custom {
background-color: #FFEA00;
border-radius: 5px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid #000;
}
.checkbox-label .checkbox-custom::after {
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity:1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity:1;
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid #000000;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
<div class="checkbox-container">
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
</label>
</div>
I have a little problem with my CSS file. I try to make an icon that scale to infinite (works), and when I click on icon, an animation rotate the parent to 90deg and the icon rotate to 45deg (works). But, if I combine the 2 behavior, the rotate of icon break. I want rotate the icon of 45deg, and keep the animation.
A demo example: https://codepen.io/KevinPy/pen/ooEbKY?editors=1100
In my demo, the first occurence works with the rotate to 45deg. The second occurence add the animation (via class), but the rotate is break.
Thank you for your answers.
HTML
<div id="first"><span>+</span></div>
<div id="second"><span class="anim">+</span></div>
SCSS
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
&::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
&.open {
transition: .2s transform linear;
transform: rotate(90deg);
span {
transition: .2s transform linear;
transform: rotate(-45deg);
}
}
&.close {
transition: .2s transform linear;
transform: rotate(0deg);
span {
transition: .2s transform linear;
transform: rotate(0deg);
}
}
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
animation: keyAnim 3.4s linear infinite;
transform-origin: 50%;
}
#keyframes keyAnim {
0%, 100% {
transform: scale(1);
}
35%, 65% {
transform: scale(1.2);
}
50% {
transform: scale(1.5);
}
}
Your animation overrides the transform attribute. You could add a surrounding element:
var first = document.querySelector('#first');
first.onclick = function(event) {
if (first.classList.contains('open')) {
first.classList.remove('open');
first.classList.add('close');
} else {
first.classList.add('open');
first.classList.remove('close');
}
};
var second = document.querySelector('#second');
second.onclick = function(event) {
if (second.classList.contains('open')) {
second.classList.remove('open');
second.classList.add('close');
} else {
second.classList.add('open');
second.classList.remove('close');
}
};
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
}
div::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
div.open {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
div.open .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div.close {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
div.close .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
-webkit-animation: keyAnim 3.4s linear infinite;
animation: keyAnim 3.4s linear infinite;
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
#-webkit-keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
#keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
<div id="first"><span class="anim_wrap">+</span></div>
<div id="second"><span class="anim_wrap"><span class="anim">+</span></span></div>
Despite using normalize.css when I try to make this navigation icon, originally from Jesse Couch, thinner, then after the transition the span tags seems to get a second effect applied to them, making them a tiny tad more thinner. Why is this happening? Sorry I cannot really word this better but please see for yourself. Firefox version 28 up to 50 shows this effect, Chrome latest version however does not and not tested this in Opera or IE11/Edge.
* {
margin: 0;
padding: 0;
}
/* normalize.css included */
#nav-icon {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
/* When I change the default value of 9px to something lower there is a strange "thinning" effect visible on the span tag after about half a second, why?*/
#nav-icon span {
display: block;
position: absolute;
height: 5px; /* 9px is the default value, lowering this has a strange after effect on the span tags, why? */
width: 100%;
background: #d3531a;
border-radius: 5px; /* 9px is the default value, lowering this has a strange after effect on the span tags, why? */
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 18px;
}
#nav-icon span:nth-child(4) {
top: 36px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
I have this code:
#mixin fade-transition($element) {
-webkit-transition: $element 0.15s ease-in-out;
-moz-transition: $element 0.15s ease-in-out;
-ms-transition: $element 0.15s ease-in-out;
-o-transition: $element 0.15s ease-in-out;
transition: $element 0.15s ease-in-out;
}
body {
background: grey;
font-family: "Arial";
background-size: cover;
}
a {
display: inline-block;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
color: #FAFAFA;
border: 3px solid #FAFAFA;
padding: 25px;
position: absolute;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
background: rgba(0,0,0,0.5);
#include fade-transition(background);
&:hover {
background: rgba(8,97,76,0.6);
}
}
It's just the part of the code, when I hover the button nothing happens. I know that the :&hover line is not recognized but why is that? I wasn't able to see what's wrong
Thank you for your time.
I am trying to use this loader in my web site, scc animation works well in Firefox & IE but doesn't work in Google Chrome.
#loader{
width: 820px;
height: 670px;
border: none;
overflow: hidden;
margin: 0px 70px;
background: #0d8aa5;
position: relative;
}
#innerloader{
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
}
#innerloader: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;
-webkit-animation: rotate 2s infinite linear;
-moz-animation: rotate 2s infinite linear;
-ms-animation: rotate 2s infinite linear;
-o-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
HTML
<div id="loader"><div id="innerloader"></div></div>
P.S. Here it's working correctly also in google chrome....
You need to include the prefixed keyframe rule for WebKit browsers as well.
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}