Bringing Premium Pixels to Life

11 Posts

Orman Clark has brought joy to the masses with his pixel perfect creations, many of which he dishes out for free on his site Premium Pixels. This session focuses on bringing his .psd files to life, teaching and demonstrating modern web techniques and standards wherever possible.

Posts in this series
  • Site Elements
    Orman Clark's Chunky 3D Web Buttons: The CSS3 VersionThumb
    Today we'll be making some awesome CSS3 buttons! They're based on the popular PSD freebie Orman Clark made for his website Premium Pixels. We'll try to make a CSS copy of them, as precisely and with as little HTML markup as possible.Read More…
  • Navigation Design
    Orman Clark's Vertical Navigation Menu: The CSS3 Version Preview
    Next in the Orman Clark's coded PSD series is his awesome looking Vertical Navigation Menu. We'll recreate it with CSS3 and jQuery while using the minimal amount of images possible. Read More…
  • CSS
    Quick Tip: Give Orman's Navigation the :target TreatmentPreview
    We recently published a great tutorial which built Orman Clark's vertical navigation menu into a flexible, jQuery powered accordion. It's actually possible to get the whole thing working without leaning on jQuery at all, and is the perfect chance to play with the CSS :target selector.Read More…
  • Site Elements
    Skin Orman Clark's Video Interface Using jPlayer and CSSPreview
    Coding up Orman Clark's Premium Pixel designs is great fun, this time we'll have a look at his Video Player Interface! We'll build it using an awesome HTML5 video library called jPlayer along with some HTML and CSS.Read More…
  • CSS
    Menu Notification Badges Using HTML5 Data-AttributesPreview
    Today we're going to take Orman Clark's Menu Notification Badges design and build it using HTML and CSS. We'll look at a couple of ways to achieve the effect, including the use of HTML5 data attributes which you may be unfamiliar with. Let's dive in!Read More…
  • jQuery
    Build a Popup Modal Window Using the jQuery Reveal PluginPreview
    Today we'll be taking Orman's Popup Modal Window and recreating it with HTML and CSS. We'll then make use of the jQuery Reveal plugin to give it full functionality. We'll even take things a step further and add some CSS3 Media Queries to make it adjust for mobile usage. Let's dig in!Read More…
  • Nivo Slider
    Powering Orman's Image Slider Controls With NivoPreview
    Next up in the Premium Pixels session is Orman's Image Slider Controls. We'll take the PSD, rebuild it for the browser, then make the whole thing functional using the brilliant Nivo Slider jQuery Plugin.Read More…
  • CSS
    Build a Quick and Elegant Login FormPreview
    Today we're going to code up Orman Clark's Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden's CSS animations to embellish the experience.Read More…
  • CSS
    Quick Tip: Create a Rating System With CSS, Web fonts and SpritesPreview rating
    In this Quick Tip video tutorial I'll show you how to create a rating system using CSS, web fonts and sprites.Read More…
  • CSS
    Tagtastic Tag Cloud with CSS TransformationsPreview
    Hey guys, today we'll be creating Premium Pixels' Tagtastic Tag Cloud. As an experiment in alternative approaches, we'll create the tags using gradients, shadows and (most importantly) CSS transforms, which will form the point of each tag. After completion we'll even take a step further and cater for IE.Read More…
  • Site Elements
    Styling Dark Select Dropdown With Dropkick.jsPreview1
    HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>, <a>, <ul>, and <li> elements can be styled? Today, we'll style the Premium Pixels Dark Select Dropdown using DropKick.js to help us do just that.Read More…