I've gotten an idea to make a search "button" upon clicking which the input box would show up and stretch. However instead of using an invisible checkbox I decided to try and use the label since clicking the label would put focus on the element the label is connected to. And while giving focus and doing basic transformations do work, I can't seem to hide/show the textbox either using visibility: hidden/visible or display: none/inline-block. And I don't want to just rely on opacity since the textbox can be found/clicked even while it's hidden.
Current attempt: JsFiddle
Why doesn't this work? What am I doing wrong?
Elements that are not visible cannot receive focus, therefore the :focus psuedo-class cannot apply.
Using width and opacity seems to produce a reasonable effect.
you can use opacity only, visibility:hidden or display:none; are not suppose to allow focus (IMHO), since element are not visible.
form label {
font-size: 23px;
}
#box {
width: 0px;
opacity:0;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
}
#box:focus {
opacity:1;
width: 50px;
}
http://jsfiddle.net/6h8cF/7/
You can't really get a focus from a label since it is not a focussable element.
See BoltClocks answer here : Anyway to have a label respond to :focus CSS
Fiddle:
http://jsfiddle.net/h6NNs/
Change from :focus to :hover.
Resulting CSS should be:
form label {
font-size: 23px;
}
#box {
width: 0px;
visibility: hidden;
opacity: 0;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
}
#box:hover{
visibility: visible;
opacity: 1;
width: 50px;
}
Related
Is it possible to animate with a CSS transition the status of the cursor?
I've tried with this code but it is not working.
.test {
cursor: default;
width: 100px;
height: 100px;
background: red;
}
.test:hover {
cursor: pointer;
-moz-transition: cursor 500ms ease-in-out;
-o-transition: cursor 500ms ease-in-out;
-webkit-transition: cursor 500ms ease-in-out;
transition: cursor 500ms ease-in-out;
}
<div class="test"></div>
That is not possible with CSS alone. Transition only works on animatable properties; whereas cursor does not appear. For a full list of animatable props, please check here.
Please notice you may also put .gif for the .cursor element; bare in mind there are certain size restrictions that apply accordingly on different browsers.
Cursor is not an animatable property and it would be kind of weird if it were to be honest. If you want to create an animation I would suggest creating a GIF that would start as default and end as pointer.
Then you can use that GIF as shown:
.test:hover {
cursor: url("your-image.gif"), auto;
}
You can, by specifying a url to it in CSS:
.test{
cursor:default;
width: 100px;
height: 100px;
background: red;
}
.test:hover{
cursor:url(smiley.gif),url(myBall.cur),auto;
}
I want the menu to close in the same duration it takes for it to open. For some reason, there is a delay before closing, along with showing some extra space I have no idea where it comes from.
Here is the jsfiddle: https://jsfiddle.net/m9pd8bjh/7/
Here's the CSS code in case you see something wrong immediately:
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
}
.toggleable {
transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
I'm using a checkbox-label combination to trigger the opening and closing of the menu.
The first thing you need to understand is that the visibility property in CSS cannot be animated. This is due to it only having two states (either visible or hidden, nothing in between to facilitate the animation).
If you want to make a fade-in effect, you can use opacity:0; to opacity:1; and give that a transition instead.
The next thing to note is that your animation time is very long, and if you are animating a max-width, you need to shorten the animation time to adjust.
See fiddle : https://jsfiddle.net/m9pd8bjh/12/
And CSS:
.toggleable {
transition: max-height 0.25s ease-in-out;
}
If you specifically want that long animation timeframe, then you will have to use something other than a max-height solution.
This would then become a new avenue to approach as you would have to use JavaScript, jQuery or some other such framework.
For future reference, here is a fiddle doing the same using jQuery: https://jsfiddle.net/m9pd8bjh/15/
And here is the jQuery code:
$('.toggler').click(function(){
$('.hide').slideToggle();
});
I add another transition when you close the menu and I removed the initial margin of the ul element. Is that effect ok for you ?
CSS code changed
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#menu-main { margin: 0; padding: 10px 40px }
input[type=checkbox]:checked ~ .toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
See this fiddle
I am trying to create a nav menu like the one here(http://themes.fuelthemes.net/bouncy/) for practice, and I have come pretty close but mine doesn't quite look (the animation isn't as smooth) as good as the one in the example. The source code is very large and I cannot find how the author creates the animations in the css code or through javascript. Here is what I have so far. Could someone please take a look and tell me what I am doing wrong?
The method I am using to make the menu slide down is by using the max-height property and I am making it fade in with the opacity property.
Bulk of animation code:
.menu > li:hover > ul {
display: block;
-webkit-transition: max-height 0.2s, opacity 0.2s;
-moz-transition: max-height 0.2s, opacity 0.2s;
-ms-transition: max-height 0.2s, opacity 0.2s;
-o-transition: max-height 0.2s, opacity 0.2s;
transition: max-height 0.2s, opacity 0.4s;
max-height: 500px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.dropdown {
max-height: 0;
position: absolute;
list-style: none;
background: #2c2c2c;
margin: 0;
padding: 0;
overflow: hidden;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
My JSFiddle:
http://jsfiddle.net/cn2fZ/
They aren't using Transistions what the code is is something like this
http://jsbin.com/onituc/1/
or
this http://jsbin.com/onituc/2/edit
Both are different styles
The first one uses the mouseenter and mouseleave functions combined with the delay function. As well as using the fadeIn, we can change the fadeIn to other stuff like
show
slideDown
The second one just uses the slideUp and slideDown functions combined as well with the mouseenter mouseleave
Hope one of these two help you, if you need more help please comment
I am looking at creating a simple animation in where if you move the mouse open the button opens and you see a word, if you move off of it, the button closes.
What I want though is a reverse order of it opening, so when the mouse moves from the button it slowly closes instead of snapping shut, just like how it opened.
Is there a way to make this possible using only XHTML or HTML5?
If I understood your request right, this is what you want:
<div id="button">
<span>This is your Text</span>
</div>
<style>
#button{
height: 20px;
width: 100px;
background-color: blue;
color: white;
transition: height 0.25s linear 0.25s;
}
#button span{
opacity: 0;
transition: opacity 0.1s linear;
}
#button:hover{
height: 50px;
transition: height 0.25s linear;
}
#button:hover span{
opacity: 1;
transition: opacity 0.1s linear 0.25s;
}
</style>
This snippet creates a button 100x20px and on hover (when you move with your mouse over) it gets bigger and the text gets shown.
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).