Category Archives: CSS
Transparency is a very common design element that is used on many websites today. However as web-developers, we know that getting the desired effect with CSS is not as simple as it sounds. It is not like adjusting the opacity in Adobe Photoshop or Illustrator. There are actually many hoops that we would need to jump through to achieve the desire look. You might think of “opacity” or a 24-bit PNG file when you hear the word transparency, but those … Continue reading
This post will demonstrate how to create custom check boxes and radio buttons using only CSS. No Javascript will be used in this demostration. Demo: Download Source files: rar | zip HTML: <p><input type=”checkbox” class=”checkbox” id=”check01″/><label for=”check01″>Checkbox</label></p> <p><input type=”checkbox” class=”checkbox” id=”check02″/><label for=”check02″>Checkbox2</label></p> <p><input type=”radio” value=”male” id=”male” name=”gender” /> <label for=”male”>Male</label></p> <p><input type=”radio” value=”Female” id=”female” name=”gender” /> <label for=”female”>Female</label></p> <!– DISABLED –> <p><input type=”checkbox” value=”male” disabled /> <label> disabled </label></p> <p><input type=”radio” value=”24″ name=”age” disabled /> <label> disabled</label></p> <!– CHECKED DISABLED … Continue reading
This quick and easy CSS technique will demonstrates how to vertically align a one line text. It is perfect for headers. Demo: Header HTML: <h1 id=”header”>Title</h1> CSS: h1#header{ height:25px; line-height:25px; padding:0 10px; } Tested on: IE 6, 7, 8, and 9, Safari, Firefox, Chrome, and Opera
Have you ever wondered how people get the footer to always stick to the bottom of the page? Have you ever tried to make it work for yourself but it doesn’t seem to come out right? Well…believe or not, it is much easier than you think. All we need is a few lines of CSS and some HTML markup, then VOILA! you got yourself a sticky footer. HTML: <body> <div id=”wrapper”> <p>Your content</p> </div> <div id=”footer”> <p>Your footer content.</p> </div> … Continue reading