I have a simple arrow which is like this:
>
and on hover I want it to expand to look like this:
->
of course without the gap between them.
This has to be a transition + animation between them to be smooth. Here's what I have so far
My Work
body,
html {
margin: 0;
padding: 0;
max-width: 100%;
max-height: 100%;
overflow-x: hidden;
position: relative;
background-color: black;
}
.button {
display: inline-block;
vertical-align: middle;
border-radius: 50%;
margin: 6em 0 0;
padding: 0;
text-align: center;
}
.left {
display: inline-block;
width: 3em;
height: 3em;
border: 0.5em solid #333;
border-radius: 50%;
margin-right: 1.5em;
}
.left:after {
content: '';
display: inline-block;
margin-top: 0.90em;
margin-left: 0.6em;
width: 0.8em;
height: 0.8em;
border-top: 0.5em solid #333;
border-right: 0.5em solid #333;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.right {
color: white;
display: inline-block;
width: 3em;
height: 3em;
border: 0.5em solid #333;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 0.90em;
margin-left: -0.6em;
width: 0.8em;
height: 0.8em;
border-top: 0.5em solid #333;
border-right: 0.5em solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.right:hover {
content: '';
display: inline-block;
margin-top: 0.90em;
margin-left: -0.6em;
width: 2em;
height: 2em;
border-top: 0.5em solid #333;
border-right: 0.5em solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<body>
<div class="button">
<span class="left"></span>
</div>
<div class="button">
<span class="right"></span>
</div>
</body>
Any ideas how can I achieve smooth transition and animation from between those 2 arrows?
Well, hope this help. I did it by insert another pseudo class onhover of your right class.
.right:hover:before {
content: '';
height: 0.5em;
width: 1.4em;
background-color: #333333;
display: inline-block;
transform: translate(6px,-6px);
max-width: 2em;
transition: 0.5s all ease-in-out;
}
.right:before {
content: '';
transition: 0.5s all ease-in-out;
max-width: 0em;
}
If you insert this, you must remove .right:hover. Check this pen.
Related
The screenshot attached explains everything about the desired effect. I was thinking to decrease the border width from 4px to 3px to 2px , I don't want to apply ease-in/ease out effect. As of now, when I hover, it looks like this. I want to change this box through the effect displayed in the first screenshot.
For reference,
I am posting the code below:
&__link {
#include font-text(default, menuitem);
#include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
#include font-text(default, menuitem);
#include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&:after represents the code for the box. Thanks in advance.
<div class="box">
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
text-decoration: none;
background-color: white;
background-image: linear-gradient(#000, #000);
border: 1px solid black;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: .5s;
}
.box:hover {
background-size: 95% 95%;
}
Didnt understand the question too well but this does the attached screenshot animation
Try it - you need to set animations, bcz you want several situations for single event (hover)
Replace these blocks
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 0px;
height: 0px;
top: -1px;
background: white;
border: 7px solid #fff;
}
&:hover:after {
animation: sqr .3s linear;
animation-fill-mode: forwards;
}
#keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px; height: 3px;
background: black;
}
80%{
border: 4px solid #fff;
width: 6px;
height: 6px;
background: black;
}
100%{
border: 3px solid #fff;
width: 8px;
height: 8px;
transform: scale(1.5);
box-shadow: 0 0 5px 2px #fff;
background: black;
}
}
I don't know but for some reasons, transition doesn't seem to be working. I am testing this Google Chrome.
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:hover:before {
transform: translate(-50%, 0);
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
}
[data-title]:hover:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
Can anyone help where I am going wrong or am I missing something?
I have even tried to make transition timing to +1 seconds but still it doesn't reflects the same.
You have not set anything for the original state so the transition doesn't know what to go from. If you are only wanting to transition the item's appearance - eg fade in or out, then you need to do something like transition the opacity:
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:before {
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:hover:before,
[data-title]:hover:after {
opacity: 1;
pointer-events: auto;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
If you want something to transition from one state to another, you have to define both states. This means having a base-style and a :hover-style.
For example:
.test {
width: 100px;
height: 50px;
background: red;
transition: all 2s;
}
.test:hover {
height: 100px;
}
<div class="test">test</div>
This works, because there is an initial state for the height attribute. This however:
.test {
width: 100px;
background: red;
transition: all 2s;
}
.test:hover {
height: 300px;
}
<div class="test">test</div>
This will not work, because the browser doesn't have a specified height as an initial state.
I'm trying to make a box that the bottom right border has to be a diagonal line, like in the image below:
Has anyone an idea of how can I do it without using a background image?
Example 1 - link
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px 60px;
}
.btn,
.btn span{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
color: #e74c3c;
font: bold 18px/100px'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
overflow: hidden;
padding: 2px;
}
.btn span {
width: 100%;
height: 100%;
}
.btn:before,
.btn span:before{
content:'';
position: absolute; right: -500%;
width: 1100%;
height: 1100%;
background: #c00;
z-index: -1;
}
.btn:hover span{
color: #000;
}
.btn:hover:before{
background: #000;
}
/* ----- btn-left-top ----- */
.btn-left-top:before,
.btn-left-top span:before{
top: 20px;
transform-origin: 46% top;
transform: rotate(-45deg);
}
.btn-left-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-left-bottom ----- */
.btn-left-bottom:before,
.btn-left-bottom span:before{
bottom: 20px;
transform-origin: 46% bottom;
transform: rotate(45deg);
}
.btn-left-bottom span:before{
bottom: 19px;
background: #fff;
}
/* ----- btn-right-top ----- */
.btn-right-top:before,
.btn-right-top span:before{
top: 20px;
transform-origin: 54% top;
transform: rotate(45deg);
}
.btn-right-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-right-bottom ----- */
.btn-right-bottom:before,
.btn-right-bottom span:before{
bottom: 20px;
transform-origin: 54% bottom;
transform: rotate(-45deg);
}
.btn-right-bottom span:before{
bottom: 19px;
background: #fff;
}
<a href="#" class="btn btn-left-top">
<span>btn-left-top</span>
</a>
<a href="#" class="btn btn-right-top">
<span>btn-right-top</span>
</a>
<a href="#" class="btn btn-right-bottom">
<span>btn-right-bottom</span>
</a>
<a href="#" class="btn btn-left-bottom">
<span>btn-left-bottom</span>
</a>
Example 2 - link
* {
margin: 0;
padding: 0;
}
body {
padding: 20px 60px;
}
.btn{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
border: 4px solid #e74c3c;
color: #e74c3c;
font: bold 18px/100px 'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.btn > span:before {
content: '';
position: absolute; bottom: 12px; right: 9px;
width: 66px;
height: 66px;
transform: rotate(45deg);
z-index: 1;
border-right: 4px solid #e74c3c;
}
.btn:before,
.btn:after{
content: '';
position: absolute; bottom: -4px; right: -4px;
}
.btn:before{
width: 47px;
height: 0;
border-bottom: 4px solid #fff;
}
.btn:after{
width: 0;
height: 47px;
border-right: 4px solid #fff;
}
.btn:hover{
border: 4px solid #4169E1;
color: #4169E1;
}
.btn:hover > span:before{
border-right: 4px solid #4169E1;
}
<a href="#" class="btn">
<span>test</span>
</a>
Fiddle
Check this out it may help you click
HTML
<div class="blockHead">
<span class="blocktext">
ABC Team
</span>
</div>
CSS
.blockHead:after {
color:#4D81BF;
border-left: 20px solid;
border-top: 20px solid;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
}
.blockHead {
background-color:#4D81BF;
/*width: 150px; */
height: 40px;
display: inline-block;
position: relative;
}
.blocktext{
color:white;
font-weight:bold;
padding:0px 40px 0px 10px;
font-family:Arial;
font-size:11;
line-height:2.5;
}
Basically, the image below summarizes my question.
Is there any elegant solution to make it work? I've tried to use rotate, skew and perspective, but didn't work for me.
Note: the background needs to be transparent.
My code for you. :)
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
background: #0f0;
height: 370px;
left: 20px;
padding-top: 10px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
color: #fff;
display: block;
height: 60px;
padding-top: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
}
.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
Here's what I changed your css to make it look like your picture and do the correct hover effect:
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 20px;
padding-top: 5px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
color: #fff;
display: block;
height: 65px;
margin: 0 auto;
padding: 0;
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
line-height: 5;
font-size: 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: border-bottom-color 500ms;
}
.abduction a:nth-child(5){
width: 94px;
}
.abduction a:nth-child(4){
width: 88px;
}
.abduction a:nth-child(3){
width: 82px;
}
.abduction a:nth-child(2){
width: 76px;
}
.abduction a:nth-child(1){
width: 70px;
}
.abduction a:nth-child(even) { border-bottom-color: #00d900; }
.abduction a:hover { border-bottom-color: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
So basically to create a 65px high trapezoid with borders (colored #0f0) you'd do this:
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
The width of the last element is 100px. So since the left border width + the right border width = 6px and 100px - 6px = 94px, the second to last element will have a width of 94px to match the top of the last element. You subtract the side border sum from the previous elements width to get the current element width.
Also the transition property needs to be changed to border-bottom-color instead of background because border-bottom-color is what sets the color of the trapezoid.
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 15px;
padding-top: 10px;
position: absolute;
top: 50px;
width: 110px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 400px solid #0f0;
}
.abduction a {
color: #fff;
display: block;
height: 60px;
padding-top: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
}
.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
I'm pretty sure you need javascript for that.
jQuery(document).ready(function(){
var buttons = [{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'}];
var b;
for(b in buttons){
var rev = buttons.length - (b*10);
var btn = jQuery(''+ buttons[b].name + ' ' + b +'').css({left:rev/2, width:100 - rev} );
jQuery('.abduction').append(btn);
}
});
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 20px;
padding-top: 10px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
display:block;
position:relative;
color: #fff;
display: block;
height: 60px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
border-bottom:80px solid #0f0;
border-left:5px solid transparent;
border-right:5px solid transparent;
}
.abduction a:nth-child(even) { border-bottom: 80px solid #00d900; }
.abduction a:hover { border-bottom: 80px solid #008c00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spaceship">
<div class="abduction">
</div>
</div>
.
Here is my link http://jsfiddle.net/ashadee/xhaLqvav/.
Html code
Eat your lunch<br>
CSS
a{
font-size: 1.2em;
white-space: normal;
}
a.rectangle
{
width: 70%;
height: 5%;
border: 1px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
}
how will I make the design like the one in the image? Should I use canvas property.
demo - http://jsfiddle.net/victor_007/xhaLqvav/2/
use pseudo element :after and :before for styling right box and rounded
a {
font-size: 1.2em;
white-space: normal;
}
a.rectangle {
width: 70%;
height: 5%;
border: 2px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-size: 32px;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
position: relative;
}
a:before {
content: '';
border-right: 2px solid black;
height: 100%;
position: absolute;
background: orange;
width: 50px;
top: 0;
bottom: 0;
left: 0;
}
a:after {
content: '';
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
position: absolute;
left: 35px;
top: 50%;
transform: translatey(-50%)
}
Stanford
<br>