ThatGuyCharlie | Charlie Mathews Blog & Portfolio » CSS http://www.thatguycharlie.com Charlie Mathews Blog & Portfolio Fri, 25 Jun 2010 17:11:23 +0000 en hourly 1 http://wordpress.org/?v=3.0 Professional CSS Alert Boxes http://www.thatguycharlie.com/2010/professional-css-alert-boxes/ http://www.thatguycharlie.com/2010/professional-css-alert-boxes/#comments Thu, 21 Jan 2010 11:56:47 +0000 Charlie http://www.thatguycharlie.com/?p=1013 When creating a clean and attractive website, you don’t ever want to ruin it with error pages. Although they are not always unavoidable, many scripts can easily return a clean error message. Using a simple bit of CSS makes your errors display in an smooth, non-aggressive way. This method is also very effective in returning little messages to your user such as “you are now logged in” or “you received a message”.

How

By using the “border” css property it is easy to add a dark border to the top and bottom of each container. Using a color picker choose a light and dark version of a pastel color of your choice. Using icons from FamFamFam and adding a little padding, “Bamm!”, You’re done!

Demo

[image: alertdemo]

The Code

The images needed can be found in the download below.

<html>

<head>
<style>
body {
	color: ##444444;
	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
	font-size: 10px;
	}

.alert {
	background: #fff6bf url(exclamation.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	}

.info {
	background: #F8FAFC url(information.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #B5D4FE;
	border-bottom: 2px solid #B5D4FE;
	}

.error {
	background: #FFBFBF url(error.png) center no-repeat;
	background-position: 15px 50%;
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #FF2424;
	border-bottom: 2px solid #FF2424;
	}
</style>
</head>

<body>
<div class="info">Information you need to know</div>
<br /><br />
<div class="alert">Alert you triggered</div>
<br /><br />
<div class="error">Error with our code</div>
</body>

</html>

Download

See how simple that was? Download the source and images here.

]]> http://www.thatguycharlie.com/2010/professional-css-alert-boxes/feed/ 8 CSS Powered Percentage Bar http://www.thatguycharlie.com/2010/css-powered-percentage-bar/ http://www.thatguycharlie.com/2010/css-powered-percentage-bar/#comments Thu, 07 Jan 2010 11:07:01 +0000 Charlie http://www.thatguycharlie.com/?p=920 After reading some of the css techniques mentioned at SmashingMagizine, I discovered that they had removed a dead link about a css powered percentage bar. I quickly decided to attempt a recreation of such a useful feature. Anyways, here is the easy code for creating a percentage bar.

Demo

The demo here shows the percentage bar using image backgrounds. This sample code tutorial below will demonstrate using background colors but if you wish to use images like above, refer to this download

[image: percentagebardemo]

The Code

<html>
<head>
<title>CSS Percentage Bar Test<title>
<style>
.bar {
width: 500px ;
height: 20px ;
border: 1px solid #444444;
background-color: #656565 ;
}
.barfill {
height: 20px ;
float: left ;
background-color: #6ba8e5 ;
width: 50% ; /* This is the percentage displayed */
}
</style>
</head>
<body>
<div class="bar">
<div class="barfill">
</div>
</div>
</body>
</html>

This CSS basically is the whole workings of the thing. It creates a bar and then fills it to a certain percent you define. Simple, eh? Try to play with it a bit, It’s amazing fun to mix with some javascript and use as a loading bar or upload progress bar.

What i’ve done is created the div with a class of “bar”. I made this 500 pixels wide and 20 pixels high. I gave it a grey background and gave it a dark grey border. To create the percentage, I then created a div with the class of “barfill” and made this float left inside of the “bar” div. I gave it a blue background and the percentage width I wanted displayed. To get results like the demo image, you would put “43%”. Check out the download to get the images and full code I used in my demo image.

]]> http://www.thatguycharlie.com/2010/css-powered-percentage-bar/feed/ 0