Archive for the ‘Photoshop’ Category

Leveraging Twitter for Your Freelance Business

Social media applications such as Twitter can be effectively utilized as a tool for freelancers like yourself to promote your services. In a time when the world is connected through the internet, failing to employ such a simple strategy to connect with your potential and existing clients is a waste of opportunity. Remember that you are promoting to the rest of the world each time you post something in Twitter.

twitter blue bird Leveraging Twitter for Your Freelance Business
(Image source: Fotolia)

The content then, is what matters. You can update your existing clients on your latest projects and network with freelancers like yourself. In your Twitter, you may link your followers to your professional blog where they can further explore your work and even better, re-tweet it to their own network. All these can bring you more business in the long run as these people go on to recommend you to potential clients.

Here are five possible ways to make good use of Twitter for your freelance business:

1. Connect with Relevant People

As you would probably agree with me, social networking platforms like Twitter and Facebook have definitely facilitated our access to such opportunities to exchange knowledge and insights to an unprecedented level. To effectively utilize such access, you must first connect with the right people to obtain valuable information from. For instance, following the tweets of designers would update you with some of their latest work, from which you may find inspirations or ideas for your own design.

Besides, there will always be things you can modify and improve about your business, be it the design of your work, marketing strategy or even the capacity of your web server. Twitter, being a great tool to network with people of the same field, is your key to refining your business. This is because freelancers like you are now able to share tips and critique each other’s work and approach. Such online relationships, although casual, can do wonders for you by widening your perspective on how things can be done.

2. Draw People to Your Blog

Twittering is a good way to inform your followers on any updates to your portfolio blog. However, the benefit of using Twitter goes beyond the purpose of simple notifications. Each time your followers get informed about your latest work or design, they may also send out a Tweet after checking out your site. This is especially when your work shows extraordinariness and your followers want to comment and compliment about it.

shouting bluebird Leveraging Twitter for Your Freelance Business
(Image source: Fotolia)

Through a networking apparatus like Twitter, your blog gets promoted exponentially. This way, your blog, along with your awesome work, gets free publicity to more prospective clients. Also, supposing you have set up a Twitter account solely for your freelance business(which is advisable), then those who follow your Twitter are likely to be those relevant people you want to associate with your business. Once these people tweet or re-tweet about it, their followers are also the target audience you would want to promote your business to. In this manner, your blog is advertised freely and specifically to those that matters.

3. Find Prospective Clients

A major component of Twitter is its search function that enables users to search for other users to follow. There, you can search for specific topic or interest and get a list of Twitter accounts for your consideration to follow. If you are looking for prospective clients, then this is great tool for yourself to get acquainted and develop a professional network with other freelancers or potential clients. Strike a conversation by replying to their tweets. It works the other way round as well. Having a Twitter account yourself, people are able to search for you and request to follow your tweets.

Don’t be surprised to receive messages requesting for your freelance services. They might have come across your tweets after combing through potential freelancers on Twitter, saw your work on your site and got impressed. Either that or they might have seen some random tweets of users who were following you and subsequently check out your blog.

In any case, such bi-directional search between yourself and other potential employers would no doubt open up doors to more opportunities.

4. Establish Your Brand

Once you have a decent number of followers, it becomes a must to update them on your latest work so that they get constant reminder of your business. Focus on your specialty from the various services you provide and your followers will know what to expect from your updates. If, for instance, you’re a freelance web designer who is an expert in doing up creative typography for sites, then perhaps you can emphasize on the font design of your latest works in your tweets.

At the end of the day, it’s all about creating that association between what your business does best and your business brand. Once people can tie your brand to your brand’s selling point (in this case, the typography of web design), then you have established your brand well. As your followers consist of existing clients and potential ones as well, it is crucial to build a good reputation for your business and let the good words get spread throughout the entire network.

5. Be the Expert

If you want to get more referrals to clients through the internet, you need to build a name for yourself. To do that, post insightful updates to your Twitter and give your audience what they want to know. Providing meaningful comments on other’s work as well as your own will impress upon your audience that you’re passionate and serious about what you do. Besides, sharing your thoughts about designs is the first step to getting priceless feedback from other freelancers.

twitter bird singing Leveraging Twitter for Your Freelance Business
(Image source: Fotolia)

Not all of us will eventually be considered as experts simply by giving our personal takes on designs and such. But if you managed to get there, your personal work will be taken more seriously. Your followers would be more likely to tweet the work of someone who is deem as the expert or the leader of the field. The end result is that you’ve earned yourself a good reputation, and that’s great because more people will hear of your work. This includes potential clients for your business.

1 Year Hosting Giveaway From Zyma one of the fastest growing hosting companies in the UK have partnered with hv-­? to give-­?away 5 lucky winners a web hosting account completely FREE for one whole year! Zyma’s customer base covers over 80 different countries in four different continents, and their unlimited web hosting package is one of the most comprehensive around. This is a give-­?away you simply don’t want to miss.

Hosting Account Features:

• Unlimited Web space
• Unlimited Traffic
• Unlimited Email Accounts
• Unlimited SQL Databases
• Unlimited FTP Accounts
• 99.9% Uptime Guarantee
• Free CDN Service
• Free Google Vouchers
• Free Transfer & Setup
• Free Tech Support
• cPanel Web Hosting
• Fantastico De Luxe
• Softaculous Premium
• Attracta SEO tools via cPanel

How To Enter

Entering the contest is incredibly easy. All you have to do is post a comment explaining why you want to win the hosting account and what you would use it for.  Of course the winner’s will be announced here and on Twitter, so your best bet would be to follow us on twitter and like us on facebook as well.

You can also follow us on Twitter and tweet out, “I just entered @hvdesigns hosting giveaway! You should enter to: ” and receive another entry to the contest.

Your third and final entry can come from liking us on Facebook and posting on our wall about your favorite tutorial.

The contest will run from 2/10/2012 to 2/17/2012, with winners being announced on 2/20/2012.

Showcase of Dieselpunk Artworks

So by this point most of us are familiar with the steampunk aesthetic. But how many people out there know about dieselpunk? Dieselpunk style is similar to steampunk, but there are distinct differences. While steampunk focuses on Victorian-age sci-fi, dieselpunk is based on the style and technology of the early 20th century, from World War I through World War II. The “punk” suffix on the word indicates its counter-cultural influence in regard to its opposition to historically-accurate and contemporary aesthetics. It’s similar in many ways to the noir styles of the time, though isn’t necessarily as dark.

dieselpunk art Showcase of Dieselpunk Artworks

The term “dieselpunk” was coined in 2001 by game designer Lewis Pollak to describe the style of his role-playing game Children of the Sun, but it has since grown to encompass the style of a number of mediums, including art, music, movies, fiction, and more. There are two basic styles of dieselpunk, one based on the roaring twenties with a mostly positive view of technology and culture, and the other based on World War II with a much darker style and often based on widespread warfare.

Below are more than 50 awesome dieselpunk artworks to give you a taste of what dieselpunk is all about!

Dieselpunk Cars (Image Source: RyanLovelock)

Dieselpunk Cars by RyanLove Showcase of Dieselpunk Artworks

KIEV Dieselpunk Hovercraft (Image Source: Lipatov)

kiev dieselpunk hovercraft  Showcase of Dieselpunk Artworks

Dieselpunk Hovercraft (Image Source: Lipatov)

Dieselpunk hovercraft by Li Showcase of Dieselpunk Artworks

Arrival in Utopia (Image Source: Lipatov)

Arrival in Utopia by Lipato Showcase of Dieselpunk Artworks

DeiselPunk Gall (Image Source: Kaaskop)

DieselPunk Gall by kaaskop Showcase of Dieselpunk Artworks

Dieselpunk Robot (Image Source: Chaingunchimp)

dieselpunk robot by chaingu Showcase of Dieselpunk Artworks

Dieselpunk (Image Source: Sedeptra)

dieselpunk by sedeptra Showcase of Dieselpunk Artworks

Dieselpunk Girl (Image Source: Vadich)

dieselpunk girl by vadich d Showcase of Dieselpunk Artworks

Desert Sands (Image Source: Mykeamend)

Desert Sands by mykeamend Showcase of Dieselpunk Artworks

Soldier (Image Source: Beaver-Skin)

Soldier by Beaver Skin Showcase of Dieselpunk Artworks

Gwen in Her Hepmobile Rocket (Image Source: BWS)

hepmobilerocket Showcase of Dieselpunk Artworks

The Widowmaker (Image Source: Davincisghost)

The Widow Maker by davincis Showcase of Dieselpunk Artworks

090509 – Dispute (Image Source: 600v)

090509   dispute by 600v Showcase of Dieselpunk Artworks

Claudia (Image Source: Lipatov)

claudia by lipatov d34xn0r Showcase of Dieselpunk Artworks

Red Baroness (Image Source: LadyDeuce)

redbaronness Showcase of Dieselpunk Artworks

Mobilzitadelle “Franz-Josef I” (Image Source: JanBoruta)

Mobilzitadelle   Franz Jose Showcase of Dieselpunk Artworks

The City of Tomorrow (Image Source: BWS)

cityoftomorrow Showcase of Dieselpunk Artworks

Rush Hour (Image Source: Malaveldt)

rush hour by malaveldt d3b3 Showcase of Dieselpunk Artworks

250409 – BB2 3-4 (Image Source: 600v)

250409   BB2 3 4 by 600v Showcase of Dieselpunk Artworks

290809 – NFZ T1 v2 (Image Source: 600v)

290809   NFZ T1 v2 by 600v Showcase of Dieselpunk Artworks

210609 – NFZ A2 (Image Source: 600v)

210609   NFZ A2 by 600v Showcase of Dieselpunk Artworks

Ironclas (Image Source: MurderousAtomaton)

ironclad by murderousautoma Showcase of Dieselpunk Artworks

Let’s Have Another Cup… (Image Source: BWS)

letshaveanothercup Showcase of Dieselpunk Artworks

Aviatrix (Image Source: Conceptbloke)

Aviatrix by Conceptbloke Showcase of Dieselpunk Artworks

Calling the Space Patrol (Image Source: BWS)

callingthespacepatrol Showcase of Dieselpunk Artworks

GateHouse Gazette 10 Cover (Image Source: mykeamend)

GateHouse Gazette 10 Cover  Showcase of Dieselpunk Artworks

Eurocentric Liner (Image Source: Stefanparis)

Eurocentric Liner by stefan Showcase of Dieselpunk Artworks

Diesel City3 (Image Source: Stefanparis)

Diesel City3 by stefanparis Showcase of Dieselpunk Artworks

Retro-Futurism Poster Project (Image Source: Inochi-zero.)

retro futurism poster proje Showcase of Dieselpunk Artworks

Wheel of Fortune (Image Source: Mykeamend)

Wheel of Fortune by mykeame Showcase of Dieselpunk Artworks

Fasten Your Seat Belt (Image Source: Stefanparis)

Fasten Your Seat Belt by st Showcase of Dieselpunk Artworks

At Your Usual Dealer (Image Source: Stefanparis)

At Your Usual Dealer by ste Showcase of Dieselpunk Artworks

Twentieth Century (Image Source: Stefanparis)

Twentieth Century by stefan Showcase of Dieselpunk Artworks

The Iron Baker (Image Source: Kallini)

the iron baker by kallini d Showcase of Dieselpunk Artworks

Freedom in the Clouds (Image Source: ViaruTarkin)

Freedom in the Clouds by Vi Showcase of Dieselpunk Artworks

Pegasus IV (Image Source: Stefanparis)

Pegasus IV by stefanparis Showcase of Dieselpunk Artworks

Panzerarmee “Radetzky” (Image Source: JanBoruta)

Panzerarmee   Radetzky   by Showcase of Dieselpunk Artworks

Grenadier (Image Source: Vkucukemre)

Grenadier by vkucukemre Showcase of Dieselpunk Artworks

Space Spy (Image Source: Innovari)

space spy by innovari d46pi Showcase of Dieselpunk Artworks

Dieselpunk Airships (Image Source: Tome Wilson)

dieselpunkairships Showcase of Dieselpunk Artworks

40 Fresh Highly Creative Illustrator Tutorials

In this post, we’ll be sharing with you a collection of useful tutorials that will help you to to use Adobe Illustrator in a variety of new ways. Whether you are a pro or a budding novice, you are bound to find something that will help you.

Below we present a collection of some of the latest, most useful and highly creative tutorials for Adobe Illustrator.

Realistic, Vector Bubbles

In this tutorial you’ll learn how to create colorful, realistic bubbles. It’s pretty in depth though, so set aside a couple hours for this one.

Creating a Realistic Curtain

With this tutorial you’ll use the Mesh Tool to create an interesting damask patterned curtain.

Burning, Vector Match Using Gradient Meshes

You will learn how to create realistic vector fire, using the Gradient Mesh Tool and Screen Blending mode with this tut.

Neat Ribbon in Illustrator

In this tutorial you’ll learn how to create a vector illustration of a beautiful red ribbon. All you will need is the Pen Tool, 3D effect Extrude & Bevel and a good taste in color selection. This could be good practice for less skilled Pen Tool users.

Detailed Vector Chalkboard Icon

This classic school blackboard illustration is composed using vector shape building techniques, pixel perfect highlighting, as well as using brushes and textures to add detail.

Magnifying Glass Tutorial

Create a Cute Snail

In this tutorial you’ll learn how to draw a snail using various tools including the Pen Tool, Selection Tool, Direct Selection Tool, Ellipse Tool, and Gradient Tool, with some shapes created with the help of the Pathfinder panel.

Business Icon from Scratch

In this tutorial you’ll create an interesting business icon that consists of two arrows and a globe. The techniques discussed are applicable to the creation of a variety of other illustrations as well.

Colorful, Glass Text Effect

In the following tutorial you will learn how to create a colorful, glass text effect, using patterns, transform effects, multiple gradient fills, and more to construct this beautiful lettering.

Create a Jellyfish with Brushes

You’re shown how to create a stylized jellyfish using blends and brushes with this tutorial.

Create a St. Patrick’s Day Postcard

Here you’ll create a design fit for any number of St. Patrick’s Day uses. You’ll learn useful information on how to create a pile of golden coins and a Pilgrim hat.

How to Illustrate A Yacht

In this tutorial, you’ll use Meshes, Bristle brushes, Art brushes, and other tools and techniques to create a racing yacht in Illustrator. The skills you’ll learn here can easily be used to create various other objects as well.

Create a Vector Radiator Artwork

In this tutorial you’ll use 3D-rendering, blends, and other tools and professional vector techniques to create an oil filled vector radiator. The skills learned here can easily be used to create various stock art objects or graphics for your next design project.

Psychedelic Design in Photoshop and Illustrator

In this tutorial you’ll create a psychedelic design one step at a time using both Illustrator and Photoshop.

Create a Steel, Vector Power Button Set

How to Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool

In this tutorial, you’ll explore how to create an open book using Illustrator’s 3D Extrude & Bevel Tools. You’ll create open pages with graphics and add a wavy background. The book can then be customized by applying your own graphics to the pages.

Create Super Mario’s Head

Create a Web Site Mascot

In this tutorial, you’ll get an overview of how to develop a character from the initial concept to the final site mascot, then go on to create several character poses for different parts of the site.

How to Create a Vector Stamp Set in Illustrator

With this tutorial you’ll learn how to create a vintage, vector stamp set. They’ll go over building the stamp shape by shape, constructing the stamp border vector shape, highlighting the edges, creating the branding, and giving the vector postage stamp a vintage texture, and final illustrator stamp effect.

Create a Vector Snake

In this tutorial we learn how to create a vector snake using the Mesh Tormentor, a free Gradient Mesh plugin. The plugin makes working with the gradient mesh simple and enjoyable.

Create Vector Denim Texture Using

In this tutorial you’ll learn how to create a realistic vector denim texture.

Basics of the Mesh tool in Illustrator

Here we learn a bit more about Illustrator’s Mesh tool. You’ll learn how to create a Super Mario-style mushroom in order to better understand how to use this tool on an example image.

Create a 50s Ad Poster

In this tutorial you learn to make a retro looking poster that gives the impression of having been crafted in the 50’s.

Cubist Style Logo Design

In this logo design walk-through, you’ll learn how to make a cubist style logo design made up of lots of detailed vector facets.

Create a Zee Vintage Label

Create a Simple Vector Ninja Character

Follow this step by step tutorial to create a simple vector ninja character. The design is made up of basic shapes and uses Illustrator’s core tools, making this tutorial perfect for beginners.

Easy Clock Icon

This tutorial covers a really simple exercise to create a slick clock icon. If you’re new to using Illustrator, this tutorial will be especially well suited for you.

Design a Print Ready Die-Cut Business Card

Need a new set of business cards? Follow this step by step tutorial to create a cool business card design using Adobe Illustrator.

Create Dexter with Illustrator

How to Illustrate a Lighthouse

Create a Cute Hairy Vector Monster Character

You’ll create the character using basic shapes to give a cute and friendly appearance, then bringing the character to life with gradient colors and a detailed fur effect.

Create a Gruesome Zombie Illustration

You’ll use a photograph as a basic reference then use a Wacom tablet along with Illustrator’s vector brush tools to draw up various gruesome elements on your zombie character.

Create an Advertising Billboard

In this vector tutorial you will learn how to create an advertising billboard using 3D modeling and a few simple techniques, like shape building using the Pathfinder palette, defining the vanishing point by using the guides, filling an object with gradients and using the Blend Tool.

Daily Flip Calendar

Candy Cane Text Effect

In this tutorial, using both Illustrator and Photoshop, you will learn how to create a candy cane text effect. This tutorial shows you how to use various vector-drawing tools in Illustrator to create a custom pattern brush and how to refine your vector work by finishing it off in Photoshop.

Sonic The Hedgehog Opening

In this detailed tutorial you will learn how to create the Sonic The Hedgehog opening logo in Illustrator

Teenage Mutant Ninja Turtle Parody

Create a Wireframe Face with the Envelope Distort Tool

It’s as simple as it sounds. In this detailed tutorial you’ll learn how to create a wireframe face in Illustrator using the envelope distort tool.

Make a Worm in Illustrator

Create a Vector Gift Box

In this tutorial you’ll create an attractive gift box, using mostly the usual tools, like the Rectangle Tool, Ellipse Tool, Extrude & Bevel 3D effect and some nice colors to create an eye catching illustration.

Retro Version of The Itchy and Scratchy Show

Complete Guide to Drawing Evil Vector Skulls

This tutorial demonstrates how to draw evil skulls easily, as well as teaching us a bit of anatomy. It goes step by step, showing us how to draw an evil looking skull, the right way!

Create a Sale Tag Icon

This tutorial even shows you how to simulate the look of folded corners on the paper by using simple color gradients. The creation process is surprisingly simple.

Create a Macbook Pro Illustration

Create an Angry Birds Parody

Create a Cocktail Glass in Adobe Illustrator

In this very detailed tutorial, you will learn how to create a cocktail glass filled with a colorful drink and fancy decorations. Creating glass objects can be challenging since there are so few colors you’re allow to use. This tutorial shows us how!

You might also like…

A Round-Up of 50 Fresh Photoshop Tutorials and Techniques »
30 Artistic and Creative Photoshop Poster Tutorials »
40 Amazing Photoshop Brush Directories and Collections »
50 Imaginative Fantasy Art Tutorials for Photoshop »
25 Cool Digital Photography Tutorials, Techniques and Effects »
25 Photoshop Tutorials for Creating that Perfect Web Page Design »
25+ Free Vector World Maps (.ai, .eps and .svg formats) »
Complete Collection of Blank T-Shirt Mockup Templates »
Illustrator Template Toolbox for Web, Mobile and App Developers »

Coding Kung-fu: 35 Graphics Built Purely With CSS3

Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.

css3 graphics Coding Kung fu: 35 Graphics Built Purely With CSS3

With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! Heck, some of them even come with detailed tutorial that teach you how to achieve it! So don’t miss the great chance to learn to create graphic using CSS3 and little bit of HTML, let’s get naughty with CSS3!

You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. Most demos support the latest version of Firefox and Google Chrome, though.

RSS Feed Icon

RSS Feed Icon built with CSS3, exclusively from Hongkiat! Along with the link comes a tutorial which you can actually learn to “draw” the RSS Feed icon without using even a single image. Create the CSS3 miracle with your own hands!

rss feed icon Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iMac

Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.

apple imac Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Keyboard

It’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.

apple keyboard Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iPhone

Oh, one more thing: iPhoneCSS3.

apple iphone Coding Kung fu: 35 Graphics Built Purely With CSS3

Cherry Blossom

The real awesomeness of CSS3 is that it can be used to build anything including plants and animals!

cherry blossom Coding Kung fu: 35 Graphics Built Purely With CSS3

Coffee Cup

A tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.

coffee cup Coding Kung fu: 35 Graphics Built Purely With CSS3


This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.

doraemon Coding Kung fu: 35 Graphics Built Purely With CSS3


Now you are looking at a cat built completely with code! Too bad the CSS3 can’t generate sound effects, at least for now.

meowww Coding Kung fu: 35 Graphics Built Purely With CSS3

Mushroom, Triforce, Poké ball, Kirby

“Being a nerd, I’ve made some nerdy creations – a Mario mushroom, the Triforce, a Pokéball, and Kirby. For those that use dinosaur browsers, there’s a screenshot of what it’s supposed to look like.”

musroom triforce pokeball kirby Coding Kung fu: 35 Graphics Built Purely With CSS3

Nyan Cat

“It contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for
looping audio. My CSS fails CSSLint test and I’m really proud of this.”

nyan cat Coding Kung fu: 35 Graphics Built Purely With CSS3


The CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.

patterns Coding Kung fu: 35 Graphics Built Purely With CSS3


BonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.

bonbon button Coding Kung fu: 35 Graphics Built Purely With CSS3

iOS Icons

Amazing? Yes. These icons are built by rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms, with the help of certain tools such as westciv’s tools and Border Radius.

ios icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

That’s impossible for web developer to not build social media icons if they can build iPhone and Doraemon with CSS3. And they built these icons really well.

social media icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.

social media icons 2 Coding Kung fu: 35 Graphics Built Purely With CSS3


“Peculiar is a free icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.”

peculiar Coding Kung fu: 35 Graphics Built Purely With CSS3

GUI Icons

84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.

gui icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Steve Jobs

Steve Jobs is not only the icon of the digital age, but also the leader who greatly promotes HTML5.

steve jobs Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Fail Whale

The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.

twitter fail whale Coding Kung fu: 35 Graphics Built Purely With CSS3


User Interface elements made possible with CSS3, and it looks really sleek!

umbrui Coding Kung fu: 35 Graphics Built Purely With CSS3

Adobe Photoshop Logo

A tribute to Photoshop without using Photoshop.

adobe photoshop logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Android Logo

The Android is made of fairly simple shapes, but it explains the advantage of CSS3: you can make simple stuff and modify it any way you want by using just code but not Photoshop.

android logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Logo

Retro Apple logo presented using CSS3, still as awesome as the time it was created.

apple logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Atari Logo

Years before, who would have thought the Atari logo will be re-created using CSS3.

atari logo Coding Kung fu: 35 Graphics Built Purely With CSS3

BP Logo

Simple logo can be made easily with CSS3. The best thing with some of these logos showcased here are there are code provided for you to try out!

bp logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Dribbble Logo

Famous user-powered showcase site Dribbble’s logo showcased using CSS3.

dribbble logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Magento Logo

Magento’s logo is not too hard to draw but the outcome looks professional.

magento logo Coding Kung fu: 35 Graphics Built Purely With CSS3

McDonald Logo

I’m lovin’ CSS3!

mcdonald logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Bird

Perfect proportion, hat tip to the creator.

twitter bird Coding Kung fu: 35 Graphics Built Purely With CSS3

Windows Logo

Windows logo! Looks really awesome, and it’s easy to create!

windows logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Internet Explorer Logo

Really great creation! It works in major browsers except Internet Explorer 8 or below.

internet explorer logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Google Chrome Logo

I’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!

google chrome logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Opera Logo

Now a practice for you: what are the differences between this CSS3 piece and the real deal?

opera logo Coding Kung fu: 35 Graphics Built Purely With CSS3

HTML5 Logo

HTML5 can’t shine without CSS3!

html5 logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Volkswagen Logo

Except the color scheme, this CSS3 clone looks identical to the original one.

volkswagen logo Coding Kung fu: 35 Graphics Built Purely With CSS3


With the boom of the logos and graphics made of pure CSS3 come the discussions which greatly debate about the usability of the CSS3-produced graphics in the real world production environment.

Generally the CSS3 graphic is fine, but it might get annoying especially when you need to alter the design or simply resize the graphic, also the biggest pain here is the technology is not yet fully supported by certain browsers like Internet Explorer.

What do you think? Will you use the graphic made with CSS3 in your site? Do you have any solution for its current drawbacks? Let us know your thought, and do share with us if you just baked a CSS3 graphic!


Willing to actually do something with CSS3? You’ve come to the right place! Below are guides and tutorials written to aid you greatly on your road to mastering the CSS3.