HTML5 and CSS3 Snippets Every Web Developer Show Know: "
With the release of new web standards HTML5 and CSS3 has swept the modern web. Developers from around the world are updating their current websites to be judged properly against semantics. We are also seeing large tech companies such as Google adhering to these new rules and even utilizing some of the newest tags.
But for those new to the field or those who just haven’t kept up with studies, it may be difficult to dive in. That’s why I’ve provided some immeasurable snippets of code to help with any website dev project. These are brief to implement into your code and will add some very neat effects to your layouts.
From basic HTML5 tags to the new CSS3 properties nothing is too far out. With careful planning and attentive design skills you can surely get away with a beautiful website and some fancy new patches of code. If any developers have similar bits of code please feel free to share with the community in the comments section!
Remove textarea scrollbar in Internet Explorer
Most versions of Internet Explorer add a horridly disguisting scrollbar to all textarea elements. This isn’t the case with most any other browser. Luckily this short CSS clip fixes the issue.
textarea { overflow: auto;
}
Full CSS Transparency
This small code snippet will allow any frontend developer to create transparent divisions. Note these CSS properties could be applied to any class or ID, but for this example it’s a containing div element.
.transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
}
...
<div class="box transparent">larger content</div>
X-UA-Compatible
The biggest problem with Internet Explorer comes with how choppy the rendering engine performs. In fact, for many versions of the browser there are multiple engines built-in! It’s an incredible confusing circumstance. This short meta tag will force IE to use the most recent version of its rendering engine.
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Internet Explorer Conditionals
From Microsoft’s many releases of the modern day web browser Internet Explorer includes some fantastic bits of code. These conditional comments added below are just a few examples of the many choices you can have when coding an HTML5 document. If you’d like to apply specific CSS styles to a document based on the vesion of IE these conditional comments allow for the extremes. Customization is huge in web development, and when it comes to Internet Explorer the ideology is no different.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie7"> <![endif]--> <!--[if IE 8 ]> <body class="ie8"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]-->
YUI Fonts Reset
Fonts will render different from a variety of browsers and operating systems. By using simple CSS reset methods it’s a breeze to apply the same sized pixels both in letter size and line height. The short snippet below is based off Yahoo!’s Developer Library from the YUI kit. For better documentation check out YUI developer documentation.
/*
fonts.css from YUI Library: URL - developer.yahoo.com/yui/ */ body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
Force Browser Scrollbar
It’s very common for smaller websites powered with Flash or jQuery effects to mess with browsers. This is especially prudent with older versions of Internet Explorer. When your site won’t display a scrollbar initially it’s possible your visitors will see content jump the page and work around small pixel gaps. The CSS code below will always force a scrollbar which fixes the issue entirely.
html { overflow-y: scroll; }
Display Pointer Cursor over Input Fields
Oddly enough modern browsers will not display a new mouse cursor when hovering over an input field. This has been the case for some time now, but the rules for web development have also been changing. This CSS hack will display a pointer over any clickable input field. This offers great user experience and fixes the mentality of rudimentary forms.
/** label CSS pointer reset **/
label, input[type=button], input[type=submit], button { cursor: pointer; }
Properly Aligned HTML5 Labels
It can become a war zone attempting to align form inputs with their proper labels. This is especially true with checkboxes and radio buttons which seems to float off into pages without notice. The CSS3 code below allows targeting specifically for input fields with radio and checkboxes typeset. There are other ways of accomplishing the same alignment, although this CSS group has been trimmed to just 3 lines of code!
/* @group align radio, labels, forms */
input[type='radio'] { vertical-align: text-bottom; }
input[type='checkbox'] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
CSS3 Preload Images
With modern Internet connections it’s great to see such quick page speeds. However when you’re bundling with many sets of images it’s not too uncommon to see slower load times and higher bandwidth from your web server. The code snippet below is used to pre-load any special images you may need so you visitors won’t need to wait around. This works especially well for logos, sprite sheets, and page icons.
div.imgload { background:url(images/sheet1.gif) no-repeat; background:url(images/sprites.png) no-repeat; background:url(images/mybanner.jpg) no-repeat; margin-left: -99999px;
}
Flip Image with CSS
The CSS3 filters below are not too commonly seen in today’s modern web. The effects aren’t exactle the most desirable, and flipping page images fits into a very specific niche for web design. However try messing around with some of the code and see if you can apply any neat effects to your pages. Similarly off-scale images and rotations work great for hover effects.
img.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: 'FlipH';
}
Pure CSS3 Rounded Corners
In the early 2000 it was a requirement to use images for rounded corners. This effect was most notably used on Digg, before they changed their entire design. Nowadays rounded corners are seen prevalent all around the world wide web. And with the small code snippet below you too can apply these styles into your own web design.
.round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */
}
Min-Height Fix for IE
Up Until IE8/9 the browser hasn’t supported the CSS min-height property. This is huge since it’s a common way for addressing the minimum height a website may fall to – and both Mozilla and Chrome fully support this, along with Opera and others. However with the following rule we set the div height to auto and marked with
!important so nothing may override it! This forces IE to accept our min-height, a sneaky workaround..box { min-height:500px; height:auto !important; height:500px;
}
Vertical Align Center
It’s a pretty simple task to horizontally center any part of your web page. This practice has gone on for years, and CSS has made things much easier. However vertical alignments have always caused problems for web developers. Except with the code below it’s a peice of cake! The
vertical-align attribute will work wonders and doesn’t require any extra code for perfect vertical alignment..vcontainer { min-height: 10em; display: table-cell; vertical-align: middle;
}
Magazine-Style Pull Quotes
Commonly seen in print and digital magazines pull-quotes are a great way to add emphasis to your page. These are small quotes floating to the left or right of any given article, often accompanied by quotation marks or unique font styles. Below is a basic class which should get you started. The box width and margins should be adjusted to fit your site theme.
.pullquote { width: 220px; float: right; margin: 5px; margin-left: 25px; font-family: Georgia, 'Times New Roman', Times, serif; font: italic bold #333;
}
Fancy Ampersands
The CSS code below is unique for creating fancy ampersands. The & symbol can stand out in your writing and behaves as typographic decorations in blog posts. Although this is very useful, the code can become tiresome if applied to every symbol on your site. That’s why we’ve set the properties to a .amp class which should be used on a span wrapping your ampersands. You can use a similar effect on the first letter of your paragraphs, for example.
.amp { font-family: Baskerville, 'Goudy Old Style', Georgia Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal;
}
Conclusion
Above are just some of the newest and most unique HTML5 and CSS code snippets around today. There have been many more advances since this publication as web developers are tirelessly building out new libraries. Putting together these bits of code will allow us to construct websites faster than ever before.
If you know of similar links or galleries please feel free to share. The web design community is constantly flowing towards a more open environment and it’s always helpful to others looking for similar bits of code. Also if you’re a web developer I’d love to see any custom or personally-created code snippets added into the comments below.
"
Posted in: 
