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.
Related
I have a Codepen here that works fine as a pen.
https://codepen.io/Teeke/pen/jObBBrO
When I move it to a Codepen project, or deploy to surge, the CSS partially breaks. The centered text moves to the left. I included a CSS normalize script and other libraries in head
.top-bar.scrollNav {
background: #ffffff;
opacity: 0.92;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
border-bottom: 1px solid rgba(200, 200, 200, 0.8);
}
.top-bar.scrollNav .menu li, .top-bar.scrollNav .menu li a {
color: #555;
}
The pen misaligns when deployed:
https://i.imgur.com/CA7dt5X.png
It should look like this (text centered):
https://i.imgur.com/ID3kXnU.png
What is causing the CSS to misalign in a Codepen project or Surge?
Codepen project if anyone's interested:
https://codepen.io/Teeke/project/editor/ZnwVdJ#0
You're loading your CSS wrong:
<script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css"></script>
That should be:
<link rel="stylesheet" type="text/css" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" >
I have transition that fade in/out my underlined text-decoration. It works perfectly on every browsers, except on Safari that doesn't make the fade in/out transition.
I have added -webkit-, as indicated on the MDN to make it work on Safari, but it doesn't seem to solve the problem (and I can't use border-bottom).
Here is my CSS:
.posts a:link {
text-decoration: underline solid transparent;
transition: text-decoration 0.3s ease;
-webkit-transition: text-decoration 0.3s ease;
}
.posts a:hover {
text-decoration-color: black;
}
I'm experiencing an issue with the css transitions firing on page load. Basically there were a problem with fancy links with custom background dropping from the top(start position) on the page load.
You can see example here.
These problems only occur if there is both input and a tags on the page so if we remove input everything will be just fine. The other way to solve this problem is not to use an external css file: it works fine with jsbin, but it isn't really helps because I want to understand why this things could ever be happening.
I have the following code:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="signin.css">
<title>Dobrotech</title>
</head>
<body>
<input type="password" name="password" required=""/>
forgot password?
</body>
CSS:
a{
padding: 0 0 5px 0;
background: url(/dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(/dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
a {
transition: background-size 0.5s ease-in, background 0.5s ease-in;
}
a:hover {
transition: background-size 0.1s linear, background 0.1s linear;
}
UPDATE: I've decided to remake this link effect using ::before pseudoclass and the problem is gone but I still want to figure out what cause links and inputs interact that weirdely
try this
a{
padding: 0 0 5px 0;
background: url(dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
i remove first / from background url
download my sample
I'm having issues getting my image to transition when hovered over, I believe the issue is with the css .play_button a:hover
when changed to #play_button a:hover it will transition however -webkit-transition no longer works.
Here's my current code: http://jsbin.com/vesuravabu/edit?html,css,output
Thanks for your help.
edit: added the transition to the example that I was trying to use.
This question is now answered, thank you everyone who replied.
I changed it from ".play_button a:hover" to "#play_button a:hover"
I also found the issue with my transition, accidentally used a semi-colon after -webkit-transition
Problem:
You don't have any class which is called play_button(.play_button). You can change .play_button to #play_button to solve your problem.
Jsbin
#play_button a {
background: url(http://placehold.it/119x69) repeat-y;
background-size: 100%;
padding: 0 36px;
width: 119px;
height: 69px;
display: block;
cursor: pointer;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#play_button a:hover {
background: url(http://placehold.it/200x150);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="sidebar_item">
<div id="play_button">
</div>
</div>
</body>
</html>
You definitely need to be using #play_button a:hover as opposed to .play_button a:hover, because play_button is an id, not a class name.
I don't see any -webkit-transition statements in your example, how are you trying to use this? It's not possible to transition, using CSS transitions, from one image to another in this manner. However, you could accomplish this a slightly different way: have a second DOM element overlaid on top of the first, set to opacity: 0 with the hover image already applied to this top element. Then, transition the opacity to 1 when hovering. This may give the effect you're looking for.
EDIT: Now that you've added a transition, we can fix that too. Note that in your example, "webkit" is misspelled, but the main problem is that you didn't specify the new width and height to transition to. Give this a try:
#play_button a
{
background: url(http://placehold.it/119x69) repeat-y;
background-size: 100%;
padding: 0 36px;
width: 119px;
height: 69px;
display: block;
cursor: pointer;
transition: 0.2s; /* Don't need webkit prefix here for modern browsers */
box-sizing: border-box; /* Tell browser: Don't include padding in size calculations */
}
#play_button a:hover
{
background: url(http://placehold.it/200x150); /* This will snap, not transition */
width: 200px; /* New width & height, will be used for transition */
height: 150px;
}
I need to do just a simple transition of background img, but searching for tutorials I found out a way to do it.
But its not working? Don't know why?
#chat
{
background-image:url(chat.png);
width:91px;
height:40px;
float:right;
transition: background-image 1s ease-in-out;
}
#chat:hover
{
background-image:url(hchat.png);
width:91px;
height:40px;
}
Link of code:
http://jsfiddle.net/xscsz5c0/2/
Is there something, I am missing? Coz I am not that good in CSS!
Because background transition doesn't work in Firefox, here's a workaround (which also gets around the problem of the hover image not loading with the page): http://codepen.io/pageaffairs/pen/azHli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#chat
{
background:url(http://i62.tinypic.com/29or6z6.png);
width:91px;
height:40px;
position: relative;
display: inline-block;
}
#chat::after
{
content: "";
display: inline-block;
background: url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
opacity: 0;
-moz-transition: opacity 5s ease-in-out;
-webkit-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
#chat:hover::after
{
opacity: 1;
}
</style>
</head>
<body>
<a id="chat" href="chat.php"></a>
</body>
</html>
My favorite way to deal with this is with a jQuery plugin called anystretch. You will need to download the anystretch js file and add it to your project. You will also need to have jquery.
I love anystretch because it replaces the target div with a specified image but also lets you chose a fadeIn time for it.
I had issues with using the css transition because it's cross-browser functionality was horrible.
sample on codepen http://codepen.io/cwilliams23/pen/iIomJ
$(document).ready(function() {
$("#chat").mouseenter(function() {
$("#chat").anystretch("http://i57.tinypic.com/i26j3b.png", {speed: 200});
$("#chat").mouseleave(function() {
$(this).anystretch("http://i62.tinypic.com/29or6z6.png", {speed: 1000});
});
});
});
You can play with the fade times to make it fade the way you want. The speed settings are in ms so 5s would be 5000.
Add display:inline-block to your code:
#chat:hover
{
background-image:url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
display:inline-block;
}
Demo