background preloader

CSS3 Gradient Buttons

CSS3 Gradient Buttons
Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. Color Gradient Styles The code below is the CSS styling for the orange button.

http://webdesignerwall.com/tutorials/css3-gradient-buttons

CSS Shorthand CSS Shorthand is a very useful thing to know as it will keep your style sheets more organized and also keep the file sizes down. One of the nicest features supported in CSS2 is the ability to use shorthand as well as longhand. While most people familiar with cascading style sheets use shorthand to some extent, there are several lesser known properties in which shorthand can be applied.

4 methods of adding CSS to HTML: link, embed, inline and import by Matthew James Taylor on 18 February 2009 There is more than one way to add a Cascading Style Sheet (CSS) to your HTML document. In this short tutorial I will explain the strengths and weaknesses of the four main methods. Linking to a separate CSS file

Top 10 CSS Table Designs - Smashing Magazine Advertisement Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. In fact most don’t even realize just how bad their experience can be. This is why we made a new book called “User Experience Revolution,” a practical battle plan for placing the user at the heart of your company.

How to create Tabs with CSS and jQuery from scratch Another feature that is often added to Web 2.0 sites is tabbed content. I'm not talking about tabbed navigation. Tabbed content is when different chunks of HTML are shown depending on what tab is clicked. If you don't know about jQuery yet, let me have the pleasure to introduce you to it. It's a very easy-to-use JavaScript library that offers easy DOM manipulation, effects and a ton more. Top 10 CSS Sites 0Google + There are hundreds of sites that offer tutorials, examples and inspiration about CSS. In no particular order, here's a list of my favorites that I visit on a regular basis. 1. 456 Berea Street

How to Create a Drop-down Nav Menu With HTML5, CSS3 and JQuery In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us. HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware.

CSS Techniques Roundup - 20 CSS Tips and Tricks September 22, 2005 Related Entries 55 people found this page useful, what do you think? How To Use CSS3 Media Queries To Create a Mobile Version of Your Website Advertisement CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8.

Wanted: Layout System (This is part of the Feedback on ‘WaSP Community CSS3 Feedback 2008′ series.) Not surprisingly, there was a lot of community feedback asking for better layout mechanisms. Actually, people were asking for any decent layout mechanism at all, which CSS has historically lacked. Floats mostly work, but they’re a hack and can be annoyingly fragile even when you ignore old-browser bugs. Positioning works in limited cases, but does not handle web-oriented layout at all well.

Related: