Advertisement
Latest Posts
  • Web Design
    Site Elements
    Designing a Modular User Interface Kit in PhotoshopFancy web app ui retina
    The role of Photoshop in web design is becoming more modular. Instead of composing a pixel-perfect layout of an entire web page, it's perhaps more sensible these days to concentrate on general styles, color schemes and specific interface elements. Today we'll be looking more closely at designing UI elements, pulling together our own UI kit in the process.Read More…
  • Web Design
    Site Elements
    Reveal Content When Needed With an Expanding FooterFooter retina
    During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as seesparkbox.com. Additionally, we're going to be using Emmet to help us write our HTML at lightning speed.Read More…
  • Web Design
    Site Elements
    Your Logo, as a Web Font LigatureLigature retina
    Let's look at an alternative approach for displaying logos on a web page. Normally, you'll approach the challenge by using an <img> tag. Perhaps you'll use image replacement through CSS, perhaps you'll even venture into SVG files, but have you considered what's possible by designing your own web font ligature?Read More…
  • Web Design
    Site Elements
    Quick Tip: Give Your Website an iOS Home Screen IconNew waffle
    With more mobile web users than ever, it's important to keep your branding strong. Let's go one step further than the standard favicon and help your website stand out by creating icons for use on iOS and Android home screens.Read More…
  • Web Design
    Site Elements
    Bring Your Forms Up to Date With CSS3 and HTML5 ValidationForm
    Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3!Read More…
  • Web Design
    Site Elements
    Big Menus, Small Screens: Responsive, Multi-Level NavigationPreview
    If you’ve ever worked on a responsive website, you’ve no doubt had to tackle one of the trickiest problems in this emerging field: navigation. For simple navigation, the solutions can be straight-forward. However, if you’re working on something a bit more complex, maybe with multiple nested lists and dropdowns, a more dramatic rearrangement may be in order.Read More…
  • Web Design
    Site Elements
    Awesome CSS3 Menu With jQuery Fallback - New on PremiumPreview small
    In this Premium screencast tutorial I'll show you how to build an awesome, versatile navigation menu. It features notification bubbles, a Mega Menu and unlimited sub menus (as we'll be smart with our CSS selectors). There'll be some cool CSS3 transitions, plus we'll write a jQuery plugin to rescue older browsers which don't support the effects.Read More…
  • Web Design
    Site Elements
    A Flexible Approach to Responsive NavigationPreview
    Many responsive websites provide a horizontal navigation bar on large screens and drop-down navigation for smaller viewports. It's a perfectly decent approach, but it's not without its issues. Firstly, devices don't just come in large and small; they come in every size imaginable. Secondly, the navigation might well change over time. Thirdly, the layout or font size might vary across screen sizes. We're going to do things differently…Read More…
  • Web Design
    Site Elements
    Design a Modern Pricing Table in PhotoshopPreview
    We're going to create an enticing and informative pricing table. During this screencast we'll tackle the design stage in Photoshop, then next week we'll complete the process by building the HTML and CSS version, ready for web deployment. Let's dive in!Read More…
  • Web Design
    Site Elements
    Responsive, Retinafied Google Map ImagesPreview
    How's that for a keyword-packed title? Let's take a look at Google Maps - more specifically, an alternative way to include them in your websites. We'll be working responsively (of course) and we'll take a look at a media query which will help us out with Retina displays too.Read More…
  • Web Design
    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…
  • Web Design
    Site Elements
    Creating a JavaScript-Free Radio Toggle in CSS3Preview
    You'll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today we'll be creating one using plain CSS3 and HTML. Read More…
Advertisement