Re: Use of advanced CSS3 in HTML export
Gary, the difference is the code which is exported. Xara will generate a bitmap with the button and the shadow, where as the plug-in will generate HTML and CSS which will be rendered into the button.
You may ask: "Why is that smart?"
It depends ofcause of the situation, but here are some arguments for using CSS based buttons:
a) The CSS button will contain text which can be read by search engines, can be changed easily (for instance translated)
b) The colors, shadows, gradients, size and other CSS effects can be dynamically changed using script or CSS code on the client (without having to export again each time)
c) The byte size is smaller for text/css based buttons
With HTML5 and CSS3 the web offers a lot of effects normally made in a drawing program like photoshop and Xara Designer Pro.
Did you know that round corners can be applied to ANY HTML element simply by adding the code below to the element through CSS?
<div class="round">I have round corners</div>
<img src="photo.jpg" class="round" title="I also have round corners" />
You can try to play around with it in your browser. http://jsfiddle.net/netsi1964/j5tE7/17/
Some of this CSS is perhaps not too easy to understand if You are not working with CSS but believe me it is simple stuff for frontend developers :-)
There are many online free webapps like jsFiddle, for instance I also used "Prefixr" (http://prefixr.com/index.php) which will automatically add "vendor prefixes" to your CSS. Vendor prefixes are temporary CSS which are used until the browsers agree on standard for things like box-shadow.
Hope this did not get too technical :-) But you can see how easy an effect can be applied dynamically. Just imagine that to get the round cornor/drop shadow on the cat (on my jsFiddle) you would need to create it 4 times in Xara and export it 4 times. Not only would it take more time, but it would require a lot more bytes, making the website be more heavy for any visiting client.
Also I have added animation to the hover effects simply by adding this CSS code:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
It simply states that changes to any attribute ("all") should be animated over 1 second ("1s"). Because this is a new standard and to be sure that it works in various browsers (for now) the transition is repeated for each vendor. For instance "-ms-" is microsoft internet explorer.
Hope you learned something from this post :-)
"Everything has two sides"