Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
There is this cool effect I came across online:
https://www.bnkle.com/
When you click the search bar a red line appears just under it making it look modern, sleek, etc.
How can I achieve this effect with pure css / js?
Try
.box { transition: 1s; outline: none; border: 1px solid #ddd }
.box:focus { border-bottom-color: red; }
<input class="box">
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
When I hover on card Background I want to change Background color and text color. How can I do this ? Please help
you should use the pseudo class :hover
.card {
background-color: black;
color: white;
}
.card:hover {
background-color: white;
color: black;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
how to write a transition in vue to shrink an element to 0px on disappear, and expand it to auto-height when disappear. Much like with opacity 0 - 1;
<transition name="shrink">
..
</transition
You couldn't animate height but you could do that using max-height :
.shrink-enter-active,
.shrink-leave-active {
transition: all 0.5s ease-out;
max-height: 400px;
}
.shrink-enter,
.shrink-leave-to {
max-height: 0;
}
this is inspired by my sidebar component here and the code is here
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
How do I apply 2 different CSS transforms to a single HTML element with different transform-origin for each?
You would need to work out the matrix value for each and then add them together using matrix mathematics. Their are some online calculators that can help with this
http://angrytools.com/css-generator/transform/
Set two DOM's of the same size, Set transform-origin for each individually
div{
height: 300px;
width: 300px;
}
.origin1 {
background-color: orange; /*Set to transparent*/
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
.origin2 {
background-color: blue;
transform-origin: 300px 300px;
transform: rotate(45deg)
}
<div class="origin1">
<div class="origin2"></div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I've been looking online for this kind of effect for long time without having success.
It looks like there is a js script that changes dynamically the css -webkit-transform: rotateY(deg) property.
Is there anything online that does the same thing?
I hope somebody can share a similar script thanks.
If there is enough space it shows the boxes with no rotation:
If there isn't enough space the script changes the rotation and get them closer to each other:
Your example looks like a y-rotation. Heres a basic snippet of it.
body {
display: flex;
}
div {
width: 150px;
height: 150px;
background: url('https://picsum.photos/200?random');
transition-duration: .35s;
box-shadow: -3px 3px 3px #000;
}
div:hover {
transform: rotateY(70deg);
transition-duration: .35s;
}
<div></div>
<div></div>
<div></div>
If you're looking for a library that can rotate or animate HTML Elements you can use animate.css. It's easy to use !!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am new to javascript I am pretty confused with this drag n drop operation .I wanted to like medium.com
Like this.
GIF
I am building an content Editor with draft js , And
I don't have any idea how to do this in javascript.
Thanks in advance...
You need to use dragEnter as an event to add css to the area. There are a lot of ways to do it.
<div ondragenter="dragEnter()" class="div1" id="test" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
And then in the js
function dragEnter(e){
var thing = document.getElementById('test');
thing.classList.add('div2');
}
your css would look like this
.div1 {
width: 350px;
height: 70px;
padding: 10px;
}
.div2 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
Here is a jsfiddle example.
http://jsfiddle.net/camccar/afPrc/197/