Logo Identity belongs to © sergemoulia.fr, all rights reserved.

 

Pierre Castaing and I worked on the website of Serge Moulia, a French freelance photographer.

The part of the logo redesign is a good example to show how to adapt a graphic identity for the web media.

This logo respect 4 of the 5 logo principes:

• it's simple
• it's memorisable
• it's colorfull
• it's unique

…and it can be transforming with pure CSS rules without any images :D

 

I can't explain all the codes below cause you must'nt re-use it refer to copyright rights. It's a simple CSS demonstration and I hope it could be a source of yours inspiration.

 

Check out the Demo result

 

The markup:

1. <div id="wrapper">

2. <div id="logo">

3. <span id="logo-center"></span>

4. <span id="logo-outer">

5. <b></b></span><i></i>

6. <div>

7. <a href="http://www.sergemoulia.fr" rel="bookmark" title=""><span>Serge</span><em> </em>MOULIA</a>

8. </div>

9. <span id="slogan">

10. Pho<span>t</span>ographe

11. </span>

12. </div> <!-- /logo -->

13. </div> <!-- /wrapper -->

And the CSS rules:

1. /* =Resets default browser's styles */

2. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} :focus{outline:0} ins{text-decoration:none} del{text-decoration:line-through} table{border-collapse:collapse;border-spacing:0}

3. #wrapper{font-size:62.5%}

4. /* =Logo styling */

5. #logo{

6. position:relative;

7. top:0;

8. left:0;

9. width:6em;

10. height:6em;

11. margin:4em;

12. background:#fff;

13. background:#ff6600;

14. -moz-border-radius:.6em;

15. -khtml-border-radius:.6em;

16. -webkit-border-radius:.6em;

17. border-radius:.6em

18. }

19. #logo-outer,#logo-center,#logo b,#logo i{display:block;position:absolute;background:#fff}

20. #logo-outer{

21. top:1em;

22. left:1em;

23. width:4em;

24. height:4em;

25. -moz-border-radius:.3em;

26. -khtml-border-radius:.3em;

27. -webkit-border-radius:.3em;

28. border-radius:.3em

29. }

30. #logo-center{top:2em;left:2em;z-index:2;width:2em;height:2em;margin:0 0 0 0;background:purple}

31. #logo b{top:-1.1em;left:1.6em;width:1em;height:6.2em}

32. #logo i{top:2.5em;left:0;width:6.1em;height:1em}

33. #logo div{display:inline !important;position:absolute;left:0;top:.1em;z-index:1;width:7.5em;margin:0;padding:0;font:normal 4em arial,sans-serif;line-height:1em;color:#666;text-transform:lowercase}

34. #logo div a{position:relative;z-index:1;float:right;color:#222;text-decoration:none;border:0}

35. #logo div a span{color:#999}

36. #logo div em{display:inline !important;width:0;margin-left:-.3em}

37. #slogan{position:static;float:right;margin:-.65em -1.8em 0 0;font:normal 9px Arial,Helvetica,Geneva,sans-serif;letter-spacing:1.9em;color:#333;background:none;text-transform:uppercase;letter-spacing:1.9em;white-space:nowrap !important;cursor:default}

38. #slogan span{letter-spacing:1.4989em;color:#fff}

39. #logo div a:hover{color:#999}

40. #logo div a:hover span{color:#222}

 

Update (2009-11-22): Now support for IE. Here is the specificly css rule:

 

1. <!--[if lte IE 7]>

<style type="text/css" media="screen">

div.logo div a{height:1.1em}

div.logo span.slogan{

position:relative;

top:2.2em;

left:-9em;

background:none;

font:normal .2em Arial,Helvetica,Geneva,sans-serif;

text-transform:uppercase;letter-spacing:1.9em;white-space:nowrap !important;cursor:default

}

div.logo span.slogan span{

2. display:inline-block;

3. width:3.65em !important

4. }

5. </style>

6. <![endif]-->