royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: My first experience with SVG
Date Sat, 03 Mar 2018 20:29:04 GMT
I’ve used 2 strategies so far in Royale:

1. Subclasses ImageButton and se the src property to an SVG image. This in really only good
for buttons which have an image *inside* the button.
2. Subclass Group and set :hover, :active, etc. using background-image to set the background
of the div to the image which could be SVG.

Harbs

> On Mar 3, 2018, at 8:47 PM, Carlos Rovira <carlosrovira@apache.org> wrote:
> 
> 
> Hi,
> 
> I was this days playing with SVG to skin a button. My target was to try to get a complete
theme that could be skinned only with SVG.
> 
> After playing with Button, I don't see an easy way to make a button works ok with SVG.
I think the way to do this it with "border-image" property in order to have some kind of 9-slice
scaling, but this property seems not to work ok in all browser (let me know if I'm wrong)
[1]
> 
> So for Button I ended using CSS3 properties. In the case of buttons, I must to say that
this seems to target almost 95% of what people expect. And using software like Sketch I think
that get to the final CSS 3 code is in some way "quick".
> 
> For square graphics like radios or checkboxes maybe SVG will fit more easily. I'll let
you know as I get to that.
> 
> btw, although I'm uploading some styles, don't take the current work as final. It should
change a lot as I get more components and rework all as I get more experience I the complete
set. In the end, I have to make a refactor to "Jewel", and the current theme is called blue
but I uploaded a orange button ;), I'm getting some experience on what can I do and what not
:)
> 
> For example this is a first render of the current button, just for fun :)
> 
> 
> 
> 
> [1] https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image <https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image>
> 
> -- 
> Carlos Rovira
> http://about.me/carlosrovira <http://about.me/carlosrovira>
> 


Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message