This question already has answers here:
How to Animate Gradients using CSS
(5 answers)
Closed 4 years ago.
As you can see in the following snippet I have a button with a linear gradient background. In the hover I want change it to a single color. When I try this effect I am getting like a blink effect which the background disappears and then the background color appears. Is there any workarounds to prevent this blinking effect?
a {
text-transform: uppercase;
background-color: transparent;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
background-color: #33afbd;
}
Button
I used only background for those. And used background:linear-gradient(#33afbd,#33afbd); instead of background-color:#33afbd;
a {
text-transform: uppercase;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background:linear-gradient(#33afbd,#33afbd);
}
Button
Just set the original background-color to the one you want.
The problem is that in the transition it sets first the back to transparent, then to the hover desired color.
Solution:
a {
text-transform: uppercase;
background-color: #33afbd;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
}
Button Here
Related
I'm VERY new to html coding (5/6 weeks) and I'm having a problem getting my head around something. I'd like to be able to click on an image and instead of opening a new page have it's image or embedded video load inside a floating page (I'm sure there is a correct name for this) that loads on top of the existing page.
I've found several examples of this (one of which is linked below) but I'm still baffled. Is it just code from the main.css I need or do I require javascript etc. aswell. I've tried copYing over several bits of css code but to no success. It seems to always open a new page and not a floating page like in the example I've included below.
example: https://html5up.net/parallelism
when you click an image in the above site it opens/pops up a floating box (again sorry for not knowing what it is called) in the way I'd love to understand. I really want to use this technique as my site will be image and video heavy. I feel this approach will be a far a more professional way to display my information and images.
If anyone can help I'd love to learn exactly what I need to do to implement this. It might only be 5/6 weeks but I feel I've learned quite a bit. I want to keep upskilling to the point that I can maintain this website entirely by myself.
Thanks to everyone in advance,
Al.
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}
<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
x
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>
I am using the bootstrap multiselect plugin. An example is http://www.bootply.com/cEjepVhvjg.
Now I want to change the CSS style of checkbox and radio button inside multiselect box to http://www.cssscript.com/demo/pretty-checkbox-radio-inputs-with-bootstrap-and-awesome-bootstrap-checkbox-css/
How can I change? I tried some CSS changes but not worked.
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
/* left: 0; */
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
Thanks
I want to only use one div for the icon and one css selector.
Currently I have it working with two different background images being loaded.
fiddle: http://jsfiddle.net/6r0x4npd/
html
<h1>Hover over the icon</h1>
<div class="icon bell"></div>
css
body {
padding: 50px;
}
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjOTk5OTk5IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjNzk3OGU3IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
How can I make the color of the textbox border fade into another color when it is focused? For example if the border color was #ddd then the user focused on the textbox it would fade into #0266C8 and when they unfocus it fades into #ddd again. Here is my code:
<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
var x = y.value;
if(x.length>5) {
document.getElementById("error").innerHTML="Limit is 5 characters";
} else {
if(x.length<6) {
document.getElementById("error").innerHTML="";
}
}
}
</script>
<style type="text/css">
body {
margin:auto;
font-family:arial, sans-serif;
padding-top:100px;
}
.container {
width:920px;
margin:auto;
text-align:center;
}
.main_text {
font-family:"Bebas Neue";
font-size:76px;
color:green;
margin-bottom:10px;
}
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
}
.textbox1:focus {
border: 4px solid #0266C8;
}
#error {
font-size:24px;
color:red;
font-family:"Bebas Neue";
}
</style>
</head>
<body>
<div class="container">
<span class="main_text">Password Strength Checker</span><br>
<input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus><br><br>
<div id="error"></div>
</div>
</body>
</html>
Any help will be greatly appreciated. Thanks, Omar.
Use CSS3 transitions.
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
transition: background .5s ease-out; // global
-moz-transition: all .5s ease-out; // for mozilla
-o-transition: all .5s ease-out; // for opera
-webkit-transition: all .5s ease-out; //for webkit, chrome or safari
}
.textbox1:focus {
border: 4px solid #0266C8;
transition: background .5s ease-in; // global
-moz-transition: all .5s ease-in; // for mozilla
-o-transition: all .5s ease-in; // for opera
-webkit-transition: all .5s ease-in; //for webkit, chrome or safari
}
You can set the fade delay on .5s ease-in
You can try to use CSS transition here:
transition: border-color 1s linear;
-moz-transition: border-color 1s linear;
-o-transition: border-color 1s linear;
-webkit-transition: border-color 1s linear;
Fiddle Demo
you can use:
.container input{
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.container input:focus {
border: 1px solid #4F94CD;
}
I would like to create a blurry effect that will last e.g. 500 ms and then it goes back to normal in some animation that will last e.g. 250ms. So, if the user hover over the link it will animate a blurry/fuzzy effect on this link text and then goes back to normal.
Let's say I have this code:
<a class="link-to-blurry" href="http://example.com">Text to blurry on hover</a>
Can this be done using jQuery or some additional JavaScript plugin?
You could try something like this:
CSS:
a, a:hover {
color: black;
font-size: 1.5em;
text-decoration: none;
}
.on {
transition: text-shadow 500ms;
-webkit-transition: text-shadow 500ms;
-moz-transition: text-shadow 500ms;
-ms-transition: text-shadow 500ms;
-o-transition: text-shadow 500ms;
text-shadow: 0 0 10px #000;
}
.off {
transition: text-shadow 250ms;
-webkit-transition: text-shadow 250ms;
-moz-transition: text-shadow 250ms;
-ms-transition: text-shadow 250ms;
-o-transition: text-shadow 250ms;
text-shadow: 0;
}
JS:
$('a').hover(function(){
$(this).removeClass('off').addClass('on');
}, function(){
$(this).removeClass('on').addClass('off');
});