Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Styling buttons with single images
i am new to css customizing of vaadin, working on a theme for a customer and i am now trying to find the easiest way to get my buttons (created with Adobe Fireworks) working with it. As i see you are using sprite-sets to define the different states for a button. Is there a special reason why you cut the button in a left and right image? Or are there any problems when using a single button image and just adjusting the background-positions for the .v-button and .v-button-wrap? (In my case IE6 doesn't matter any more, as i see you have special sprite sets for IE6)
An idealistic way i can imagine would be to position the three states of the button i need: "normal", "pressed", "disabled" in distinct positions in the y-direction of my image for the three colors "red", "blue" and "green" (9 button images overall) and reference the background-positions like a sprite-set but WITHOUT cutting the buttons into pieces. Is this a good approach? This would enable me to modify the buttons later on more easily without the need of creating correctly cut buttons after each modification.
Thanks for your help and advice,
The reason for the splitting is so that the "curtaining" effect works with 8bit transparency as well, so that the semitransparent parts of the images don't multiply on top of each other (all the core button images have rounded corners with semitransparent edges). This allows the buttons to work nicely on all backgrounds.
If you only use a single color background in your entire application, you can just leave the buttons in tact as a single image for each state.
If you don't need to support IE7, they you could achieve the former case as well with un-cut images by using CSS generated elements (::before and ::after), which work in IE8 and up.
thanks for your help. I experienced this alpha-effect some hours later and saw the reason for 2 distinct images. I now have one big original image with all buttons and cut it into 2 images before using it. This works very fine for me.
Keep up the good work,