CSS Social Buttons. I'm proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master stylesheet that contains various design styles. It allows you to display many different button styles by combining the CSS classes. View Demo CSS Buttons Download Demo ZIP Implementation To apply this CSS Social Icons to your site, download the demo zip and include the social-icons.css file to your site: Option A: You need to add a .sb class (sb stands for social button) and the icon class (eg. twitter, facebook, rss, etc.) to the <a> link tag.
<a href="#" class="sb orange twitter">Twitter</a><a href="#" class="sb blue facebook">Facebook</a> Option B: The .sb class can also be in the wrapping tag such as <p>, <div> or <ul> tag. Sizes Colors. HTML5 - Responsive Web Design. It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart.
Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.
Core Concepts Three key technical features are the heart of responsive Web design: Media queries and media query listenersA flexible grid-based layout that uses relative sizingFlexible images and media, through dynamic resizing or CSS Truly responsive Web design requires all three features to be implemented. The key point is adapting to the user’s needs and device capabilities. Media Queries That was it! Flexible Grids.
Media Queries. CSS-Tricks. How to create CSS style sheets for printing | Programming and Development | TechRepublic.com.