Archive by Author
Responsive Design: Why You’re Doing It Wrong
Posted on 22. Feb, 2012 by Design Shack.
Responsive design isn’t a fad that arose because of a cool CSS technique, it’s an answer to a problem. Always remember that and constantly ask yourself whether or not you’re really adequately addressing that problem. If you’re using copy and paste to insert your media query breakpoints, your solution might be flawed. Let’s discuss why [...]
Continue Reading
4 Fun CSS Image Effects You Can Copy and Paste
Posted on 16. Feb, 2012 by Design Shack.
Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time. Today I’ll walk you [...]
Continue Reading
5 Online Playgrounds for HTML, CSS and JavaScript Compared
Posted on 03. Feb, 2012 by Design Shack.
Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically [...]
Continue Reading
Pick the Right Typefaces for Your Project
Posted on 26. Jan, 2012 by Design Shack.
Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website. Understanding some of the history of fonts and typography can help make [...]
Continue Reading
Jumpstart Your Web Project With HTML KickStart
Posted on 24. Jan, 2012 by Design Shack.
Recently, we took a look at a really solid framework from the good folks at Twitter called Bootstrap. This toolkit is a swiss army knife of utilities and includes both a functional layout grid and enough pre-styled elements to get a great jumpstart on any project. Today we’re going to look at a very similar [...]
Continue Reading
Create Amazing CSS Buttons on the Fly With CSSButton.Me
Posted on 19. Jan, 2012 by Design Shack.
Today we’re going to have some fun as we take a look at an awesome new free tool for web developers simply called CSS Button. This web app makes it quick and easy to make the CSS buttons of your dreams using simple and intuitive controls. I’ve seen quite a few other CSS button makers [...]
Continue Reading
Beating Borders: The Bane of Responsive Layout
Posted on 18. Jan, 2012 by Design Shack.
Responsive design often requires setting your widths using percentages. This is easy enough to accomplish, that is until you start throwing borders into the mix. If your columns and total width are set using percentages, a static border size wreaks havoc on your layout. Today we’re going to look at a couple of different ways [...]
Continue Reading
The Lowdown on :Before and :After in CSS
Posted on 13. Jan, 2012 by Design Shack.
We recently took a look at :active, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we’re going to take a step back and explore some other “pseudo” items, this time we’ll be looking at the pseudo-elements :before and :after. You’re probably beginning to see these used all [...]
Continue Reading
Journey Into Mordor With CSS
Posted on 29. Dec, 2011 by Design Shack.
Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation. [...]
Continue Reading
Four Simple and Fun CSS Button Hover Effects for Beginners
Posted on 14. Dec, 2011 by Design Shack.
Today we’re going to take a step back from advanced discussions about CSS preprocessors and return to some good old basics. We’ll work up four super simple CSS buttons, each with a unique animated hover effect. Follow along with me and create your own fun button styles. Also feel free to grab my code and [...]
Continue Reading
Typography 101: Understanding the Anatomy of a Letter
Posted on 07. Dec, 2011 by Design Shack.
Every designer, whether you’re in print or web, should possess a basic understanding of fonts and type. Using the right typeface and understanding how a font will impact your design can add that extra pop to print and digital projects and will set them apart from all others. One important area to understand is the [...]
Continue Reading
3 Things You Never Thought to Do With Media Queries
Posted on 06. Dec, 2011 by Design Shack.
You already know how to use media queries to create a responsive design, but have you tried to use them for anything else? Is it possible that media queries can be used natively to improve your workflow? Follow along as we completely break from tradition and hijack media queries to help us test and tweak [...]
Continue Reading
10 LESS CSS Examples You Should Steal for Your Projects
Posted on 05. Dec, 2011 by Design Shack.
LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted. Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more. One of the most major hurdles to getting started with [...]
Continue Reading
Create Five Awesome Hover Effects Using CSS Multiple Backgrounds
Posted on 29. Nov, 2011 by Design Shack.
Today we’re going to have all kinds of fun with the CSS multiple backgrounds feature. You’ll learn how to use multiple backgrounds in a simple way and how to go much further by combining the technique with hover actions and CSS transitions to create some really cool effects. Follow along as we code five different [...]
Continue Reading
How to Build a Responsive Frankenstein Framework With LESS
Posted on 23. Nov, 2011 by Design Shack.
CSS layout frameworks are super helpful, but they can be a mess. You always have to conform to someone else’s system, whether or not it makes sense to you. Today we’re going to ditch this notion and build an ultra-lightweight framework that can be implemented wherever and however you want to achieve complex multi-column layouts [...]
Continue Reading
15 Great Gadgets and Gifts for Designers
Posted on 09. Nov, 2011 by Design Shack.
The holidays are quickly approaching, which means it’s almost time for the annual awkward tradition of giving and getting gifts. Whether you’re shopping for a designer or you are a designer working on your wish list, these fifteen gadgets and gifts are so awesome that you won’t want anything else. Chopsticks, pens, gloves, these all [...]
Continue Reading
101 Delightful Dribbble Character Illustrations for Inspiration
Posted on 03. Nov, 2011 by Design Shack.
It’s no secret that we here at Design Shack are huge fans of Dribbble and the awesome community of designers that actively upload their work to the site. Today we tip our hats to some of the wonderful illustration artists in the Dribbble community with a showcase of over one hundred amazing and quirky character [...]
Continue Reading
Build an Animated Sliding Menu With Pseudo Selectors and CSS3
Posted on 27. Oct, 2011 by Design Shack.
Today we’re going to have all kinds of fun. First we’ll build an animated menu using some shiny new CSS3 while learning how to implement pseudo selectors in a practical way on a real project. Then we’ll follow that up with how to build the same thing without pseudo selectors for better browser support. Finally, [...]
Continue Reading
What Is CSS? Back to Basics
Posted on 24. Oct, 2011 by Design Shack.
This is the third article in our back to basics series where we’re taking a look at the absolute beginning concepts of web development. If you’re a designer with little to no knowledge of web programming, this series is for you. In our first article, we went over what HTML is and in our second [...]
Continue Reading
Build an Animated Mario Block Navigation Menu With CSS3
Posted on 19. Sep, 2011 by Design Shack.
Today we’re going to have some good clean fun by recreating the animated Mario Bros. question mark box with pure CSS3. Along the way you’ll learn how to use several cool CSS3 technologies such as rounded corners, box and text shadows, and keyframe animations that work in both Safari and Firefox. Let’s jump in! Like [...]