“Retro” literally means “backwards” in Latin, and that’s exactly the kind of expression it represents: an aged style that was once popular and culturally significant, but has since faded from fame. The biggest hallmark of design and style that’s considered retro today hails from the 1950′s and 1960′s – the period that brought the baby boomers and big economical and sociological changes in the United States.

Retro is a style that’s heavily influenced by art deco – a linear, symmetrical design with rich colors and clean surfaces. Retro pop art played a big part in the emergence of the style, such as retro advertising and poster design. Another area is Retro-futurism, which incorporates science fiction into retro, seen in cartoons such as The Jetsons, and video games such as BioShock.

Despite retro’s history and iconic style, it’s been out of the mainstream limelight for many decades. Ironically this is also the reason behind its resurgence among designers. Being different and bringing back old memories, retro has become “in” in recent years, with more and more designers opting to use its style for websites, logos, graphics, and more.

Today, we’ll be taking a look at retro logos, a particular area where the style is thriving today. I hope you will enjoy this collection of excellent retro and vintage logos.

Recommended Reading: Retro and Vintage Web Design – Best of

“AutoDetailer”. By “Oronoz”

“Red Dog”. By Micah Harris

“Doc’s Catering”. By Carl Miner

“Truephonic”. By Chuck Cogan

“Garage”. By “Greenade”

“J.S. Electric”. By Carl Miner

“Dolly”. By “I Am Tiago”

“FizzNiche”. By “Myth-Sh”

“Cinepire”. By Danny Greta

“Atomic Wrangler”. By Rich Guske

“Pixelfly”. By Max Di Capua

“Dayna”. By Alex Sheldon

“Flamin”. By Pete Lacey

“Avionics Master”. By Joshua Sortino

“Tokyo Bicycles”. By Emir Ayouni

“Vectips”. By Ryan Putnam

“Songbird”. By Jake Dougard

“Volvo”. By Simon Gustavsson

“IQ Accessories”. By Chris Meyers

“Hotel Films”. By Paul Clarmont

“Interlocked”. By Greg Sogho

“Studio 85″. By JoseDesign

“The Urban Sound Of Amsterdam”. By JoseDesign

“El Amigo”. By Imaginari Interactive

“Giant Leap”. By Adam Prunty

“Eat Pizza Here”. By Sean Costik

“United Parcel Service”. By Matt Chase

“Wheatlys”. By James Waldner

“Pioneer”. By Logomotive

“Reforger”. By Paul Clarmont

You may also Like:

• Retro & Vintage Photoshop Tutorials
• Retro & Vintage Web Design

Related posts:

1. Vintage Advertisement of Modern Technology
2. A Look Into: 6 Olympic Logo Designs
3. [Freebie] Vintage Radio Vector Icons
4. Showcase of Eco-friendly (Green) Website Designs

The Transformation module is a tremendous addition in CSS3, it takes the way we manipulate elements on a website to the next level.

There are some experiments that really amaze me, examples such as this one. However, we are not going to build something like a CSS-only icon that can somehow transform into an Autobot, as it may be overwhelming and not quite usable in real life as well.

Instead, this time, we will be stepping back and reviewing the basics of CSS3 2D Transformations to see how it works at a fundamental level.

The Syntax

The CSS3 Transformations module basically allows us to transform an element to a certain extent such as translating, scaling, rotating and skewing.

The official syntax is transform:method(value). However, like any other CSS3 great additions that is still in the early stages, the current browsers still need the syntax version to run the transformations. So, the complete syntax would turn out like this:

  transform: method(value); /* W3C Official Syntax */  -o-transform: method(value); /* Opera 10.5+ */  -ms-transform: method(value); /* Internet Explorer 9.0+ */  -moz-transform: method(value); /* Firefox 3.6+ */  -webkit-transform: method(value); /* Chrome / Safari 3.2+ */  

Also, the method we are referring to above is the transform-functions, which could be replaced with one of the following: translate(), scale(), rotate() or skew().

The Value

Most of the method’s value will correspond to the X-axis and Y-axis. If you remember the Cartesian coordinates system from your Math class in High School, the basic principle is quite similar, the X-axis represents the horizontal line and the Y-axis represents the vertical line.

Except for rotations. The rotation will use the polar coordinates which is expressed in degrees that range from 0 to 360.

The values for all the methods can be both negative or positive. Just take a note though, as the web page is read sequentially from top to bottom which makes the Y-axis in the web work the opposite from the original principle of Cartesian coordinates. This means that when you add a negative value to Y-axis, it will move to the top instead.

Using the Transformations

Now, let’s see the following basic demonstration to see Transformation in action.

I – Translate

Don’t be clouded with the term translate, it will not translate foreign language. The translate here is actually a method for moving elements in some direction.

The method contains two values; X and Y. the X value as we pointed out above will take the element horizontally; to the left or to the right, while the Y value will takes it vertically to the bottom or to the top.

Now, let’s see some simple demonstrations below:

  div {  	width: 100px;  	height: 100px;  	transform: translate(100px, 250px);  }  

The snippet above will move the element for 100px to the right and 250px to the bottom.

  div {  	width: 100px;  	height: 100px;  	transform: translate(100px, 0);  }  

The snippet above will move the element just to the right for 100px, because we are zeroing the Y-axis. Then, if we want to move the element to the left, we only need to set the X-axis in negative, as follows:

  div {  	width: 100px;  	height: 100px;  	transform: translate(-100px, 0);  }  

• "Translate" demo

Alternatively, we are able to move the element in a single direction with these individual methods; translateX() and translateY(), the difference is each of those methods accept only one value.

So, practically speaking, the transform: translate(-100px, 0) is also equal to transform: translateX(-100px).

II – Scale

The scale method allows us to enlarge or reduce the elements from its actual size. The scale’s value is the same as the translate method above, it also contains X and Y. The only difference is we do not specify the unit. Here is an example:

  div {  	width: 100px;  	height: 100px;  	transform: scale(1.5);  }  

The above example will enlarge the div 1.5 or 150% of its actual size, and since we scale it equally for both the X and Y directions, we only need to declare it in one value. You can also declare it in this way transform: scale(1.5,1.5); if you want to go more detail, it will just do the same.

Furthermore, if we want to reduce the element we would specifically use a value from 0.999 to absolute 0, like the example below, which will reduce the size of the div for 50% or half:

  div {  	width: 100px;  	height: 100px;  	transform: scale(0.5);  }  

But, be cautious, if you set the value to be absolute “0″ the div will just disappear, so unless you have a valid reason to do so, I would not recommend doing it.

• "Scale" demo

III – Rotate

As we mentioned earlier in this post, the rotate method uses polar coordinates, so the value is stated in degrees. Here are two examples

The snippet below will rotate the div 30 degree clockwise.

  div {  	width: 100px;  	height: 100px;  	transform: rotate(30deg);  }  

A negative value, as illustrated in the example below, will rotate the div in the opposite direction (counter-clockwise) at the same degree.

  div {  	width: 100px;  	height: 100px;  	transform: rotate(-30deg);  }  

• "Rotate" demo

IV – Skew

The skew method enables us to create a sort of parallelogram. It also contains two values of the X and Y-axis. However, the value itself is stated in degree, instead of linear measurements like we use for the scale or the translate method. Here is an example:

  div {  	width: 200px;  	height: 100px;  	transform: skew(30deg, 10deg);  }  

• "Skew" demo

V – Multiple method

The transform property is not limited to handle only one method, in fact we can include multiple methods in single declarations, like this:

  div {  	width: 100px;  	height: 100px;  	transform: translateX(100px) rotate(45deg);  }  

The above snippet will move the element 100px to the right and at the same time it also rotates 45 degrees.

"Multiple Method" demo.

Transform Origin

The transfrom-origin – as its name implies – is used to control the starting point of the transformation. If we do not explicitly declare this property with the following syntax transform-origin: X Y;, then the browser will take the default value which is 50% for the X and 50% for the Y.

Now, if we specify the transform-origin to 0 (X) 0 (Y) the transformation will start at the top-left.

Again, all the browsers still needs the prefix version to call this property. So, here is the complete version to ensure it works in most current browsers:

  -webkit-transform-origin: X Y;  -moz-transform-origin: X Y;  -o-transform-origin: X Y;  -ms-transform-origin: X Y;  transform-origin: X Y;  

• "Transform-origin" demo

Conclusion

We have come through all the four essential transformation methods; translate, scale, rotate and skew

However, as mentioned, this module is still in the early stage, so if you will apply these methods in your next website, make sure it degrades gracefully for incompatible browsers (I’m not referring to IE6 here).

Lastly, you can view all the demo or download the source from the following links.

• Demo
• Download Source

Related posts:

1. How to Create Gmail logo with CSS3
2. Creating Advanced “Marquee” with CSS3 Animation
3. A Look into: CSS3 Negation (:NOT) Selector
4. How to Create An Ajax-Based HTML5/CSS3 Contact Form

Photographers will have to use external help when it comes to adding effects to their shots. Fortunately, there are many photo effects software for your computer available in the market, and pro users will usually use Photoshop given its advance editing options. Non-experienced users will have to settle for photo editing software like Perfect Effects. It’s easy to use and is available in paid and free versions. It’s also good enough to help you add and edit professional photo effects.

Recommended Reading: Export And Backup Your Instagram Photos

Add photo effects with ‘Perfect Effects’

To add instant effects to your photos, go to the Perfect Effects download page and click on the Download button.

Fill up your details and hit Submit.

Perfect Effects will send you download link, click on the link to proceed.

After download is complete, unzip the download package and launch the installer. Hit the Continue button and follow the instructions to complete the installation.

Now when installation is complete, launch the software from your computer. You will be welcomed with quick instructions on how to get around with the software. Hit the folder section at the bottom to retrieve your photo collections to start editing.

When the folder is selected, you will see all your photo collections in the selected folder, now select which photo you want to add effects to.

On the left-hand side, you will see mouse control, select the tools relevant to start moving photos around the screen, crop, cut, paint or more.

On the right, you will see a panel with navigator, zoom selection, layers and masking options. When you make any changes to your photo, you will see the changes in layers.

Now to start adding effects to your photos, click on the Effects menu at the top right corner of the screen.

The Effects panel will appear at the bottom of the page.

There are four category selections from boarders, effects, instant and texture effects. To apply the effect you want, double-click from the selection panel.

When you are satisfied with your final effect, hit the save button to save your photo, and select to save the photo in PSD, TIFF, PSB or JPG format.

Photo Effects offers limited effect selections with this free version, but the result is pretty cool still.

Conclusion

With this software, you have the options to get more photo effects to add impact to your photos. If you would like more options, you can always opt for the pro version. What photo editing software have you been using apart from Photoshop? Share with us your favorites!

Related posts:

1. Export and Backup Your Instagram Photos [Quicktip]
2. How to Browse Instagram Like Pinterest [Quicktip]
3. How to View Facebook Photos, Pinterest Style [Quicktip]
4. Keeping Your Private Photos/Videos Hidden on Android [Quicktip]