Showing all articles tagged with CSS
27 July 2007
CSS, Web Design
A window is essentially just a floating div. We can make the div draggable using the Script.aculo.us Javascript library.
First, we need to create the window div. Here is the CSS I used.
.window {
background: #d8e7fe;
position: absolute;
top: 200px;
left: 200px;
width: 350px;
padding: 1px;
-moz-border-radius: 7px;
border: 2px solid #21416d;
}
.window h1 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
padding: 6px;
display: block;
background-color: #9cc6ff;
font-size: 13px;
margin: 0px;
}
And here is the HTML markup.
<div id="mywindow" class="window">
<h1>Example Window</h1>
<p>Click and drag this window around the webpage.</p>
</div>
I've used '-moz-border-radius' for rounded corners because I'm lazy. You'll need to use corner images if you want rounded corners that work in more than one browser.
Now all that's left to do is the javascript. As I said before, we'll use the Script.aculo.us library which includes a handy Draggable function. Theres a quick guide on how to install the library here.
Once you've got the library installed, add this short Javascript snippet to the head section of your document.
<script type="text/javascript">
function init(){
new Draggable('mywindow');
}
Event.observe(window, 'load', init, false);
</script>When the page loads, the init() function is called, which tells the library to make the div 'mywindow' draggable!
View the finished product.
25 July 2007
CSS, Web Design
Making a password strength meter is simple, there's no tricky Javascript or AJAX needed, just a simple function and a few divs.
Click to view demo.
I've decided to design the function around a scoring system, the stronger the password the higher the score. We can accomplish this with just a few simple IF statements.
function passwordStrength(pass)
{
var score = 0;
if(pass.length > 2)
score++;
if(pass.length > 4)
score++;
if(pass.length > 8)
score += 2;
if(/\w/.test(pass) && /\d/.test(pass))
score++;
return score * 2 * 10;
}The code is fairly self explanatory, the last IF statement checks if the password contains both characters and symbols. The function returns a percentage of the password's score out of 5, which is the maximum score it can be awarded.
Next, we need a form with a text box and 2 divs for our meter.
<input type="text" onkeyup="document.getElementById('passmeter').style.width = passwordStrength(this.value) + '%';" />
<br />
Password Strength:<br />
<div id="passmeterbg"><div id="passmeter"></div></div>
The 'onkeyup' event calls the passwordStrength() function every time a key is pressed. The 'width' property of our meter div is then given the password's score.
Finally, we need some CSS to style the meter...
#passmeter {
width: 0px;
background: #629d48;
height: 3px;
}
#passmeterbg {
height: 3px;
background: #f1f1f1;
width: 200px;
}
View the finished product.
18 July 2007
Web Design, CSS
Since my last web design article was so popular, I decided to write a similar one.
This time we'll start with an ordinary looking login form. The usability experts reading this will immediately notice a few design flaws.
For small forms like this one, field labels should be aligned to the right to minimize the distance your user's eyes must travel. I've also moved the link and submit button directly under the input boxes.
I've encapsulated the form in a fieldset (<fieldset></fieldset>) and replaced the title with a legend (<legend></legend>). This isn't normally nessesary but it helped define the form within all the surrounding white space.
Styling the legend...
I've added a yellow background and border to the fieldset and given it some rounded corners. I also moved the submit button to the bottom right so less eye movement is required by the user.
30 January 2007
CSS
CSS Diagrams via CSS-Techniques You Couldn't Live Without.
"I wanted the diagrams to contain links to other diagrams, and since the rest of the text was in a fluid layout where the user could alter the text size, it would be nice to have the same features in the diagrams. But you can't draw diagrams with HTML and CSS, right? I mean, right?"