Advanced CSS Buttons - HTML
Advanced CSS Buttons - HTML
|
|
Advanced CSS Buttons - HTML is a personally written site at BellaOnline … <a href=”#” class=”button”>TEXT</a> Now switch your CSS rules to this… .button …
Similar Posts
Beautiful CSS buttons with icon set
<a href=”#” class=”button”> <span class=”user”>Add to friends</span> </a> Step 2: CSS Code … http://sabbour.wordpress.com/2008/07/03/clean-css-buttons …SS buttons for navigation - DoMediaC
This document describes how you can achieve mouseover effects on buttons made by CSS … CSS Navigation Buttons or menu … class=”button”>CSS Button 5</a> …CSS input boxes and submit buttons | CSS button
Collection of CSS buttons and tools to create your own simple buttons plus techniques to improve forms using css … class=”button” /> </form> CSS .input …HTML Check List: check your HTML
Move arrangement attributes (align, valign, width, height) to CSS. … Design of input fields and buttons must be written as class in CSS. …CSS Oval buttons
CSS Oval Buttons. Each button can accommodate text of variable widths and … Oval CSS buttons by Dynamic Drive. These buttons use the sliding doors technique …5 Ways To Optimize Your CSS
Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.
Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.
For example, the code below:
<p class="someClass">First</p>
<p class=”someClass”>Second</p>
<p class=”someClass”>Third</p>
<p class=”someClass”>Forth</p>
<p class=”someClass”>Fifth</p>
Can be rewritten this way:
<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
But what if our code looks like this:
<p class="firstClass">First</p>
<p class=”someClass”>Second</p>
<p class=”someClass”>Third</p>
<p class=”someClass”>Forth</p>
<p class=”someClass”>Fifth</p>
We can take advantage of CSS by rewriting HTML this way:
<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.
This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.
Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.
Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
Original longhand:
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.