It’s 2012 and time to refresh your stock of web design icons. Stop using the same old sets and add some new resources to the mix. Today we’ve got twelve awesome icons sets that are completely free to download and use.
No matter what type of project you’re working on, we’ve got your covered. From general purpose web design icons to social media and payment methods, these twelve sets cover an impressive range of potential uses.
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 over the web in advanced CSS examples so you might as well jump in and learn to use them yourself.
What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two? How are :before and :after implemented in CSS? What are some ways that developers all over the web are using these tools to perform amazing feats of modern coding? Read on to find out.
You’ve been there a thousand times, staring at a big empty canvas that simply doesn’t seem to work with the photo that the client has provided. Perhaps you have a vertical space and a horizontal photo (or vice versa), or maybe the image is simply too small to resize without unacceptable quality loss. What now?
Today we’ll go over some tricks of the trade and teach you how to cope with images that don’t fit where you need them to. The next time you run into a problem, you’ll be ready!
We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.
With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.
Are traditional paper business cards becoming obsolete? Have you considered a digital option? The type of card you use and how it looks can say a lot about you and your work. The style of card – from simple embossed text on a white card to ornate colors and fonts – can be a client’s first impression of your work.
You want to use a card that represents your style and works with the kind of clients you work with. When looking for a business card, consider both digital and paper options and integrate your digital self into paper cards. A business card does more than provide your contact information, it is a gateway to your portfolio as well.
If you’re like me, looking at your own design work from a few years ago can often result in some laughable or even cringe-worthy moments. Design styles have been steadily evolving and most of us can’t help but be affected by these changes. Who among us hasn’t piled on the cheesy Photoshop layer effects, all the while thinking the result was downright awesome?
However, some of us are a little slower to evolve than others. Today we’ll be taking a walk down memory lane and looking at five design trends that used to be super cool, but now simply tend to make your design look outdated and even ugly. If you’re currently still stuck on these trends, it might be time to move along! We’ll help you out with some modern alternative practices that you can use to bring your design skills into 2012 in a hurry.
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 Pergola Farmhouses. Let’s jump in and see what we think!
CSS image sprites allow you to dramatically reduce the number of HTTP requests on a site by combining many or all of the images on your site into a single file. This file can then be used in conjunction with CSS background positioning to implement individual images.
The downside of this technique is that it’s a painstaking, involved process that requires you to manually combine your images and fiddle with the CSS to get each image to display properly. Fortunately, there are a number of free online tools that completely automate this process. Today we have an awesome collection of twelve of these tools, each with its own unique take on the sprite generation process. Whether you’re looking to create a sprite from a folder of images or convert an existing site, we’ve got the tools to help you get the job done in seconds flat.
Every designer has to answer to someone. Freelancers turn their work in to a client, company guys hand theirs over to a team or supervisor, there’s always someone next in the chain of command that gets to take a look and offer an opinion. It’s at this point that the initial draft ends and the creative review begins.
This critical point can have a dramatic effect on the future of the project. Sometimes this is a good process that takes the piece to new heights that it could’ve never reached without some fresh insight. Other times the creative review process kills the genius of the initial draft and results in a misguided final product. One factor that plays a key role in this is the size of the review team. How many people should review a design and offer ideas? Should it be a small team? What are the pros and cons of each? Let’s discuss.
Today we’re going to take a look at how to use the Perspective Grid in Adobe Illustrator. This awesome and fairly new tool allows you to automatically flow vector elements onto a prebuilt three dimensional grid.
You might think that you need to be an artist to use this tool but there are in fact all kinds of practical uses for it in every day design. We’ll use it to lay out some type like in the example above.
Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.
One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.
While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.
Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.