The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>
Related
I want to make a rotated animation of a font icon, but I can not let the center be the right place, The rotation is always offset a little.
Here is the example:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
JSFiddle : https://jsfiddle.net/217z69sm/2/
It seems like font-awesome are aware of this, and there suggestion seems to be to switch to the svg version, or to use display: block:
Icon Animation + Wobbles
We’ve worked hard to keep icons perfectly
centered when they are spinning or pulsing. However, we’ve seen issues
with several browsers and the web fonts + CSS version of Font Awesome.
Through a lot of investigation this appears to be an issue with web
fonts in general and not something we can directly fix. We do have a
couple of ways you might be able to work around this:
Switch Frameworks - Switch to the SVG with JavaScript version, it’s
working a lot better for this. Set the display of the animating icon -
Use display: block; where you can. This seems to help a lot with this
issue.
Taken from https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
I can't say that I can see the difference which using display: block gives here, perhaps others can spot it or add an explanation of why it might help:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#block {
display: block;
}
.two {
left: 75px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
<div class="container two"><div class="inner"><i class="fas fa-adjust" id="block"></i></div></div>
I analysis that the icon has some unbalance margins, which is creating a little offset when we try to rotate it.
here, I remake the same icon,
check if it works for you.
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:300px;
}
.inner {
padding: 2px;
animation-timing-function: linear;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.rot{
border: 10px solid black;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to left,black 0%, black 50%, white 50%,white 100%);
}
<div class="container">
<div class="inner">
<div class="rot">
</div>
</div>
</div>
So I am trying to implement a hover state animation for some text on my portfolio website. In short, the text needs to animate from black or white ( can change ), to white, to blue.
I've tried using something like the following
#keyframes textAnimation {
0% {
color: inherit
}
50% {
color: white
}
100% {
color: blue
}
}
However, because it's a hover animation - if I stop hovering, the animation cuts and it reverts to its previous value. I have an accompanying animation ( Purely CSS ) to go along with the hover, so I need it to basically reverse the animation back to the original value.
I've also tried adding classes to the <span> using setTimeout... however this is quite an intensive page as it is, and from past experiences, mixing JS + CSS this way - and have the timings be perfect - is super hard on lower-end machines.
P.S I'm using React.js
Any thoughts would be greatly appreciated.
You can try gradient coloration with transiton:
.text {
background-image:
linear-gradient(to bottom, currentcolor , white, blue);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
background-size:100% 1000%;
background-position:top;
background-repeat:no-repeat;
font-size: 70px;
transition:1s all;
}
.text:hover {
background-position:bottom;
}
body {
background:pink;
}
<span class="text" style="color:red">Some text</span>
<span class="text" style="color:black">Some text</span>
Here the color changes from white to blue to black but you can use any colors. It's very difficult to reverse animations only by CSS so a little js help goes a long way. Hope that helps you!
let node = document.getElementsByClassName("notesColor1"); //returns an array of all matching elements
node[0].addEventListener("mouseover",function(){
node[0].classList.add("forward");
node[0].classList.remove("backward");
});
node[0].addEventListener("mouseout",function(){
node[0].classList.add("backward");
node[0].classList.remove("forward");
});
.notesColor1{
color:white;
background-color:grey;
font-size:2rem;
}
.forward{
animation:anim 1s ease forwards;
}
.backward{
animation:anim-reverse 1s ease;
}
#keyframes anim{
0%{
color:white;
}
50%{
color:blue;
}
100%{
color:black;
}
}
#keyframes anim-reverse{
0%{
color:black;
}
50%{
color:blue;
}
100%{
color:white;
}
}
<div class='notesColor1'>notest1</div>
You can add a simple js that on hover event check: if it has a class a remove it and add
class b else remove class b and add class a.
I've been trying to come up with a solution to this design issue, which seems simple but it's perplexing me.
I have content fixed to the bottom of the screen - some of it is always present, some is hidden from time to time.
The crux is that I want the content above to drop down. I have had some success with javascript but its not perfect. The nearest I've got so far is using max-height.
https://jsfiddle.net/6jax19gf/29/
The fiddle is a working representation of what I'm trying to achieve using max-height. However, max height isn't ideal because much of the content is dynamic.
I'd like to come up with a better solution that isn't hard-coded using max-height.
#fixed-footer {
position:fixed;
left:0;
bottom:0;
width:100%;
}
#fixed-footer-floating {
padding:0 16px;
margin-bottom:16px;
box-sizing:border-box;
}
.fab-button {
background-color:lime;
display:inline-block;
height:40px;
width:40px;
border-radius:50%;
}
#fixed-footer-auto {
background-color:red;
color:white;
text-align:center;
transform: translateY(0);
transition: max-height 0.2s ease-out;
max-height: 76px;
}
.some-content {
padding:14px 16px;
box-sizing:border-box;
}
#fixed-footer:hover #fixed-footer-auto {
transform: translateY(100%);
transition: transform 0.2s ease-in, max-height 0.4s 0.2s ease-out;
max-height: 0;
}
<div id="fixed-footer">
<div id="fixed-footer-floating">
<a class="fab-button"></a> This content always floats above the red box!
</div>
<div id="fixed-footer-auto">
<div class="some-content">This area is responsive so may expand or contract vertically depending on the screen size and page state. It's content can be made to made disappear completely on certain events.</div>
</div>
</div>
Hover over the bottom red area to make the content disappear. This would usually be triggered using javascript.
I'm only using a very small portion of the jQuery library: just the hide() and show().
I have seen threads that has made the equivalent in javascript but the animation on the jQuery version is really nice. I don't know if it possible just to have the jQuery code for that only.
The best (also as far as performance goes) practice for a simple show/hide feature is to introduce a CSS class, like
.hidden {
display: none !important;
}
And if you have this class, you can toggle it on an element using the classList property. Here are some usages.
element.classList.remove("hidden");
element.classList.add("hidden");
element.classList.toggle("hidden");
One of the biggest advantage is that you won't loose the original display. If you have defined for example inline-block, then using the block/none CSS approach will reset your display to block.
Use simple Javascript to show and hide.
<div id="mydiv"></div>
Set property display as none to hide the div
document.getElementById("mydiv").style.display="none";
Set property display as block or any other to show the div
document.getElementById("mydiv").style.display="block";
Here's some CSS animation using a checkbox, a label, and a list, using:
transition
transform: scaleY
opacity
max-height
The rulsets can be applied to accentuate jQuery/JavaScript animations as well.
SNIPPET
dl {
opacity: 0;
max-height: 0;
border: 3px ridge grey;
transition: opacity 1.6s, max-height 1s, transform 1s;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
label {
cursor: pointer;
}
#list1 {
display: none;
}
#list1:checked + dl {
opacity: 1;
max-height: 2000px;
border: 3px ridge grey;
transition: opacity 1.6s, max-height 1s, transform 1s;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<label for='list1'>List</label>
<input id='list1' type='checkbox'>
<dl>
<dt>Title</dt>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
<dd>Item</dd>
</dl>
What I am trying to achieve is so that a marquee plays once when I click the button. My problem is that if I set the loop to 1 then it only plays once and then does nothing. My other problem is that it stops midway with my current code if I let go of the left mouse button. Or it stops where it was. Is there any way to make it either play once when the button is pressed and then play again whenever the button is pressed again and allow it to complete the loop completely. Here is the code, I am open to using java script instead of html. Here is my current code:
<marquee behavior="scroll" direction="up" scrollamount="30" id="marquee" height="40">
<p>+1</p>
</marquee>
<input type="button" id="gather" class="build" Value="play" onmousedown="document.getElementById('marquee').start()." onmouseup="document.getElementById('marquee').stop()" onload="document.getElementById('marquee').stop()">
You can use CSS keyframes and JQuery (or Javascript) in order to accomplish that.
In the example below, I'm using CSS rules to achieve the animation effect, and applying it adding/removing the span element from te DOM using JQuery.
Code example:
var marquee = '<span class="anim">+1</span>';
$('.btn').click(function(){
$('.anim').remove(); //remove the node if its there
$('.marquee').append(marquee); //append the node
});
.marquee{
width: 20px;
height: 20px;
overflow:hidden;
}
.marquee > span {
position:relative;
top:-100%;
left:0;
}
.anim{
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0%,100% {
opacity:0;
top:100%;
}
50% {
opacity:1;
top:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee"></div>
<button class="btn">Click here!</button>
Are you willing to use pure CSS?
It seems like you want a "+1" counter on click. You can accomplish this using CSS transitions. I'm going to use an anchor rather than an input, because you have more control over styling it.
You'll probably want to add some movement to it, change the timing, maybe swap linear to ease-out, but this is a starting point. Please consider it a proof of concept.
HTML:
a.play {
padding:6px 8px;
border-radius:4px;
background:#ccc;
border:1px solid #bbb;
text-decoration:none;
color:#111;
position:relative;
}
a.play:focus:before,
a.play:active:before {
Content:"+1";
position:absolute;
top:-16px;
left:6px;
color:#006699;
font-weight:bold;
-webkit-animation: fadeinout 1.3s linear forwards;
animation: fadeinout 1.3s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
10% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
10% { opacity: 1; }
}
<div style="height:60px;"></div>
Play