ThatGuyCharlie | Charlie Mathews Blog & Portfolio » css

Professional CSS Alert Boxes

Charlie — Thu, 21 Jan 2010 11:56:47 +0000

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

The Code

The images needed can be found in the download below.








Information you need to know



Alert you triggered



Error with our code

Download

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

CSS Powered Percentage Bar

Charlie — Thu, 07 Jan 2010 11:07:01 +0000

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

The Code



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>
</pre>
<p>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.</p>
<p>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 <a href="http://www.simpleshare.vividperfection.com/privateuploads/css_percentage_bar.zip">the download</a> to get the images and full code I used in my demo image.</p>

</article>
<article>
<h1>How to Create a CSS Stylesheet</h1>
<p>Charlie — Tue, 29 Dec 2009 06:01:47 +0000</p>
<p>Although simple, this is a question I’ve been asked numerous times by learner developers. This “tutorial” assumes you have also never created a html and css webpage before because the two facets are so closely linked.</p>
<h2>About</h2>
<p>Firstly, you need to understand what CSS is. CSS stands for Cascading StyleSheet and it is the key element of web development. CSS is used to tell a webpage how you want it to look. It can be used to define id’s, classes, and other html elements.</p>
<p>You can load a stylesheet in html using this code:</p>
<p style="padding-left: 30px;"><span style="font-size: x-small;"><em><link rel=”stylesheet” type=”text/css” href=”yourstyle.css”/> </em></span></p>
<h2>Example</h2>
<p>Now, an example. Create a new file in notepad or a similar text editor and save it as <span style="text-decoration: underline;">style.css</span> to a folder on your computer. Repeat this and create another file called <span style="text-decoration: underline;">index.html</span> and save it to the same folder as your style.css file. <span id="more-923"></span>Open your index.html in a text editor and add this code:</p>
<p style="padding-left: 30px;"><em><span style="font-size: x-small;"><html></span></em></p>
<p style="padding-left: 30px;"><em><span style="font-size: x-small;"><head></span></em></p>
<p style="padding-left: 30px;"><em><span style="font-size: x-small;"><title>My First Webpage
 


Sample Text


 


As you can see, we have added a 
 element with a class of “mybox”. Now, open your style.css and add the div class by typing this code.
.mybox {
width: 100px ;
height: 100px;
background-color: #000000 ;

 
}
Save your style.css and index.html.
Explanation
What you have just done is told the “mybox” class to be 100 pixels high by 100 pixels wide with a background color of black (which is the same as #000000). Double click index.html and it will open in your default web browser. See your black box? Pretty cool, hu?
There are hundreds of ways and commands you can use in CSS so I’d recommend reading more about CSS at W3Schools. Have fun!

Firefox Plugins You Just can't Live Without

Charlie — Tue, 10 Nov 2009 21:44:47 +0000

After, using Internet Explorer for years, the speed and amazing customization abilities of Firefox astounded me. I finally understood why people went on and on about “Firefox, the best browser ever”. Even so, it took me a while to find customizations (plugins) which could really tap into the full power of this new browser. Here are the top choices I use as a web developer and full time internet surfer.

1) Download Status Bar
No Kidding, If it were not for this smart plug-in, I would become a raving maniac a long time ago. The number of small file downloads I make on a regular basis causes the constant download box pop-ups to turn into a big pain. The Download Status Bar packs all the information you want to see such as download name, speed, and amount completed into a status bar which appears at the bottom of your browser for easy and uninterrupted browsing.

2) Firebug

This plug-in is the ultimate tool for any web developer using HTML, CSS, and Javascript. It allows you to edit your web page and view the changes in real time. You can hover over elements in your code and see exactly how your div’s are being positioned and displayed with a highlight tool. Over all it’s other features, my favorite is the ability to edit HTML and CSS for any element in an instant.

3) Xmarks (FoxMarks)

Over the years, I have often lost computers to fatal errors and blue screens. In doing so, I lost all my bookmarks which are essential to my daily work online. This nifty service saves you from ever having that problem. It backs up your bookmarks every time you exit the browser and they are then made available to you online or restore-able to a new computer.

4) DownloadHelper

Ever seen media players in a web-page with no download option? This easy to use plugin tracks actively streaming videos and mp3′s and makes it possible for you to download videos from most popular sharing sites.

5) DownThemAll!

For easy file downloads, this download manager is the first of it’s kind available in Firefox. It makes the job of downloading split files a whole bunch easier without installing extra, spyware ridden software.