I want to make it so when somebody hovers over a button, some glow fades in. I tried that with this code:
.discord_join_button:hover{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px #2332d8;
animation-duration: 500ms;
}
for some reason this isn't working and the box-shadow just pops into existence
I was expecting it to fade, not just show up
you can achieve the "fade in" effect by specifying the transition property to the button base style. For example:
.discord_join_button {
color: rgba(255, 255, 255, 1);
transition: all 200ms ease;
}
.discord_join_button:hover {
box-shadow: 0 0 60px #2332d8;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition</title>
</head>
<body>
<button class="discord_join_button">Hover me</button>
</body>
</html>
If you want to know more about the transition property: here.
.discord_join_button{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px rgba(0,0,0,0);
transition: 500ms;
}
.discord_join_button:hover{
box-shadow: 0 0px 60px rgba(0,0,0,1);
}
Use rgba.
And transition should be applied before hover.
I don't know if it's what you want, but if you write the box-shadow value in reverse, it's also possible to make it work in reverse.
Related
I have this white small box and i want to make him transparent before starting adding my html code, i searched already how to do that but i didnt find any type of example.
Image:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script type="text/javascript" src="./script.js" ></script>
</body>
</html>
CSS
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
html {
background: transparent;
}
[EDIT]
CSS
html, body {
background: rgba(0, 0, 0, 0.01);
}
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.1);
/* border-radius: 16px; */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.6px);
-webkit-backdrop-filter: blur(11.6px);
border: 1px solid rgba(0, 0, 0, 0.15);
}
Html
<!-- I added this div -->
<div>
TESTE
</div>
Please improve your question. If you want to make an element transparent with CSS, the easiest way is to add numbers from 0-9 to the end of the color value to get the transparency level you want, for example, white is #fff, to make it transparent experiment with #ffffff0, #ffffff1, #ffffff2, to 9.
I am trying to make a glassmorphism effect and my problem is that the webkit backdrop filter is not applied to the background of the div.
the css code:
.glassmorphism {
background: rgba( 255, 255, 255, 0.20);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
-webkit-backdrop-filter: blur(10em);
backdrop-filter: blur(10em);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18);
}
html:
<div id="content__body" class="glassmorphism"></div>
And I get this error in chrome:
invalid property value
Edit;
I just found out the problem myself:
I had two glassmorphism divs over eachother. For some reason that lead to a cancelation of the effect. In short: The styling above works but not for stacked divs
Use 10px instead of 10em
and your backdrop filter is working.
i have a very strange bug on ie 11 on windows 8.1 64 bit. the box-shadow on div with border-radius set is different from the box-shadow on div WITHOUT any border-radius set (
exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.switchbtn1.first {border-right:none;border-radius:4px 0 0 4px;}
.switchbtn1.last {border-left:none;border-radius:0 4px 4px 0;}
.switchbtn1 {
font-size:14px;
line-height:14px;
padding:3px 15px 6px;
border:1px solid #E8BA66;
float:left;
box-shadow: 0px 3px 7px rgba(227, 168, 79, 0.6);
}
</style>
</head>
<body>
<div class="switchbtn1 first">un</div>
<div class="switchbtn1">deux</div>
<div class="switchbtn1 last">trois</div>
</body>
</html>
this result in :
you see that the box-shadow on the div with round-corner is different from the box-shadow on the div without round-corner ...
this bug not happen on all IE11. for exemple on IE11 on Windows 7 it's seam to not happen
any idea ?
Related to this? http://social.technet.microsoft.com/Forums/en-US/e262c912-5250-4996-acbc-41a8bcd11ba0/weird-ie-behavior-when-combining-drop-shadow-and-radius-css?forum=ieitprocurrentver
Answer suggests a graphics driver problem:
I turned off GPU rendering in the Advanced options and after I rebooted, the radius with drop shadow displays just fine....
this solution in works in ie11
div {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
background:rgba(50, 50, 50);
}
I am simply trying to give the theme user an option on
having the animation or not, so I used this
<meta name="if:Transition" content="1"/>
with this {block:iftransition} around the css.
full example//
{block:iftransition}
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
{/block:iftransition}
but when I turn the switch on or off nothing happens to the animation at all.
It only works for showing the description....
As an example//
This theme
you get the option to turn box-shadow on or off.
They used this meta tag//
<meta name="if:Box shadow" content="1"/>
and this css//
{block:ifboxshadow}
-webkit-box-shadow: 10px 10px 2px rgba(0,0,0,.2);
-moz-box-shadow: 10px 10px 2px rgba(0,0,0,.2);
box-shadow: 10px 10px 2px rgba(0,0,0,.2);
{/block:ifboxshadow}
and it works perfectly.
So I tried to create a transition meta tag and failed.
My question is:
Why doesn't my code work?
But yet another theme's code does?
What am I doing wrong?
Please help.
I've just started learning html & css and I'm not entirely sure what I'm doing but..
I've added a :hover transition so that when I hover over my header "FIENDS" it fades from #000000 to #800000. Which I've implemented and which works. I've also added the css :active, so that when I click my header "FIENDS" it instantly switches from #800000 to #ffffff. But at the moment it isn't instantly switching, it seems to be using the transition I set up for the :hover and fading to #ffffff. Does anyone have a solution to this?
Thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Fiends</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Fiends" />
</head>
<body>
<div>
<h1 class="centertext"><fade>FIENDS</fade></h1>
</div>
</body>
<html>
CSS
html {
background-color: #ffffff}
body {
font-family: bebas neue;
text-align: center;}
h1 {
color: #000000;
font-weight: normal;
font-size: 200px;
letter-spacing: 15px;}
h1.centertext {
margin: 225px auto auto auto}
fade {
color: #000000;
-webkit-transition: color .12s linear;
-moz-transition: color .12s linear;
-ms-transition: color .12s linear;
-o-transition: color .12s linear;
transition: color .12s linear;}
fade:hover {
color: #800000;}
fade:active {
color: #ffffff}
You will probably have to use JavaScript to get the full animation effect that you want. You can change the transition property in :active, for example:
fade:active {
transition: none;
color: #fff;
}
http://jsfiddle.net/Rppmd/
However the transition is not overridden when it is no longer active so the element will still fade back in (i.e. the solution is not perfect).
With JavaScript you can remove transition entirely and have JS do all the animations. This will allow you to set the animation timing e.g. on hover. On mousedown and mouseup, no animation would be needed, just color change.