Articles - Page 177

Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.

CSS Card Tricks

CSS / 26 Dec 2012

CSS Card Tricks

Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.

Along the way, we’ll see how to use before and after to build the cards with minimal markup. Let’s get started!

Dotgrid.co: Your Next UI Sketch Book

Reviews / 20 Dec 2012

Dotgrid.co: Your Next UI Sketch Book

Today we’re going to take a step back from the digital world and take a look at a real life physical product: Dotgrid.co notebooks. These notebooks are made in the UK and are the work of Callum Chapman, a name you’ll likely recognize from the design community.

Callum has worked hard to create a solid product and I couldn’t be happier with my own Dotgrid.co notebook. Read on to see what they’re all about.

No Coding Necessary: Build a Striking Website With Breezi

Software / 19 Dec 2012

No Coding Necessary: Build a Striking Website With Breezi

Breezi is the website design application for beginners. It is a great tool for those who maybe don’t have the coding ability to produce a site that looks like they would hope. The tools are easy to use, there are almost limitless options for customization and even a few templates to help you get started.

Here we look at the web-based tool. And if you think Breezi is for you, you can enter to win one of five pro licensees that the company is giving away to Design Shack readers. (Enter using the Rafflecopter at the end of this post.)

Create an Animated Share Menu With CSS

CSS / 18 Dec 2012

Create an Animated Share Menu With CSS

Sharing is an integral part of the web experience and designers are always looking for new and interesting ways to highlight or show off the sharing portion of their pages.

Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own. Let’s jump in and see how it works.

7 Awesome Emmet HTML Time-Saving Tips

CSS / 17 Dec 2012

7 Awesome Emmet HTML Time-Saving Tips

Emmet, formerly Zen Coding, is one of the most downright practical and productive text editor plugins that you will ever see. With its ability to instantly expand simple abbreviations into complex code snippets, Emmet makes you feel like a powerful coding wizard with the world at your fingertips.

As a follow up to our previous article on the basics of Zen Coding, today we’re going to dive into seven awesome tips to help you become a true Emmet pro.

Web Design Critique #94: HealthyHearing

Critique / 14 Dec 2012

Web Design Critique #94: HealthyHearing

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is HealthyHearing, a source for hearing health and hearing aid information. Let’s jump in and see what we think!

Quote Robot 2: Creating Impressive Client Proposals Just Got Even Easier

Business / 13 Dec 2012

Quote Robot 2: Creating Impressive Client Proposals Just Got Even Easier

As a designer or developer, paperwork is probably a necessary evil, not something that you particularly enjoy. Tasks like creating and managing client quotes and sending invoices can be annoying or even intimidating.

Fortunately, QuoteRobot is here to streamline the process for you. We took a look at this great app when it first launched, but now it’s been completely overhauled for version two, so it’s high time we had another peek!

Review: The Mobile Book by Smashing Magazine

Mobile / 12 Dec 2012

Review: The Mobile Book by Smashing Magazine

Smashing Magazine, one of the most significant forces on the web for all things design and development related, is hitting us with another tome of practical and insightful industry knowledge. The Mobile Book is the latest product of Smashing’s foray into publishing, and it just might be the best one yet.

Read on to see what The Mobile Book is, who it’s for, and why there should be a copy sitting on your shelf as soon as possible.

Divshot: An Awesome Way to Design and Build Bootstrap Pages

CSS / 11 Dec 2012

Divshot: An Awesome Way to Design and Build Bootstrap Pages

Recently, we took a close look at Easel, a web-based site builder that leverages Twitter Bootstrap. Today we’re following that up with a tour of a very similar tool: Divshot.

With Divshot, you can quickly and easily build clean, responsive web page layouts using a combination of visual tools and hand coding. It’s a really slick tool and I think you’re going to enjoy using it.

20 Fantastic jQuery Web Type Plugins

JavaScript / 10 Dec 2012

20 Fantastic jQuery Web Type Plugins

In recent years, web typography has gone from an embarrassment to a point of pride. From CSS to JavaScript, we’re gaining great tools almost daily that help us implement awesome type.

Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.

Sketchpad to Screen: Testing Your Next Prototype With ZURB’s Solidify

HTML / 6 Dec 2012

Sketchpad to Screen: Testing Your Next Prototype With ZURB’s Solidify

ZURB, the company behind Foundation and apps Notable and Verify, has introduced a nifty new product in Solidify, which allows early-stage prototype testing.

What’s neat about the application is that it allows you to upload prototype images (from almost any stage of a project) and submit them for real user testing. And we’re not just talking finished designs here; you can actually upload and test based on a sketch.

Build an Adaptive CSS Modal Window

CSS / 5 Dec 2012

Build an Adaptive CSS Modal Window

This tutorial is yet another fun CSS project that helps you build something that you may have thought was only possible with JavaScript. We’re going to create a modal window that can be shown and hidden with a click that’s powered by a CSS checkbox.

To sweeten the deal, we’re also going to use a media query to ensure that the modal screen adapts well to smaller screen sizes. Let’s jump in and see how it all works!