I have button transformation on hover in my custom stylesheet. It allows me to create button from <a href> or <div>. During this transformation font is blinking in strange way. Could you kindly tell me why and how to solve it?
Here is the scss code:
https://gist.github.com/rafpiek/7e1b2df5690baa3b02e88eee10adfb98
and the video:
https://www.youtube.com/watch?v=4c4D96FukuQ&feature=youtu.be
.button {
text-decoration: none;
color: #ECECEC;
font-size: 20px;
height: 40px;
width: 100px;
background: #B3595F;
display: inline-block;
transition: all 0.30s linear;
display: flex;
justify-content: center;
align-items: center;
margin: 5px 3px;
cursor: pointer;
border-radius: 6px;
user-select: none;
font-weight: bold;
}
.button:-webkit-any-link {
color: #ECECEC;
}
.button:hover {
transform: scale(1.07);
color: #ECECEC;
}
.button:active, .button:focus, .button:visited {
text-decoration: none;
color: #ECECEC;
}
.button.blue {
background-color: #2C92FF;
}
.button.red {
background-color: #FF2113;
}
.button.green {
background-color: #1EBE32;
}
<button class="button">button</button>
Try this in .button:
-webkit-font-smoothing: antialiased;
This is caused AFAIK from the browser changing the text antialias type during the animation (new GPU implicit layer).
More info on causes and fixes here -> How to prevent Webkit text rendering change during CSS transition
Can be reduced using perspective and 3d scale:
transform: perspective(1px) scale3d(1.07,1.07,1);
Related
Using just CSS, I have been working on the login section of my site. I love offering visual feedback for each state anything is on on the page, whether you've clicked it, hovered over it, then depending on what state it is, such as invalid, disabled, or whatnot, however when using the browsers autofill, this is playing havoc on, my thought to be completed section!
I am using Google Chrome, always the latest version.
How It Currently Works
Disabled
No input focus
Enter button has disabled styling
Default
Focus changes input styles
Entering text will change Enter styles
Button has :hover and :active styles for this state
Active - This is when something has been entered and you focus out
Input border and label text color property changes, different to not having any text inputted.
What The Problem Is
I have been attempting to have all current styles and methods stay whilst you use the browser's autofill. I have almost got this completely working, but I am facing these problems:
using autofill...
When you hover over the autofill list, it previews this within the input area which seems to be a state that I do not know how to yet style. Once you click to chose the autofill option, the font-size then adjusts, however all other styles work instantly with the following
.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
transition: all 600000s 0s;
}
After using autofill & focus out
The focus out styles stop working IF it is an auto filled object only, you can delete and enter your own which shows the correct behaviour. Only the label is working when you focus out after autofilling.
body {
padding: 0;
margin: 0;
line-height: 24px;
font-family: "Tahoma", Helvetica, Arial;
font-size: 12px;
background: #1c1e2f;
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
outline: none;
padding: 0px;
margin: 0px;
}
.container {
position: relative;
background-color: #222437;
background-clip: border-box;
border: 1px solid #313452;
border-radius: 6px;
color: white;
margin-bottom: 15px;
}
.justify-content-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center ;
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
button {
border: none;
padding: 0px;
margin: 0px;
background: none;
cursor: pointer;
}
.auth {
width: 300px;
padding: 15px;
}
.auth input[type="text"] {
display: block;
border: 1px solid #313452;
font-size: 20px;
color: #1864c9;
width: 100%;
height: 55px;
padding: 0 15px;
margin-bottom: 10px;
position: relative;
z-index: 2;
background-color: transparent;
outline: none;
border-radius: 5px;
}
.auth .inputs {
position: relative;
margin: 16px 0 0 0;
}
.auth .input-label {
position: absolute;
top: 15px;
font-size: 1.1rem;
left: 14px;
color: rgb(122, 122, 122);
font-weight: 100;
transition: 0.1s ease;
background-color: #222437;
padding: 0 5px;
}
.auth label:before { display: none; }
.auth input[type="text"]:focus ~ .input-label {
top: -12px;
color: #1864c9;
font-size: 13px;
background-color: #222437;
z-index: 2;
}
.auth input[type="text"]:target ~ .input-label {
top: -7px;
color: #1864c9;
font-size: 13px;
z-index: 2;
}
.auth input[type="text"]::placeholder { opacity: 0; }
.auth input[type="text"]:not(:placeholder-shown) { border: 2px solid rgba(26,115,232,0.25); }
.auth input[type="text"]:not(:placeholder-shown):focus { border: 2px solid rgba(26,115,232,1.00); }
.auth input[type="text"]:not(:placeholder-shown) ~ .input-label {
top: -12px;
font-size: 13px;
z-index: 2;
}
.auth input[type="text"]:not(:placeholder-shown):focus ~ .input-label { color: #1864c9; }
.auth input[type="text"]:not(:placeholder-shown) ~ .input-label { color: rgba(24,100,201,0.50); }
.auth .input:focus { border: 2px solid #1a73e8; }
.auth .link-btn {
height: 20px;
text-decoration: none;
color: #1864c9;
}
.auth .submit {
float: right;
height: 38px;
margin-top:10px;
padding: 0 25px;
border-radius: 5px;
cursor: not-allowed;
color: #313452;
border: 1px solid #313452;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit {
background-color: #1a73e8;
color: white;
cursor: pointer;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit:hover {
background-color: #6CA5F0;
color: #7C7C7C;
cursor: pointer;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit:active {
background-color: #0D4186;
color: #AAAAAA;
cursor: pointer;
}
.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
transition: all 600000s 0s;
}
<div class="flex-row d-flex justify-content-center">
<div class="container auth">
<form method="post">
<div class="inputs">
<input type="text" name="api_key" class="input" placeholder="api key">
<label class="input-label">Enter Key</label>
<button class="submit" value="Login">Enter</button>
</div>
</form>
</div>
</div>
Edit the above snippet on CodePen
After researching autofills i found this:
https://bugs.chromium.org/p/chromium/issues/detail?id=953689
So apparently this is a known bug in chromium and other browsers, which for some reason is flagged as Won't Fix.
And if you look at the mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
It states that this is a know problem, you can't override :-webkit-autofill !important which is set by the browser.
But since i am not happy with this answer i managed to find atleast a somewhat solution to the problem using js from another stack overflow post:
// Fix autocomplete shit
function fix_autocomplete_shit() {
setTimeout(() => {
if ($(this).is(':-internal-autofill-selected')) {
var clone = $(this).clone(true, true);
$(this).after(clone);
$(this).remove();
}
}, 10);
}
$('input').on('input', fix_autocomplete_shit);
This is a pretty shit solution, but it might help you in some way.
I am currently playing / learning CSS animations and transitions and I want to make a simple animation where the background colour and text of a DIV alternate between two colors. This is pretty simple but my colours fade or blend from one to another and I would rather they snap or jump or toggle from one to another so the impact of the change is stronger. Here is my simple code
<div class="boss">
I am some text
</div>
Here is my CSS
.boss {
font-family: Helvetica, sans-serif;
position: absolute;
width: 100vw;
height: 100vh;
top: 0px;
left: 0;
background-color: #e91e63;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2em;
text-transform: uppercase;
animation: bg 1s linear infinite;
}
#keyframes bg {
0% {
background-color: #e91e63;
color: white;
}
100% {
background-color: white;
color: #e91e63;
}
}
A jsbin of the code above is here: https://jsbin.com/macimep/edit?html,css,output
Can anyone tell me how I can make the colour change so it toggles rather than fades. I'm sure this isn't a hard question but everything I have tried so far hasn't worked. Also I want to do this with CSS, toggling with JavaScript is simple but I am trying to get to grips with CSS. Many thanks in advance
If you don't need production ready code and just play with existing solutions, you can use animation-timing-function: steps(2, end); (see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function#Step_examples).
You also can do :
#keyframes bg {
0%,49% {
background-color: #e91e63;
color: white;
}
50%,100% {
background-color: white;
color: #e91e63;
}
}
Try this:
.boss {
font-family: Helvetica, sans-serif;
position: absolute;
width: 100vw;
height: 100vh;
top: 0px;
left: 0;
background-color: #e91e63;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2em;
text-transform: uppercase;
animation: bg 1s linear infinite;
}
#keyframes bg {
0%,
49.99% {
background-color: #e91e63;
color: white;
}
50%,
100% {
background-color: white;
color: #e91e63;
}
}
<div class="boss">
I am some text
</div>
I wanna to change the background-color title on hover and not when is not hover.
The problem is when I hover the element the title remains with light grey color(I think is default value color). I want to change the background in black color
<a class="popover-title" data-toggle="tooltip" data-trigger="hover"
title="test"
popover-append-to-body="true">
with this style
.myStyle{
max-width: 200px;
padding: 0.25rem 0.5rem;
color: #fff;
text-align: center;
background-color: black;
border-radius: 0.25rem;
}
SOLVED
I found a solution
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
max-width: 200px;
background-color: #000;
color: #fff;
position: absolute;
text-align: center;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-style: normal;
font-weight: 400;
line-height: 1.5;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
But the problem is when I want to put the translate it doesnt work and the tooltip returns transparant
<a class="font-weight-bold font-xs btn-block text-muted" data-toggle="tooltip" data-placement="bottom"
[attr.data-title]="'test' | translate"
popover-append-to-body="true">
You could use conventional CSS for this.
.popover-title:hover {
background-color: black;
}
For hover you need to write css with :hover
For you the code should be as below:
.myStyle:hover {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: #fff;
text-align: center;
background-color: black;
border-radius: 0.25rem;
}
You are targeting wrong class. Try this
.popover-title:hover{
color: #000;
background-color: #fff;
}
Change the color and background-color as you want
This will help.
.popover-title:hover {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: green;
text-align: center;
background-color: green;
border-radius: 0.25rem;
}
apply background-color property for 'popover-title' class like below.
.popover-title:hover{
background-color: #fff;
}
If above propery is overwritten use !important.
.popover-title:hover{
background-color: #fff!important;
}
Tooltips rely on the 3rd party library Tether for positioning. You must include propper.min.js or any other Library
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I have been playing around trying to get a nice looking drag and drop control on my site and have come across this upload control.
MDBootstrap File Upload
I have found out that removing the class named 'file-field' will cause the normal file input to show.
My question is, what is it that is causing the file input control to dissapear when this class is reapplied, as when I remove all styles from the class using Chrome DevTools by unticking them, it makes no difference.
Thanks.
By using the Chrome developer tools, you can inspect the element and you will see the styles involved.
Here is a snippet using the CSS styles involved to get that effect, by removing the class 'file-field' the control will show because the current css styles are applying opacity 0, making it transparent within a fancy-styled button.
.md-form {
position: relative;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.btn {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
padding: .84rem 2.14rem;
font-size: .81rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
margin: .375rem;
border: 0;
border-radius: .125rem;
cursor: pointer;
text-transform: uppercase;
white-space: normal;
word-wrap: break-word;
color: inherit;
}
.btn-mdb-color {
background-color: #59698d!important;
color: #fff;
}
.btn-rounded {
border-radius: 10em;
}
.waves-effect {
position: relative;
cursor: pointer;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.float-left {
float: left!important;
}
.file-field {
position: relative
}
.file-field .file-path-wrapper {
overflow: hidden;
padding-left: 10px;
height: 2.5rem
}
.file-field input.file-path {
width: 100%;
height: 36px
}
.file-field .btn {
float: left
}
.file-field span {
cursor: pointer
}
.file-field input[type=file] {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0
}
.file-field input[type=file]::-webkit-file-upload-button {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="md-form">
<div class="file-field">
<div class="d-flex justify-content-center">
<div class="btn btn-mdb-color btn-rounded float-left waves-effect waves-light">
<span>Choose file</span>
<input type="file">
</div>
</div>
</div>
</form>
Please note that the order of the CSS styles matters
I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.
I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}
Discover More <i class="btn--primary__icon icon-basic-clockwise"></i>
I think the problem is that your icon is displayed inline with zero content. I think you might need to change the icon to display: inline-block; and give it some dimensions. You'll want to set the dimensions to 0px when the icon should not be visible.
I converted your code from SCSS to CSS and replaced the $variables with actual CSS colors to make a working snippet...
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
width: 240px;
}
.btn--primary {
background-color: red;
color: white;
transition: all .2s;
}
.btn--primary__icon {
display: inline-block;
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
}
.btn--primary:hover {
transform: translateY(-2px);
}
.btn--primary:hover .btn--primary__icon {
width: 20px;
height: 20px;
background-color: blue;
visibility: visible;
opacity: 1;
}
<a href="#" class="btn btn--primary">
Discover More
<i class="btn--primary__icon icon-basic-clockwise"></i>
</a>