Step 1:
The generated corner; top-l-err.png (by the online tool presented above) has 3 properties:
- A white background: you can choose your own depending on what is the background you are using in your template;
- A border color: Same color of the defined box border;
- A foreground color: This is the same as the content color of the box.
top-l-err.png will be placed in the top left of the box thanks to top-left-error CSS class.
Here you can understand the importance of the white background of top-l-err.png which will hide the “real” box border.
Step 2:
dot-err.png (1x1) is repeated horizontally thanks to top-error CSS class in order to define a top border for our box.
As
I said before, this same method will be applied for the rest of
borders/corners. We only need to modify the starting position of the
background image as well as background colors.
Now to style our
message box content, we will use for every kind of box a dedicated
class. Here is an example of how we style the error message box:
其他警告視窗範例:
下載範例:
Download Here
留言列表
UX Design (1)
