1 Attachment(s)
Highlighting Acorns excellent CSS3 Image Filter Generator.
Recently Acorn answered a thread in a very quiet backwater of the Forums.
LINK
I believe it needs more of a spotlight so I've created this post.
I attach a xar file using his filter.
Here's what it's capable of:
DEMO
Gone into my Goodies folder.
Now I'm going to be cheeky and ask Acorn if the filter could in anyway contain a rotation element?
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Quote:
Originally Posted by
Egg Bramhill
Now I'm going to be cheeky and ask Acorn if the filter could in anyway contain a rotation element?
Egg, thank you for the plug.
I don't understand your ask on "a rotation element"?
Acorn
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Hi Acorn. I create animated svg's like the one in my example. They only animate in the original orientation they where created in. Is there a way to rotate them using your generator or somehow else?
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Quote:
Originally Posted by
Egg Bramhill
Hi Acorn. I create animated svg's like the one in my example. They only animate in the original orientation they where created in. Is there a way to rotate them using your generator or somehow else?
Egg, that would probably be a CSS transform: rotate(degrees); on the SVG tag or its ID.
Acorn
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Thanks Acorn. To late tonight, I'll look into it later ;)
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Just checked.
Select the SVG Placeholder and in Xara add a Name/ID/Anchor e.g., freda.
Add <style> #freda {transform: rotate(10deg); } </style>
Acorn
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
...and considerably more fun with:
Code:
<style>
#freda {
transition: 1s;
}
#freda:hover {
transform: rotate(180deg);
}
</style>
or
Code:
<style>
#freda:hover {
animation: spin 0.5s infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Acorn
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Cheers Acorn, that's great!
DEMO
Re: Highlighting Acorns excellent CSS3 Image Filter Generator.
Quote:
Originally Posted by
Egg Bramhill
Cheers Acorn, that's great!
DEMO
Thought it would appeal.
I like how you kept freda on and didn't furlough her.
Acorn