Trying to make userface more userfriendly i want to implement following:
I have a table with some alert above it. Take a look at this example
When I close alert table 'jumps' to the top. I want it to slide smoothly. I want to use pure css. I've read about transition and animation but i think that's not what i need, or maybe i am wrong.
Any ideas? Thanks in advance!
K, so you can do it with pure css. Bootstrap removes the in class from the alert at the beginning of the fade out. We can use that to apply css to the alert before it's removed from the page.
.fade {
max-height: 400px;
-webkit-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}
.fade:not(.in) {
max-height: 0;
}
See it in action: http://jsfiddle.net/McHUc/92/
Related
I got a problem, I made a check mark CSS animation on my website, but they start on page load, and it shouldn't, it should only trigger on hovering / unhovering.
And the text need to collapse like (...) when the price goes above the description
All the code is available here: https://github.com/Douwdy/Projet-3
And you can get a preview here: https://douwdy.github.io/Projet-3/menu-1.html
Someone can help me to fix that ?
No Js Suggestion please
For CSS animations on page load your, I had a look at this and I would use transition & transform instead of animation
So if you remove the animations (check-box__in & check-box__out) in your css and replace with transitions below:
.menu-selector-box:hover .menu-selector-box__validator {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
.menu-selector-box__validator {
transition: transform 1s ease-out;
}
.menu-selector-box-text__price {
transition: transform 1s ease-out;
}
.menu-selector-box:hover .menu-selector-box-text__price {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
For the text issue I would suggest setting a width on menu-selector-box-text (I used 275px) and then on hover reduce the width (I used 225px), you can use the same transitions as above when reducing the width (transition: width 1s ease-out;)
Then the styles below need to be applied to the <h5> and the <p> tags.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
I edited my theme so the tags would show on the drop down box(?) at the bottom of the posts (that should be for the source as you can see on the original) but now it doesn't drop slowly like before, it appears instantly, i tried changing all the transition values but it doesn't work... Is there a way to fix it?
• my theme [ http://joltikillua.tumblr.com/ ]
• static preview of the original theme [ http://yukoki-th.tumblr.com/th29 ]
And another question, is there a way to add a "reblog" link on the side of the posts like on this one: [ 34kojin.tumblr.com/ ]? And maybe the option to add the permalink too?! like a small menu floating on the side?!
So my theme would have the tags on the drop down box and the links on the side of the post when on mouseover?
I hope this makes sense, I don't understand much about html/css and my english is bad but i would appreciate any help!
Hard to look through your code.
I've made a small example for you how to correctly make a your expanding box grow with pure CSS animation.
Here: http://jsfiddle.net/okwky7qL/
Please change order of -webkit-transition: ... and so on to the order like I have it here:
#permalink, .preblog {
font-family: bitxmap;
font-size: 10px;
color: {color:permalink text};
background-color: {color:permalink bg};
overflow: hidden;
padding: 0 10px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#permalink { line-height: 22px;}
.preblog {
padding: 0 0;
height: 22px;
}
{block:if1column}.posts:hover .preblog {height: 55px;}{/block:if1column}
Check your code in the CSS again with the code in my example.
So I've saw this website: http://unfold.no/
And I want to learn how to build navigation bar that is both transparent and can change color as function of background (if you scroll up or down you'll see it) .
I have limited experience with navigation bars that dates to old Dreamweaver versions, so forgive me for the generality of the question... Any advise of where to start will be appreciated.
I guess your issue can be solved by reading the answer on this question:
Changing classes with animation depending on scroll position
Basically, in the example you are showing, the menu has a position: absolute on the page, which positions it on the top right corner of the page. Then, an easy way of changing the color of the menu is by swapping classes on the menu itself through Javascript. You can use the code shown on the link above to see how this is done.
By swapping classes regarding the element colors with animation, you then give each element a CSS transition just like this:
.object{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
This CSS will make your elements change color by fading with an animation duration of 0.5 seconds.
It is pretty simple if you know have a basic understanding of CSS and Javascript
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/