Web design

CSS Transitions, Transforms & Animations – Flipping Card Tutorial


This is part 1 of a series of tutorials about practical use cases of CSS transitions, transforms, and animations. In this tutorial, we’ll look at a “flipping card” scenario, and implementation variations.

flipping-card-feat-img

The Flipping Card

Flipping cards or tiles can be very useful these days. First of all, the provide users with a bit of interactivity, keeping them engaged, and these days engagement is key. The most common use-case for flipping cards and tiles that I can think of would be including some kind of imagery on the front, and some info on the back. We will ultimately need two different element wrappers contained inside a parent element, but the elements you decide is up to you. For the sake of this tutorial, I’ll be using generic divs. First, let’s look at the three effects we’ll implement:

  1. On hover – flip transition induced when a user hovers on the card.
  2. On click – flip transition induced when a user clicks on the card.
  3. Random – flip transition induced randomly.

Now, let’s dig in.

The Markup

As I mentioned above, the markup generally consists of a parent element and two child elements. Each child represents the front and back of the card. Here’s the markup we’ll use for each card:

[html]

front
back


[/html]

Notice the “EFFECT” text in the parent element. This will be either hover, click, or random depending on the effect we’re trying to achieve. Let’s first discuss the layout, the CSS we’ll want to achieve, and the available properties that we can leverage.

How To Achieve What We Want To Achieve

In order to have an effective flipping card animation/transition, the front-card element needs to initially be stacked on top the back-card element. The back-card element also needs to be initially hidden from view. When the transition is induced, the front and back of the cards need to simultaneously rotate in and out of view around the y-axis. CSS transforms can happen in any of the 3-dimensions we’re familiar with. If you’re looking at your computer screen, place an imaginary point in the centre of it. Here’s the axis orientation:

  • x-axis: drawn from that point horizontally
  • y-axis: drawn from that point upwards
  • z-axis: drawn from that point into the screen.

Rotating around the x- or y-axis will give us the desired flipping effect, but for the safe of this tutorial, we’ll use the y-axis.

For the cards to be stacked, we’ll have to leverage absolute positioning. To keep them pinned to our parent container, we’ll have to use relative positioning on it. With that in mind, we’ll need to explicitly set widths and heights, or let at least one card’s dimensions be dictated by some media (like an image). In the case of the card dimensions being governed by an image object, only one of the cards would need to be absolutely positioned.

Another thing to note is that if there is any transparency in the cards (i.e. no solid backgrounds, images, or colours), we will need to hide the “backs” of cards, so that a flipped version of it doesn’t show up on the one in front of it. For this, we’ll use the CSS property backface-visiblity and set it to hidden.

Finally, for this tutorial, I’ll use the padded-parent technique to achieve some perfectly square tiles.

Some Common CSS

Let’s take a look at some common CSS that will be applicable across all three implementations:

CSS 3.0

I’ll be using four tiles per row, hence the width of 25%. To make a perfectly square tile container, I’ll also set the bottom padding to 25%. This will allow us to position the fronts and backs absolutely, and any content underneath with follow the document flow. Also of importance is the transition property. We’re applying a transition to the transform, as the transform property is what changes. The back is initially set to be rotated –180 degrees around the x-axis, and the front stays as default. Now, let’s look at each of the implementations.

Effect 1 – Transition On Hover

This one is simple, and we can use the CSS pseudo-class :hover to achieve the effect. When we hover over the card, the front should transition to –180 degrees, and the back should transition to 0. Here’s the CSS used to achieve that:

CSS 3.0

Pretty simple, huh? On to number 2.

Effect 2 – Transition On Click

This time, we want the transition induced on click. We’ll leverage a little javascript to achieve this, because we’ll need to check classes and whatnot to make sure we can actually un-flip the card on a second click. Here’s the CSS:

CSS 3.0

And here’s the JavsScript used:

[js]
(function()
var cards = document.querySelectorAll(“.card.effect__click”);
for ( var i = 0, len = cards.length; i < len; i++ )
var card = cards[i];
clickListener( card );

function clickListener(card)
card.addEventListener( “click”, function()
var c = this.classList;
c.contains(“flipped”) === true ? c.remove(“flipped”) : c.add(“flipped”);
);

)();
[/js]

Nice! Now, onto the third implementation.

Effect 3 – Randomly Inducing The Transition

This one is sort of a bonus, and requires some extras. Because we’re going to randomly induce the transition at random times, we’re going to need multiple unique timeouts in out JavaScript. For this, we’ll use some data-attributes in our markup too. Here’s the markup:

[html]

front
back


[/html]

The CSS is pretty much the same as before too, but here it is anyway:

CSS 3.0

And now, for some nifty JavaScript. I set up a range between 1 and 3 seconds, which will randomly generate a time delay for cards to flip. The timeout will get cleared each time, and reset, creating a purely visual effect. Here’s the JavaScript:

[js]
(function()

// cache vars
var cards = document.querySelectorAll(“.card.effect__random”);
var timeMin = 1;
var timeMax = 3;
var timeouts = [];

// loop through cards
for ( var i = 0, len = cards.length; i < len; i++ )
var card = cards[i];
var cardID = card.getAttribute(“data-id”);
var id = “timeoutID” + cardID;
var time = randomNum( timeMin, timeMax ) * 1000;
cardsTimeout( id, time, card );

// timeout listener
function cardsTimeout( id, time, card )
if (id in timeouts)
clearTimeout(timeouts[id]);

timeouts[id] = setTimeout( function()
var c = card.classList;
var newTime = randomNum( timeMin, timeMax ) * 1000;
c.contains(“flipped”) === true ? c.remove(“flipped”) : c.add(“flipped”);
cardsTimeout( id, newTime, card );
, time );

// random number generator given min and max
function randomNum( min, max )
return Math.random() * (max – min) + min;

)();
[/js]

Fun stuff!

Flipping Cards In Action

There’s a lot of flipping card implementations around the web. In particular, I’ve seen a lot of gallery layouts and portfolio sites using variations of it. But it’s not limited to just things like this. A few weeks ago, I built an HTML5 memory game, and made heavy use of this technique. You can check out the game here, and the source code is also available on GitHub.

Browser Support

This technique makes heave use of CSS transitions and transforms, so take that into account when building your site or app. Modernizr is a great feature detection tool, so provide a suitable fallback when transitions / transforms aren’t available. Think along the lines of swapping z-index values depending on whether front or back is being shown.

Wrap Up

And that’s a wrap! We covered some important features here, and took a little plunge into the world of CSS3 transitions and transforms, and looked at a real-world use case for them. Don’t forget, you can view the demo and download the source by clicking the links below, and if you have and questions, comments, or feedback, you can also leave them below.


The post CSS Transitions, Transforms & Animations – Flipping Card Tutorial appeared first on Speckyboy Web Design Magazine.

Standard
Web design

Christmas and New Year Greeting Card PSD – Freebie No:152

Today we are throwing away a beautiful Christmas and new year greeting card PSD for free.

Christmas is one of the most amazing holiday of the year, sending Christmas and new year greetings was started in 1843. In this modern era we can find the digital variants of Christmas and new year greeting. People usually exchange greeting cards through E-mails and social networks. You should need an eye popping greeting card in order to send them to your loved one. Making your own custom Christmas card is a time consuming activity so we have come around to assist you make your own custom made Christmas cards.

Below You can Find a beautifully designed Christmas and new year greeting card PSD which is absolutely free to download. As the source file is in PSD format you can easily customize the card in photoshop.

See also : Latest Free Christmas Graphic Resources For Designers

Christmas and New Year Greeting Card PSD

Download Christmas and New Year Greeting Card PSD

Format : PSDSize :190.9 KBLicence

Monday, December 22, 2014

The post Christmas and New Year Greeting Card PSD – Freebie No:152 appeared first on CSS Author.

Standard
Web design

20 Minimalistic & Professional Business Card Designs

Even in this day and age, business cards are important. They can serve many purposes: Reminders, a way to leave notes, portfolio showcases, a way to offer discounts – the possibilities are endless. Following in the footsteps of Nancy Young’s great article about business card designs, I thought I’d show you the results of my search while preparing my own business card.

Here, I’ve put together a selection of 20 minimal business cards. Whether they focus on graphics or typography, these business cards will hopefully give you an idea of what you want to achieve with your own business cards.

Squared Eye By Able Design

Visual Jams By James Graves

Letterpress Business Card By Brad O’Sullivan

Seiichi O’s Personal Busines Card By Heterobrain

Design & Direction By Adam Vella

Michael James By Joey Rabbitt

Miner & Miner By Mike Kasperski

Mid Century Modern Business Cards By Seabornpress

Brown Kraft Business Cards From Rock Design

SOE By Therese Ottem

Monkey Square By Muhammad Ali Effendy

Pop Grub By Hype & Slippers

Hot Popsicle By Rachel Kalagher

Self Promotion By Ross Sweetmore

Sifter Logo & Letterpress Business Cards By Graham Smith

Troupe By Flag&Mountains

Personal Identity By Paolo Pettigiani

Personal Business Card by Solveiga Pakštaitė

Wellness Reform School By Maria Larios

Triad By Macrochromatic



Standard
Web design

Create a Hand-Lettered Holiday Greeting Card

‘Tis the season to start thinking about holiday greetings, if you haven’t already begun! I’m always inspired by holiday photo greetings, especially the ones that feature elegant, hand-lettered scripts sprawling gracefully across the card, finished with a list of family members in a clean, complimentary typeface.

Hand-lettered typography continues to increase in popularity, giving today’s greeting cards a sophisticated yet homey and comfortable flair. I invite you to join me in making a holiday greeting card using your own hand lettering. These techniques can help you make this year’s photo greeting simple and beautiful, but the techniques I’ll be demonstrating today can be applied to any design, even if you’re reading this in July. I’ll be creating an effect like this:

Photo

You will need:

  • Photoshop (Any version that supports smart objects. I’m in CS6.)
  • A scanner (here’s a good one) or decent camera
  • A lovely family photo to turn into a greeting
  • Some hand-lettered artwork ready to scan

Step 1: Create Hand Lettering

If you don’t have some artwork ready, now is the time to start lettering. If you’re interesting in learning hand lettering, check out this post for more information. Here are a few more tips to get you started. I’ve already finished a few different hand-lettered greetings, just done with a soft 2B pencil because I’m going for a rough chalk-like effect.

Drawings

You can use any media you want (ink, calligraphy ink, charcoal, chalk, crayons, etc.) Paper also makes a difference. The above sketches were done on some lightly textured drawing paper.

Sketch, ink in if desired, clean up, and erase unwanted marks, and you’ll be ready to scan your work.

Step 2: Scan Your Work

In order to get the highest possible quality, I’m going to scan in my artwork around 600dpi in PNG format. 

1-scan

Step 3: Clean Up in Photoshop

The first thing I do when I bring my lettering in Photoshop is create several adjustment layers to make the background disappear. As I mentioned, my paper is lightly textured, and I want to eliminate all the texture and have a completely empty white background. With a pencil/chalk sketch this is a bit more difficult, but I will start by creating a Levels adjustment layer.

3-cleanup

In the properties of the Levels adjustment layer, select the white point option (circled) and using the color picker, select the darkest area of gray that should represent white.

3-cleanup2

After I’ve defined my white point, I’ll create a Brightness/Contrast adjustment layer. In the properties, I’ll adjust the settings until I’m satisfied with the degree of contrast and brightness.

3-cleanup3

Finally, I’ll double click on the actual lettering layer (the background layer) to convert it to an editable layer, then give it a layer mask. Selecting the mask and using the eraser tool, I’ll erase dust, noise, scratches, and try to isolate the lettering from the background. This took me about five minutes.

3-cleanup4

(If you’re using high-contrast inked lettering, there may not be a need to manually erase the background. Skip to the next step!)

When I’ve got my lettering roughly isolated in the mask, I’ll make a selection around the lettering, inverse the selection, and delete. Now the background is gone.

3-cleanupisolate

3-cleanupdelete

Step 4: Isolate Lettering and Create Transparency

This step describes how to make the lettering placeable over any background. Save your lettering as a .PSD (Photoshop) file. Duplicate the file (Image > Duplicate) and change the mode to grayscale (Image > Mode > Grayscale. Merge layers and discard color information). You will now have a single layer.

4-grayscale

In the Channels panel (Window > Channels) you’ll see only the Gray channel. Holding down the CMD (Mac) or CTRL (PC) key, click the Gray channel. This will convert the channel to a selection.

4-Channels

Invert the selection with CMD/CTRL + SHIFT + I. Last, create a Solid Color adjustment layer. The mask on this layer will automatically assume the selection, and you’ll be able to adjust the color of your lettering at any time, as well as place it over any background.

4-color

Hide the background layer. Change the mode back to RGB (Image > Mode > RGB – do not merge or flatten layers) and save this as a new .PSD file.

4-color2

Step 5: Create your Greeting

Create a new document in Photoshop, taking the size and desired outcome of the card into consideration. If you’re making a printed card, standard sizes include 4×6, 5×7, 8×10, 8×4, etc. I’m going to make mine a 5×7 inch greeting card. Place the photo into the new document. Add filters as desired, considering the placement of the lettering. I’ve added a subtle vignette and a simple gradient, as well as some nifty filters from FilterGrade. When you’re confident the photo can’t look any better, it’s time to place the lettering.

Place the lettering over the photo (File > Place, and locate your isolated/transparent lettering.) Position it over the photo anywhere you want.

5-Photo

Since the lettering is a smart object, it can be edited separately with a double-click in the layers panel. If I want to change the color of my lettering, I’ll double-click on the lettering smart object in the layers panel.

6-SmartObject

The smart object opens in a separate Photoshop window. I see my color adjustment layer once again. To edit the color, I’ll just double-click on the color icon and pick a new color.

6-color2

When I’m done editing the smart object, I’ll just save (File > Save) and close it. The smart object updates itself.

All my greeting card needs now is a signature! I’m going to use a clean sans serif, which complements the hand-lettered script well, and create some text with the text tool.

Photo

You might be inspired to add a few finishing touches to your card with some fabulous holiday graphics from Creative Market:

Christmas hand drawn pack - Illustrations - 1

Chalboard/vintage christmas - Illustrations - 1

chalk-snowflake-cm-listing-1-f

Christmas Watercolor Clip Art - Illustrations - 1

I hope you create something beautiful this holiday season! Thanks for following along! Happy Holidays!


Beth Rufener, the shop owner of Ornaments of Grace, is a wife, mom of two, graphic designer, amateur photographer, aspiring hand-letterer, occasional musician, and avid collector of fonts. She and her family live outside of Rittman, Ohio.

Image Credits: Family Photo used with permission from AngieSix and Red Thread Photography. Graphics/effects featured are from the shops of FilterGrade, Kite-Kit, Burlap and Lace, Kelly Jane Creative and pdeasyprint.

Standard