After looking at Google's new /design, I was wondering if there's any way to accomplish a loading spinner like the one under /progress-activity (Scroll down to "Circular") with HTML / CSS?
I'm only talking about the animation itself. As far as I know it might be next to impossible to round the borders of the spinner like Google did.
I only managed to do a very (very) simple version of this spinner, but I couldn't figure out how to animate the "border" itself (like the spinner in the newest version of Android). Basically I just used border / border-radius: 50%; and an infinite CSS animation to rotate the HTML element (0deg -> 360deg): http://codepen.io/anon/pen/mqiCf
Or do i have to use an "old-school" .gif to get something similar to the "Android L" Spinner?
I think it'd be possible to achieve using SVG, providing whichever browsers you're targeting support the animations required.
I'd use two components: the partially-opaque "growing circle" effect at the start is one element, and the spinning circular outline is a second element.
The aspect which is impossible to achieve using HTML is having the length of the circular arc changing. In SVG, you can achieve that by using an animated stroke dash array. Here's an example of that.
I don't have time at this moment to make a better example, but this is a little closer. I tried what Shomz said in the comment, about using a white loader over the blue one. It isn't perfect, but play around with the timing a bit.
http://codepen.io/anon/pen/bBKJe
Related
I'm wanting to create a neon sign of a logo for use on a website and also email signature.
I've a couple of questions I'm hoping a kind person can help me with.
For the email signature, I was thinking an animated gif would be best- just to be safe? However, I could use an html template- but I'm unsure the CSS animations used on the website version would render correctly in an (or numerous) email client(s)?
I've found this example of a CSS animated neon sign using typed letters in the mark-up. http://www.broken-links.com/tests/animations/
I was wondering if this same CSS animation technique would work with a flat image? How would the CSS know where the edges of the letters are? Would a transparent png work correctly using this technique? I've got the image as pixel or vector based if that helps?
This is a screen shot of the logo and quick mock up style of neon sign I want to create.
Thanks in advance!
The example you linked uses text only. It uses a #font-face rule to load a custom font, then animates the colour of the font. Its colour is flat.
What you are attempting to do involves rather more. The easiest solution would probably be to separate each letter into its own image, then you can animate the opacity property. This is probably the best you can hope for.
im not sure if i understand you well.. but this will apply a drop-shadow to a transparent image as applied on the neon text..
-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
filter: url(/assets/svg/shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";
filter: progid:DXImageTransform.Microsoft.S
This link also explains a lot about drop-shadow and box-shadow - due to the browser support it's not quite what I need for my project, but might be useful for someone else searching this drop shadow CSS trick.
http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
I think I asked about the opposite problem a while ago (allow mouse event to pass through a transparent area on an image - I ended up using an imagemap for that) but anyway:
I need a mask element for when a dialog comes up. In the past I've used:
position:fixed;
left:0;top:0;right:0;bottom:0;
background:#000000;
opacity:0;
filter:alpha(opacity=0);
And it works, but it's kind of a "hack".
I've not been able to get an element with background:transparent to intercept mouse events. Is this intentional? Is there any way around this other than the above? Or is the above the best solution for this problem?
The issue with background:transparent appears to be specific to IE (tested in IE7/8/9). It's not an issue in other browsers.
It's also specific to HTML form elements. For instance, it works fine in IE for text inside a paragraph tag but not for a button tag. Most likely it's a rendering bug in IE, rather than the result of a deliberate engineering decision by Microsoft. There used to be a similar issue in IE6 with select boxes not layering correctly with position:absolute.
It'd be safer to use opacity than background:transparent in this case. It may feel less like a hack if you change the opacity of the mask to make it partially transparent instead of fully transparent.
I haven't seen any documentation on them, so they probably don't exist, but it's always good to check.
I'm looking for a truly-circular (or polygon of any type other than rectangle) element. I can draw a circle in canvas, but the canvas is still a rectangle. I can draw a circle using border-radius, but it's still a square element with pretty round corners.
I'm looking for an (easy) way to make complex shape buttons that are very precise on their clickable areas.
My current method is to use JavaScript, listen to clicks and measure position. It would be much more ideal if this were handled in html5/css3.
Well, all elements start as a block, square or rectangle in one shape form or another. Outside of that through CSS you manipulate the block, to appear as a circle. But its not to go without saying not all browsers support this fully, but its mostly the older browsers you have to worry about in that essence.
If your looking for something 100% compatible old and new, theres http://pixlr.com you can draw one there and use an image tag.. But even then the image is still square/rectangle. Theres really no escaping that notion any route you go.
All in all..
<div class="full-circle"></div>
.full-circle {
background-color: #c06;
border: 3px solid #333;
height: 150px;
border-radius:75px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 150px;
}
As far as your current method, thats the only plausible logic for the most part, doing things outside the "norm" usually requires a bit more work then a single line of code or three to do it for you.
Border-radius just makes the element look round (except in firefox, reportedly).
Maps kind of work, but I want to avoid forcing an image.
SVG works, but it's still not pure html/css because javascript is needed for links to work. The SVG element is still square too, though the shapes inside are elements that respond well to javascript events. So it's not 100% perfect, but it is workable.
Would definitely be cooler if we had the ability to control the shape of elements on the page beyond drawing inside of a canvas. Maybe I'll play around with building an entire site inside a canvas...
Thanks for the suggestions!
There are no truly circular elements, but try using a regular box element and using the CSS3 specification border-radius. For example:
border-radius: 50px;
height: 50px;
width: 50px;
overflow: hidden;
This creates an element which is effectively circular, and Firebug respects the curved form when hovering over elements.
I've googled a lot and I've just given up, so I'll turn to the experts out there to see if someone can help me in my quest.
I've got a logo converted to .SVG through illustrator.
My objective is to use that logo to clip (or mask if you prefer) an entire div so that just a small part of it shows through and you can see the background.
I decided to go the .SVG way since I want to create this website as a full scalable experience, and thus a .png would not work accurately from full HD resolutions to 1024x768.
So firstly I would like to know how to clip a Div and at the same time how to "inverse clip" so that instead of just showing that part of the div it would show everything but it.
I'll be eagerly awaiting your answers as I really need them...
Thank you in advance.
If I understood you correctly (and I'm not sure about that), you want to show 'everything in the background that fits the shape of your logo', is that correct? If though, what about 'inverting' your logo, making itself transparent and give the background a neutral color like black or white or something. Then you could put two divs upon each other, with the top being your Logo.
I created a fiddle to show you what I mean:
http://jsfiddle.net/ds82/R4rBH/2/
Der circle is the logo and it's transparent inside and outside the blue line and it's a svg. Hope that is what you want.
I don't think you are going to be able to do that. I once saw a plugin and a generator like this, though I think that that is probably not your best bet.
I would incorporate whatever text you wanted to clip in the svg which I'm sure is easier to do than finding a way for your html to interact properly with the svg.
Well since I couldn't do it through .svg I ended up just using a .png where everything is black and my Logo is transparent. Kind of sad that I couldn't find the answer though...
Basically what you want to do works only in Firefox at the moment. The way is to define the correct <mask> element in SVG and then apply it via CSS:
#content {
mask: url(remote.svg#logo-mask);
}
(or, if you embedded the SVG:)
#content {
mask: url(#logo-mask);
}
Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!