Scalable CSS Buttons Using PNG and Background Colors
Scalable CSS Buttons Using PNG and Background Colors
|
|
CSS Buttons demo. Feel free to enlarge font sizes and try the :hover effect. … Link back to the article: Scalable CSS Buttons Using PNG and Background Colors …
Similar Posts
Scalable CSS Buttons Using PNG and Background Colors: etc: a stream of …
Scalable CSS Buttons Using PNG and Background Colors: resources for webdev, css, web design ,digital photography, firefox, Photoshop, movable type etc.Clik International :: Websites Templates :: Web Elements :: CSS Shiny …
Downloadable file: CSS & HTML; images. Helping to design your website with … css, buttons, link, hover, mouse-over effect, event, onclick event, background images. …Dynamic Drive CSS Library- CSS Oval buttons
These buttons use the sliding doors technique of CSS, plus two sliced background … Each button can accommodate text of variable widths and supports a hover effect …How to Make Sexy Buttons with CSS | Web Resources | WebAppers
… create pretty looking textual buttons (with alternate pressed state) using CSS. … Beautiful Scalable CSS Buttons. Simple Round CSS Buttons ( Wii Buttons ) …CSS
… used CSS to change all the background colors, font colors, font … { background-color: rgb(0,0,0); color: rgb(255,204,0); To view our css page Click here …CSS Drive- Mark’s Blue Blocks Menu
A very attractive “blocks” CSS menu with hover effect. … CSS Code Readability Tips - (0) Block Style Font - (13) Form field Limiter v2.0 - (4) …CSS Magic with Fixed Background-attachment
I’m sure many of you are familiar with Eric Meyer’s Complexspiral demo, which was created to demonstrate the power of CSS and the background-attachment attribute. There are many other sites that use this concept to achieve a similar effect, providing added visual interest to the viewer. This can be seen in sites such as We Bleed Design, Westciv, Econsultancy, and even CSS Zen Garden. It has been used for years by Timpelen.
Ask the CSS Guy has come up with a short, easy to understand tutorial to help you achieve this effect. He also provides three nice examples using this same technique:
In the above examples no JavaScript was used at all, only CSS, that’s MAGIC! 
a:link : Anchor class " Basic Tags " HTML / CSS
HTML / CSS ” Basic Tags ” Anchor class. a:link … Three level nesting for an anchor with id. 18. background image, repeat and position for anchor link hover. 19. …12 Creative and Cool Uses for the CSS Border Property
If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?
Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for.
Jazzing Up Anchors
I’ve written here before about jazzing up anchor tags by changing the color, removing the underline, and adding background images. But border can be a great way to add a bit of visual style to your anchors without adding that great bit of accessibility that the underline provides. For example, CSS Newbie’s article links are currently styled with a dotted border, like so:
.entry a {
color: #253c93;
text-decoration: none;
border-bottom: 1px dotted #253c93; }
.entry a:hover {
border-bottom: 1px solid #253c93; }
That gives me a nice dotted border that turns solid when the user hovers over the link. All sorts of style and accessibility without that so-’90s underline.
Build a Postage Stamp
A while back, I ran across a cool little technique for faking a postage stamp using the CSS border property. The original link seems to have been lost from the web, but here’s the basic technique, in XHTML:
<div class="stamp"> <p>99¢</p> </div>
And CSS:
.stamp {
width: 500px;
height: 414px;
background: #fff url(george.jpg) no-repeat;
border: 12px dashed #1b1a19; }
.stamp p {
color: #fff;
margin: 10px 10px 0 0;
font: bold 60px Georgia, "Times New Roman", Times, serif;
text-align: right; }
Now, you could obviously take this even further with a bit of skill and a degree in something other than Rhetoric, but I think you get the idea. You can see the example live here.
Prettier Images
Borders are a great way to make your excellent images stand out even more. I wrote an article on the subject a while back, but here’s the basic idea:
img.photo {
border: 1px solid #999;
background-color: #fcfcfc;
padding: 4px;}
You can see a similar technique used on CSS Newbie’s current design around all of the images in the articles, as well as the ads in the sidebar. As you can see, the technique can be subtle but visually pleasing if used properly.
Homemade Coupons
If you’re ever required to design an online coupon, you needn’t turn straight to Photoshop or the like. You can craft a coupon easily with just a bit of CSS:
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
Just that speck of code gives me a nice coupon that looks something like this:
You’ll have your readers printing and clipping in no time.
Better Blockquotes
Blockquotes are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed prose:
blockquote {
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }
Just a touch of code, and voila… instant credibility!
Hunt Archaic Code
If you ever take over a website (or perhaps built a website) that is still using the Code of Yesteryear, consider turning to CSS and the border property for help hunting down bits of HTML soup that could use a bit less seasoning:
font, center, s, u, b, i {
color: #000;
font-weight: bold;
background-color: #f99;
border: 3px solid #c00; }
For more information on this useful technique, see my article on finding deprecated elements with diagnostic CSS highlighting. It just might save your life someday. But I doubt it.
Round the Bend
So far, all of our techniques have had one thing in common: boxy edges. But if you’re using a browser developed within the last five or so years (read: not IE6), you’re not limited to those same old dull right angles. This article from last August shows us that CSS3 offers us a way of breaking out of — or at least bending the corners of — the CSS box:
div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
The border-radius properties allow us to round the corners of elements without having to resort to images. Cool indeed!
Angle it In
Of course, not all angles are bad angles… if used properly. Way back in the day, CSS guru Eric Meyer pointed out a way to use borders to create some pretty wicked angles. If you’d like to learn more about this technique, his site is a great place to start.
CSS Drawings
And now for a bit of fun! The following excellent (and cool) examples are all drawn using the CSS border property.
This functional LCD-style digital clock was built using CSS borders to create the lines of the LCD. Check out tanfa.co.uk to see it in action!
There’s something very pop-art about this CSS skyline. It leans heavily on the border property to create the buildings and windows.
Here’s a random art generator that combines HTML, JavaScript, and the CSS border property to create random examples of modern art. If you hit the “update” button long enough, you’re bound to find something worthy of hanging on your (cubicle?) wall.
Christopher Hester is a man with fantastic CSS skill, incalculable patience, and presumably no girlfriend — at least until he started impressing the ladies with this house he built with the CSS border property. And be sure to check out his second CSS house, which he built using background colors and approximately 50 gazillion non-semantic divs.
If you know of any other fantastic uses for the CSS border property, be sure to mention them in the comments!
