Fb. 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. 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. Available CSS Classes Below is a list of the classes available. Sizes Colors Styles Icons. A Simple Device Diagram for Responsive Design Planning. Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to.
Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at.
There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. A big shout out to creative partner Sisu for the inspiration to put this together. 3 Layouts.
CSS buttons. You know that there are a lot of impressive and awesome things out there that were made using CSS, we all know that, but sometimes they’re hard to find, so today we’re bringing you some of the best buttons we’ve found, they all were made using CSS, here you’ll be able to see a demo for those beauties, as well as the HTML and CSS code.
Free Buttons There are many awesome designers and web developers out there, but few of them are eager to share their work for free, so first of all, let us thank the people who made the work that we’re bringing you today, and let us start by reviewing what they did. Space CaCSS By Simurai Simple fading By Bartos Lazarski Fading google button box By Bartos Lazarski Blue buttons By Jared Tomeck Animated download glass button By Kushagra Agarwal Dark buttons By John Shammas Glassy buttons By John Shammas Another CSS3D button By François Robichet Push-able buttons By Johnie Hjelm (improved by Csscreations ) Add to cart buttons By Bartos Lazarski BonBon buttons By Simurai. Building a 5 Star Rating System with jQuery, AJAX and PHP.
In this tutorial, you'll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we'll also leverage the power of PHP so that you don't even need a database! Step 1. Building the HTML We're going to create a simple page that lists two movies, and allows you to rate them.
This means we need the stars to show the current rating, and to allow voting. We also want an area to show the total votes cast, and the current rating down to one decimal place. Let's take a look at the HTML/CSS Notice how there are no graphics in this HTML? This first part of the CSS accomplishes a few things: Gives the default 'empty' start to each star locationSets up classes for filled in stars, and highlighted starsDefines and styles the stars' container. You can either use the graphics provided in the download, or make your own. Step 2. Our first step is to add mouseover and mouseout handlers for the stars. What about set_votes() ? Multiple Ajax Requests with Jquery. CSS.