Author: Builder.com
2005-01-12 09:52 AM
The efficiency of the CSS button is much higher than the button of the basic image, because they are all based on the text. All the XHTML tags are just a unordered list - CSS style is responsible for the rest. Moreover, you don't need any JavaScript to exchange images to implement flip effect, because CSS PseudoClass enables you to link each state (link , has been accessed
The only problem with pure CSS button is that they look quite monotonous, only a fixed color background and a simple boundary. A solution is to use a mixed technology to add a background image to the CSS style text button, thereby having a 3D effect. However, the reader's email prompts to find a way to create a 3D button effect using pure CSS - no image. I found that there are two ways to create a slope edge by controlling the style of the CSS button boundary.
Create a bevel edge effect
To make a button have a 3D bevel edge effect, you need to simulate a light source to create an overlinked area and a shaded zone at the edge of a raised button. If the light source is slightly biased toward the left side of the button, the top and left sides of the button are brighter than the button surface, and the bottom and right side are darker than the button surface.
Therefore, creating a three-dimensional effect is the side of the CSS boundary analog button and a slightly different color for each boundary, and the specific color scheme is dependent on the light side or the dark side. . In order to look more real, the boundary should have a ramp, the CSS boundary can meet this needs well.
Method 1: Use INSET / OUTSET (Embedded Cord / Floatline) boundaries
There is a CSS boundary attribute to automatically generate a reasonable bevel edge simulation effect. You only have to specify as INSET or OUTSET for the Border-style property of the button style. The browser will handle the details of the performance of the element boundary with a slightly different background, resulting in a desired effect. The OutSet property is analog the shadow edge of the projection button, and the INSET property is analog button to be pressed by reversing the shadow.
Figure A shows the actual INSET / OUTSET boundary effect. This example is generated by some very simple code. XHTML is very simple, only some buttons tabs (Label) and links.
The CSS style makes this method very similar to the style of designing a normal flat button. The only place is to use Border-style: outset and border-style: INSET rules to set Border-Width settings, which makes it visible to the boundary width.
Body {margin: 0px; padding: 0px;} div # Buttona {margin-left: 50px;} Div # Buttonaul {Margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, Sans-Serif; Font- Size: 12px; line-height: 30px;} div # Buttonali {list-style-type: none; height: 30px; width: 125px; margin: 20px; text-align: center;} Div # buttonali a {height: 100 %; Width: 100%; Display: block; text-decoration: none; border-width: 6px;} Div # Buttonalia: link {color: # 000000; font-weight: bold; background-color: #cccccc; border- STYLE: OUTSET;} Div # Buttonalia: visited {color: # 000000; font-weight: Normal; Background-color: #ccccccccccccccc; border-style: outset;} Div # Buttonalia: Hover {font-weight: bold; color: #Ffffff; background-color: # 999999; border-style: outset;} div # buttonalia: Active {font-weight: bold; color: #fffff; background-color: # 666666; border-style: INSET;} in front In the article I have already talked about the way to create a CSS button, so I will only select some of the sections.
Div # ButtonAul rules Set the size and spacing of general text, Div # Buttonali rules remove the default item symbols for the list item (List-style-type: none) and set the size of the button box. Div # Buttonali A rule makes the entire button (Height: 100%; width: 100%; Display: block;), it still sets a very convenient place for boundary width.
The remainder of the style controls the appearance of different button states. All pseudo classes (: link,: visited,: hover,: active) have a Color, Font-Weight, Background-Color, and Border-Style rules. In addition to Div # Buttonalia: Active rules, all styles use border-style: Outset rules, Div # Buttonalia: Active uses Border-style: INSET rules. This makes the button state have a projection - Of course, except when the button is clicked, and it is presented when the button is clicked.
Different browsers present the INSET and OUTSET boundaries. Internet Explorer creates a finer effect, with a bright spot in the inner edge of each boundary, has a shaded area on the outer edge. On the other hand, Netscape presents each boundary at a fixed color, which produces a more obstacted, not very smooth appearance.
Method 2: Control a single side
Use the INSET / OUTSET boundary style is a simple and quick way to simulate 3D effects. However, this is not the only way. If you don't like the standard effect, or you are troubled by the browser in the way of expression, then you can control the color of the boundary to generate the effect you want. In addition to using an INSET / OUTSET / OUTSET attribute that can border-style and allows the browser to handle the actual color of each boundary, you can also use your own style rules to set colors separately for each boundary.
Figure B Shows The Results of Using A Style Sheet That Spect Individally. The Markup Is The Same As in Figure A. Here's The CSS CoDE:
Figure B shows the 3D button effect of this method, where the style sheet specifies the color of each button. The marks used in Figure B are the same as in Figure A, and below is CSS code:
Body {margin: 0px; padding: 0px;} div # Buttona {margin-left: 50px;} Div # Buttonaul {Margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, Sans-Serif; Font- Size: 12px; line-height: 30px;} Div # Buttonali {List-style-type: none; height: 30px; width: 125px; margin: 10px; text-align: center;} Div # buttonali a {text-Divoration : None; Height: 100%; width: 100%; Display: block; background-color: # 999999; border-style: solid; border-bottom-color: # 333333; border-right-color: # 555555; border- Left-color: #bbbbbb; border-top-color: #ddddddd;} Div # Buttonalia: link {color: # 000000; font-weight: bold; background-color: # 999999; border-style: solid; border-bottom -Color: # 333333; Border-Right-Color: # 555555; border-left-color: #bbbbbbb; border-top-color: #dddddd;} Div # Buttonalia: visited {color: # 000000; Font-Weight: Normal Background-color: # 999999; border-style: solId; border-bottom-color : # 333333; border-right-color: # 555555; border-left-color: #bbbbbbb; border-top-color: #dddddd;} Div # Buttonalia: Hover {font-weight: bold; color: #ffff; background; -Color: # 777777; border-style: Solid; border-bottom-color: # 333333; border-right-color: # 555555; border-left-color: #bbbbbbb; border-top-color: #ddddddd;} #buttonalia: Active {Font-Weight: bold; color: #ffff; Background-Color: # 666666; border-style: solid; border-top-color: # 333333; border-left-color: # 555555; border-right -Color: #bbbbbb; border-bottom-color: #dddddd;
Although this code is obviously longer than the CSS code in the previous example, it is not the main difference between the two. Their main difference is that this Border-style: Solid rule replaces the original Border-style: outset rule, and then sets the color of each border separately (Border-top) -color: #ddddddd, etc.). Using this method, you can fully control the color of the button side. That is to say, you have to choose the right color to get what you want - and you have to remember the exchange color to make the button in: Active status to generate the effect. The advantage of controlling these details is that you can set the colors of the stand-alone side and top bright districts, and the last result is more consistent in all browsers.
