Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
In this link,
There is a panel at the right hand side with class name .list-panel, the original width is 600px.
If you open the developer tools and change the width from 600px to ,say 900px and you will see there is a sliding effect. This is quite different from the normal behaviour.
How does it work actually? It looks like there is something monitoring the css style changes at all time and applies the changes with animation.
Thanks.
It's just your average transition, pretty cool:
.list-panel {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been looking through the code of some websites, and notice that the margin sizes change depending on certain actions (eg, mouse hover, screen width) to create a cool dynamic effect.
This effect can be seen here when changing screen width:
http://www.smashbros.com/us/
And here on mouse hover:
http://www.disneyanimation.com/projects
I really have no clue how this is done!
How can the code values automatically change based on certain actions.
Thanks in advance
edit:
I tried something.... but it isn't really giving me the results I want
.cats {
background-color: #eee;
height: 90px;
width: 100%;
}
.cats {
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-up;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-up;
}
.cats {
-webkit-animation: slide-up 0.5s linear;
-moz-animation: slide-up 0.5s linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.cats :hover {
/* Toggle the animation play state to running when we are hovering over our sticker */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}
#-webkit-keyframes slide-up {
from {
margin-top: 0px
}
to {
margin-top: -15px
}
}
You can achieve this using CSS the hover selector as per #David's answer here:
https://stackoverflow.com/a/905042/3264286
Further details here:
http://www.w3schools.com/cssref/sel_hover.asp
Alternatively, if you are happy to use JavaScript, you can have a lot more power.
http://www.w3schools.com/jsref/event_onmouseover.asp
More discussion:
css hover vs. javascript mouseover
To move gradually, you can apply transition to your div. For example transition: 0.6s;
For more info on transitions property please visit this link.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need a CSS hover effect for a png image without using two images. Bascially when a user hovers over the png image it would show a glow or other effect without highlighting the whole box but just the png image. I've tried using masking effect but that requires a second image and i have multiple object that don't have same shape and I want to use one css effect for all.
HTML
<div class="brighten pic">
<img src="imgs/bookcase-02.png">
</div>
CSS
/*DARKEN*/
.brighten img {
display: inline-block;
margin: 100px auto;
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(120%);
}
Try This:
.brighten img {
opacity: 0.3;
}
.brighten img:hover {
opacity: 1;
}
You want to do something like this in JQuery. Be sure you are calling the JQuery library. I call mine from google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
THEN you want to do something like this:
<script type="text/javascript">
$(document).ready(function () {
$(".YourImageName").mouseenter(function () {
$(this).css('box-shadow', '0 0 2px #888');
});
$(".YourImageName").mouseleave(function () {
$(this).css('box-shadow', 'none');
});
}
</script>
This gives you a shadow around the edges and you can change the color or change the css entirely to better suit your needs.
It would be a little more helpful in the future if you provided us what code you currently have so we have a better understanding of what it is you want. This code is taken from live web use and changed to work for your scenario. You will have to change the class names to yours. Hope this helps!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Is there a good looking sharethis /addthis / addtoany alternative to share an url without javascript?
Like: share
I already found this: http://www.addthis.com/bookmark.php?url=google.com&title=google, but it is very ugly and has too many options.
Update: I am not looking for HTML, but for a service like http://www.addthis.com/bookmark.php?url=google.com&title=google, where I can give a url and the social sharing site handles links to facebook, twitter and google+.
The only problem I have with addthis.com/bookmark.php is that it is ugly and has too many options. I only want links to facebook, twitter and google+.
Is this what you want? Pure css with some icing animation effect. NO JS.
www.jsfiddle.net/Godinall/UH8sx/
HTML:
<div id="show_social">Add to Social Networks
<div id="social_share">
<p id="socialicons">
<img src="http://3.bp.blogspot.com/-eG9bPvyOXro/UPBYTmI8VEI/AAAAAAAAJqI/TFBZzBxJ59c/s1600/NBT+facebook+icon.png" />
<img src="http://4.bp.blogspot.com/-dB0P2JmL6QA/UPBYVfvhyII/AAAAAAAAJqU/HFD5UeTJck8/s1600/NBT+twitter+icon.png" />
<img src="http://1.bp.blogspot.com/-XU8OI90JZQc/UPBYUKmev_I/AAAAAAAAJqM/FPgdcMimraQ/s1600/NBT+google+plus+icon.png" />
<img src="http://4.bp.blogspot.com/-YPkJD-sewC8/UPBYWk9dzBI/AAAAAAAAJqg/D3FVlAJz4VE/s1600/NBT+rss+feed+icon.png" />
<img src="http://1.bp.blogspot.com/-YNToKMeHx9A/UPBYWVeeq5I/AAAAAAAAJqc/HEpC_PsZBsY/s1600/NBT+youtube+icon.png" />
</p>
</div>
</div>
CSS:
#show_social{width:400px;background:rgba(100,100,100,0.2);text-align:center;font-family:Helvetica;border:1px solid rgba(10,10,10,0.5)}
#social_share{display:none;}
#show_social:hover #social_share{display:block;}
#socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
If you want to use a web service, they gonna track your usage anyway that's for sure. As for AddThis, they do have better layouts and simpler options, see this link:https://www.addthis.com/get/smart-layers?frm=hp which is called smart layer that starts with only the 3 social services you prefer and the layout is HTML5 friendly.
Also the previous demo I gave you can also be modified to implement only the 3 social services you want and you can replace my handlers with your own. You can tweak the appearance as you wish.
Is this what you looking for? It is very bad from UX point, nobody likes a new window being opened, when it could be just a pop-up.
Tweet This button
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I want to use this: http://academyoftumblr.tumblr.com/post/6213339878/sliding-dropdown-menu dropdown menu on my tumblr page, but the code won't let me use capital letters. How do I fix this?
It's not HTML it's CSS where you've defined text-tranform property
Remove text-transform: Camelcase; from the code and it will work.
ul#drawers li h4 {margin: 0; padding: 0px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;}
The bolded part should be removed.
Remove the text-transform: Camelcase; statement that is changing the case of all its contents.
I am working on a Drop-Down-Menu only using CSS & HTML5 (no JavaScript) in my personal website. Here it is: http://davidvalles.cu.cc
If you enter with Firefox, the menu works great (it is the one called "Secciones"): when you put the mouse over the "Secciones" div, the menu appears with a transition.
But if you try it with Safari or Chrome, it will work normally, unless you put the mouse UNDER the "Secciones" div. In that case, menu will appear normally. And I don't want the menu to open in that case. I only want it to open when you put the mouse over the "Secciones" link (all the box that contains the Secciones text).
What am I doing wrong? Why does the menu work perfectly in Firefox but not in Safari?
Could you take a look at it? Thank you, and sorry for my poor English, I'm learning. Please, correct me :)
Your easing? Is "ease" a easing value?
-moz-transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;