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
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I've been playing around with transition effects and noticed that unless i actually place the code in the html page itself they don't work.
My transformation effect below:
Style
.test_style:hover {
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale(1.6);
-ms-transform: scale(1.6);
transform: scale(1.6);
}
So when i place the code in style.css and link to it:
<link href="style.css" type="text/css" media="all" rel="stylesheet"/>
This is in my element so it loads at beginning.
It doesn't actually apply the effect.
If i place the style code directly in the element then it works without any problems or glitches.
Is there something i am missing?
So, I tried this out locally.
I have two files, both in same folder:
test.html
test.css
HTML:
<!DOCTYPE html>
<html>
<head lang="de">
<title>Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
<div class="test_style">
</div>
</body>
</html>
CSS:
.test_style {
width: 50px;
height: 50px;
background: red;
opacity: .3;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.test_style:hover {
opacity: 1;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale(1.6);
-ms-transform: scale(1.6);
transform: scale(1.6);
}
It is working like a charm. Don't know what you are doing wrong, but it is working!
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 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;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am new to html and css code, I am reading the source code of the http://www.quarryequipments.com/products/crusher/pe-jaw-crusher.html ,look at the facebook logo int the bottom if I put the mouse in it ,it will rotate slowly, how can I achieve that cool things?
Thanks.
Have a look here.
http://daneden.me/animate/
That site you refrenced was using
.end-public a:hover img {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
That's simple CSS:
.end_public a:hover img {
transform:rotate(45deg);
transition-duration:1s;
}