CSS

Creating Resizeable Buttons in CSS

Tagged:  

Have you ever designed a page for a web application and wanted to make a nice button for the application? You probably opened your photo editor and started working on the button. But, what if your design resizes itself based on the users browser size? You will probably want the button to resize as well. Well, over at CSS Globe they have written a script to do just that using CSS.

Below is an excerpt from the article explaining the concept.

Concept

This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

image

This one is 550px wide. I believe that is more than sufficient for buttons :)

So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

image

Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.

To make sure that the text is vertically centered I use line-height property.

The HTML that is required for applying the CSS to would be the below.

<button><span><em>Button text</em></span></button>

The below is the CSS that is used.

button{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	overflow:visible;					
	text-align:center;	
	white-space:nowrap;	
	height:40px;
	line-height:38px;			
	}
button span, button em{
	display:block;
	height:40px;
	line-height:38px;			
	margin:0;
	color:#954b05;
	}
button span{
	padding-left:20px;
	background:url(bg_button.gif) no-repeat 0 0;
	}	
button em{
	font-style:normal;
	padding-right:20px;
	background:url(bg_button.gif) no-repeat 100% 0;
	}

You can read the full post here.

You can see the demo here and you can download the source code and image here.

This code could be very useful and I will probably use it in my next application. If you have used a technique like this in an application that you've made I'd love to hear about it, you can leave it in the comments.

Beginner CSS Tutorial

Tagged:  

I came across this beginner CSS tutorial I'd like to share with those of you that haven't had much experience with CSS.

Topic's include:
* What Is CSS?
* CSS Selectors
* CSS Units
* CSS Inline
* CSS Internal
* CSS External
* CSS Colors
* CSS Fonts
* CSS Text

Here's an excerpt from the tutorial on the advantages of CSS:

* Quick layout changes: Because all your CSS styles are in one or more .css files which are re-used for all pages it's easy to change the look of your website. For instance to add a 5 pixel wide red border to all your images you can simply write img {border:5px solid red}. This saves a lot of time as opposed to changing every single image tag in all your pages.
* Smaller file size: Separating content from presentation helps keep HTML file sizes down and improves page loading times. Once CSS files have been loaded for the first time they will be cached by the browser and loaded instantly for all following pages that use the same style sheets.
* Consistency: With CSS it's easy to keep a consistent look throughout your website.
* Cascading: Multiple style definitions will cascade into one, i.e. the last written one will overwrite all previous ones. This is very useful if you need to work with an existing style sheet and want to make some changes without altering the original code.
* Accessibility: Having content separated from presentation is a great help to people with viewing disabilities who often benefit from well structured HTML to understand the page.
* Design without tables: Before CSS lots of web designers mis-used tables to position elements on their page which is a bad thing for accessibility and also makes the code unnecessarily big and complicated. With CSS you can position any element exactly where you want without using tables.

Click here to visit the tutorial

Syndicate content