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;
}
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to create something like a this loading button after question. It will be nice to get this rotating button for loading anything with pure CSS (not counting the fact that it will be spinning in a click, it will be done with JS). Maybe someone did something like that? Or at least have an idea how to do it. I just know that this is probably possible with transition.
UPD. No images and icons. My question is about, how to create this kind of borders (two arrows), and rotate them on click (can be done with JS).
Here is example of this button:
Using FontAwesome and the built-in CSS3 rotation
jsBin demo
i.fa-refresh{ color: #a05; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class="fa fa-refresh fa-spin fa-2x"></i>
https://fortawesome.github.io/Font-Awesome/icons/
https://fortawesome.github.io/Font-Awesome/examples/
Loading Icon (Using plain CSS and CSS3 animation)
.loading{
display:inline-block;
position:relative;
vertical-align:middle;
width: 24px;
height: 24px;
border:2px solid transparent;
border-top-color:#a05;
border-bottom-color:#a05;
border-radius:50%;
animation: rotate 3s linear infinite;
}
.loading:after,
.loading:before{
position:absolute;
content: "";
width:0; height:0;
border:6px solid transparent;
border-bottom-color:#a05;
}
.loading:after{
top:1px;
right:-7px;
transform: rotate(135deg);
}
.loading:before{
top:11px;
left:-7px;
transform: rotate(-45deg);
}
#keyframes rotate{
to { transform: rotate(360deg); }
}
<span class="loading"></span>
Using it with jQuery would end in something like:
jsBin demo
Check out codepen (fair point out: not my codepen) here for some idea of how to create a css only arrow kinda like what you're thinking about:
http://codepen.io/artemdemo/pen/fLcCn/
the circling is not possible with transition effect but its possible with css only assuming you have the rotating icon already, just make a hover animation like:
.rotate{
animation: rotate ease infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
from { transform: rotate(0deg); }
}
and then on click add the class rotate to the element
You can use the Cursor URL property and link it to an animated GIF of your spinner.
/* CSS */
.wait { cursor: url(wait.gif), wait; }
/* JavaScript */
if (waiting)
document.body.classList.add('wait');
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 want to add a background ribbon inside a div without images with only pure CSS.
I tried using :after and :before but didn't have any luck.
The ribbon is green, and must be same as below:
http://i.stack.imgur.com/eJsj9.png
Anyone here that can help me? Remember - my div can grow in height with the content.
I applied some transforms on the :after pseudo-element. Here's how:
.ribbon {
background: #04F;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.ribbon:after {
content:' ';
position: absolute;
background: #0F4;
width: inherit;
height: inherit;
padding: inherit;
top: 0;
right: -70%;
-webkit-transform: skew(-15deg, 0deg);
-moz-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}
Just work with the padding, text-align and colors to achieve the exact effect.
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 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 9 years ago.
Improve this question
I'd like to write some text on a circle (I mean, the text will not be horizontal, but every letter will have a different orientation).
Is it possible using html and css?
Thanks you!
There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it. Thanks to the css-tricks.com
DEMO
DOWNLOAD FILES
DOCUMENTATION
HTML
<h1>
<span class="char1">E</span>
<span class="char2">s</span>
<span class="char3">t</span>
<span class="char4">a</span>
<span class="char5">b</span>
<!-- you get the idea -->
</h1>
CSS
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
transform-origin: bottom center;
}
.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */
THERE IS A SUPER DEMO GIVE FROM THE HERE
You can but you will end up having to do some major math to accomplish your goal. You will want to use the following CSS as a starting point.
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
From css-tricks.com