So we have enjoyed the endless inspiration of the Facebook users and brands with their creatively twisted Facebook Timeline covers, what’s next? Introducing Google+ cover photos, where the creatives could get a “+1″ on their creativity again from their friends and visitors!

Today we are taking a break from Facebook, as feature to you 33 Google+ cover photos that truly depict the mashup of creativity and marketing. Some of them, I’m happy to report, even embrace the glorious, old-skool GIF animation that are smooth and awesome! So if you have recently joined the Google+, this is your best chance to steal the ideas from these Google+ profile and its cover photos! Be hungry and be shamelessly passionate about showcasing your talent.

Recommended Reading: Creative Facebook Timeline Covers

Amanda Rosenberg. The first one is Amanda Rosenberg’s cover photo, it seems like she just came out from the cupboard! The trick is certainly similar to what most Facebook users have played, but it’s integrated seamlessly into her Google+ profile!

Arianna Huffington. It’s no surprise that the boss of the Huffington Post have a creative, and totally unique Google+ cover that features photos taken throughout her life.

Brian Rose. Expect Brian Rose’s profile cover to be innovative and dazzling, after all he is from Google!

Chris Messina. It seems like the guy could walk into the cover photo directly! Also it’s a good way to feature 2 people in just 1 profile.

Dutch Photo Walk. By just looking at the arrangement of the photos in this cover, you can know that this guy is a professional.

Eric Cheng. Nothing is cooler than a shark swimming around in your Google+ cover photo.

Evo Terra. Not only is the use of the Google plus design pattern brilliant, the subtle animation made this cover a genuine example for an effective and persuasive Google+ cover photo.

Jérôme Vadon. Jérôme Vadon integrated his Facebook Timeline cover into Google+ profile perfectly; also this is how a designer should do his cover photo. Neat and sleek.

Jiwoong Lee. Did he take this photo just to put it as a G+ cover photo? It fits perfectly!

Jonathan Lally. Well this Google employee has a thing for interesting teddy bears.

Kimberly Johnson. Google’s fascination with their doodles seems to be overflowing to their employees’ G+ cover photos.

Kosso K. No complicated stuff, 5 smoothly animated letters are enough to inspire.

Melissa Daniels. Maybe one day we could load the part of our website on the G+ cover photo? For the time being, this fail to load page will do.

Michael Skweres. A prisoner of his creativity, Michael Skweres’s attempt at his G+ Google Cover extends beyond the regular cover photo. Prison bars and icons included.

Peterson Silva. I’m jealous of Peterson Silva for his nice twist of Google+ cover photo, and his girlfriend as well!

Scott McCloud. Scott McCloud is undoubtedly an experienced comic artist, as he knows how to explain the creation of comics in an effective and interesting way, with just 1 cover photo!

Søren Dalsgaard Brath. Sometimes a neat trick is all you need to get viewers focused on your photo.

Nyan Cat. I can hear my brain singing “nyan nyan nyan nyan nyan".

Angry Birds. Angry Birds‘ social media profile always come with creative and cute goodies, such as this floating king pig! I feel like shooting it to avenge the birds!

Android Developers. The lesson to learn here is to think out of the box, your scrapbook photos don’t need to be all squares. Play tricks with their visual shape.

American Muscle. The right (and coolest) way to feature a car in a Google+ profile.

Chapman BMW On Camelback. Unquestionably sleek and professional. Luxurious company with luxurious design skills.

Evans Toyota. Flash-like animation is always the perfect eye candy to attract audiences.

Blue Tomato. Blue Tomato surely know their **** when it comes to designing an engaging profile cover without being lited to boring squares and rectangle.

Google Brasil. Complicated animation will only make the visitor suffer from the laggy profile, so Google Brasil made it smooth and simple.

Google Developers. I would be a surprise if there’s no animation on the Google Developers’ G+ profile. But they did it, and they did it sleek.

LongTap. Every part of this cover photo is simply adorable!

Malaysia Airlines. Clear sky, new Airbus, sexy typography. Everything in the cover photo symbolizes its brand.

Virgin Airlines. Smooth animation, motivating content and extreme focus to detail. Virgin Airlines have certainly hired the right designer to do its cover photo.

Nokia UK. It feels great to see that the Nokia’s cover photo is actually creative! My faith in Nokia is fully restored.

Nokia 700. In the end, it was the Nokia 700 that comes with the creative cover. If Nokia wants to do it, it could still do it right.

The Cincinnati Zoo & Botanical Garden. I don’t know who did this, but he’s my hero from now.

Wooplr. Cat and cuteness always win, that’s all I can say.

Reflection

Honestly speaking, I started the search with basically no faith in finding creative Google+ cover photos, but in the end I found lots of them! Perhaps my lack of faith was due to the small size of the cover, which turned out to not even be an issue to the true creative. These masters of manipulation truly deserve the credit for their cool ideas and smart execution.

It’s your turn now! Showcase and promote your cover photos, or any of your favorite Google+ cover photos in our comment section.

Related posts:

1. Facebook Timeline Cover: 40 (Really) Creative Examples
2. How to Customize Facebook Cover with Instagram Photos [Quicktip]
3. Showcase of Creative Facebook Timeline Cover – Part II
4. 35 Facebook Timeline Covers of Successful Brands For Your Inspiration

Today we are going to continue our discussion on Scalable Vector Graphic (SVG), and as we have pointed out in our previous post, one of the advantages of using SVG is that it can be styled with CSS.

SVG Styling Properties

Styling SVG basically work the same way as in regular HTML elements, they in fact shared some common properties as well. However, there are other properties that are intended specifically for SVG object which have their own specification apart from CSS.

For instance, in regular HTML element, we can add background color either with background-color or background CSS property. In SVG, it is a little bit different; the background color is specified with the fill property instead. Also, element’s border is specified with stroke property and is not with the border like we did in regular HTML, you can see the complete list here.

If you have been working with vector editor like Adobe Illustrator quite long, you can guess quickly that the property naming mechanism in SVG is originated from the editor.

SVG Style Implementation

We can use one of the following ways to style SVG element;

Recommended Reading: Reviewing CSS Style Priority Level

Presentation Attributes

If you have seen all SVG properties list, they all can be added directly on the element to alter the element’s presentation. The following example shows how we can add fill and stroke property directly on a rect element;

  <svg>  <rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/>  </svg>  

The rectangle will turn out to be like the screenshot below;

Inline Style Sheet

We can also add style with the style attribute. In the following example we will also add fill and stroke to the rect, but this time we add it within the style and rotate it with CSS3 transform property, like so;.

  <svg>  <rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>  </svg>  

The rectangle will turn in the same result, only that it is now also rotated;

Internal Style Sheet

Embed the SVG style within the style element is also possible and is no different to how we did it on regular HTML. This example below shows how we add internal styles to affect SVG elements in .html document.

  <style type="text/css" media="screen">  	#internal rect {  		fill: slategrey;  		stroke: black;  		stroke-width: 3;  		-webkit-transition: all 350ms;  	}  	#internal rect:hover {  		fill: green;  	}  </style>  

However, SVG is an XML-based language, so when we are about to add inline style sheet in a .svg document, we need to put the styles declaration inside cdata, as follows;

  <style type="text/css" media="screen">  	<![CDATA[  	#internal rect {  		fill: slategrey;  		stroke: black;  		stroke-width: 3;  		-webkit-transition: all 350ms;  	}  	#internal rect:hover {  		fill: green;  	}  	]]>  </style>  

The cdata here is required, since CSS can have > character that will conflict with XML parsers. Using cdata is highly recommended for embedding style in SVG, even if the conflicting character is not given in the style sheet.

External Style Sheet

The external style sheet also work the same way for SVG elements in .html document.

  <link rel="stylesheet" type="text/css" href="style.css">  

Again in .svg document, we need to refer the external style sheet as an xml-stylesheet, like so.

  <?xml-stylesheet type="text/css" href="style.css"?>     

Grouping Elements

SVG elements can be grouped with the <g> element. Grouping elements will allow us to share common styles to all the elements in the group, here is an example;

  <g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">  	<rect x="203" width="200" height="200"/>  	<circle cx="120" cy="106" r="100"/>  </g>  

Both the rectangle and the circle will have the same result.

Final Thought

We have walked through all the essential matters on styling SVG with CSS and this is just one of the advantages of serving graphic with SVG. In the next post we will take a look into another one further, so stay tuned.

• View Demo
• Download Source

Related posts:

1. A Look into: Scalable Vector Graphics (SVG)
2. Source Code Comment Styling: Tips and Best Practices
3. Reviewing CSS Style Priority Level
4. Understanding Pseudo-Element :before and :after