Welcome to TalkGraphics.com
Results 1 to 8 of 8

Hybrid View

  1. #1
    Join Date
    Aug 2000
    Location
    Skødstrup, Denmark
    Posts
    251

    Default Use of advanced CSS3 in HTML export

    Hi,
    It would be great if Xara could use advanced CSS3 and SVG when exporting shapes to HTML. This is a video showing how a plugin for Adobe Photoshop which can generate CSS3 for shadows, gradients and more. See it as an example of what can be done using CSS3. http://screencast.com/t/j5EKEztFVreZ...JIzkn9GN1uSu0A

    The CSS3 is generated by a addin for Photoshop called CSSHat (https://csshat.com/)
    Cheers,

    Sten
    "Everything has two sides"

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,486

    Default Re: Use of advanced CSS3 in HTML export

    I am sure I am missing something, but Xara does all that by pressing one button and dragging the shadow around.

    I know that there are some cool things you can do, someone posted some buttons that expand and contract that was impressive, but this Photoshop plug-in...?

  3. #3
    Join Date
    Aug 2000
    Location
    Skødstrup, Denmark
    Posts
    251

    Default 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?
    CSS:
    .round {
    border-radius: 10px;
    }

    HTML:
    <div class="round">I have round corners</div>
    <img src="photo.jpg" class="round" title="I also have round corners" />

    I have made a simple implementation using jsFiddle (an online tool where you can enter HTML, CSS and javascript and run it).
    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 :-)


    Cheers,

    Sten
    "Everything has two sides"

  4. #4

    Default Re: Use of advanced CSS3 in HTML export

    I guess Xara will likely support some CSS3 in future (probably already does via placeholders), but at the moment it's not a standard or is there full cross browser support.

    Remembering Designers' roots as a vector illustration application I think bringing in this level of coding to the HTMLfilter.dll would require a whole new approach and possibly new UIs of a significant nature.

  5. #5
    Join Date
    Aug 2000
    Location
    Skødstrup, Denmark
    Posts
    251

    Default Re: Use of advanced CSS3 in HTML export

    Sledger: I have no doubt that it is not easy :-) But the trend now on frontend development is to use these advanced HTML5 and CSS3 features together with javascript polyfills (which in most cases can make older browsers render advanced features).
    The global trend is also that modern browsers are more spread. Curently Google Chrome on a global base is the most used browser. Microsoft will release Internet Explorer 10 soon, and it will start to support these features even more.
    Another aspect is also that mobile browsers are becoming a big factor with things like smart phones and iPad (and other pads). Another thing is an open source browser engine like webkit, which is used in Google Chrome, Apple Safari, iOS (iPad/iPhone) and Android mobile OS. Actually also modern TV sets like the 8 series from Samsung uses webkit. Apps for Samsung TV is a collection of HTML/CSS and javascript.

    The support for various CSS3 and HTML5 stuff can be checked on for instance: http://www.browsersupport.net/ and http://caniuse.com/

    Also, please read my post as inspiration :-)
    Cheers,

    Sten
    "Everything has two sides"

  6. #6

    Default Re: Use of advanced CSS3 in HTML export

    No argument from me mate, just trying to add some perspective and a little personal reasoning
    Remember, Xara isn't and doesn't want to be a HTML editor. We aren't talking about keeping up with high-end, high-priced professional web development applications.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •