Le but est de créer un logo , sans utiliser de graphique , uniquement avec les propriétés de CSS3.

Pour le code HTML , une simple balise H1

<h1>LOGO</h1>

Pour la partie CSS , nous appliquons un style simple pour commencer .

.logo {
font-weight:bold; // mettre en gras
font-size: 5em; // Une taille de 6 fois la taille normale
color: #efefef;
text-shadow:1px 3px 8px rgba(0,0,0,0.80); // une ombre de 8px decalé de 3px et 1px avec une couleur noir à 80% d'opacité
}

Ce qui nous donne , LOGO avec un effet d’ombrage .

LOGO

Pour le fond, une balise div est ajoutée .

<div class="fond">

LOGO

On appliquera ensuite , sur la feuille de style CSS , un effet arrondi sur les angles avec la syntaxe border-radius .

.fond {
     -webkit-border-radius: 30px; // pour safari et chrome
	  -moz-border-radius: 30px;   // pour firefox
	  -o-border-radius: 30px;   // pour opera
      border-radius: 30px;   // autres , arrondis des angles
// ombres de fond
-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,0.5); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); 
box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
}

Puis pour appliquer l’effet de degradé , un outil indispensable pour jouer sur les degradés et assurer une compatibilité , avec tous les navigateurs :

http://www.colorzilla.com/gradient-editor/

A ajouter aux propriétés de fond pour le dégradé  …

background: #eeeeee; /* Pour les anciens navigateurs , pas de degradés */
background: -moz-linear-gradient(45deg, rgba(238,238,238,1) 40%, rgba(204,204,204,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(40%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* chrome,safari4+ */
background: -webkit-linear-gradient(45deg, rgba(238,238,238,1) 40%,rgba(204,204,204,1) 100%); /* chrome10+,safari5.1+ */
background: -o-linear-gradient(45deg, rgba(238,238,238,1) 40%,rgba(204,204,204,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(238,238,238,1) 40%,rgba(204,204,204,1) 100%); /* ie10+ */
background: linear-gradient(45deg, rgba(238,238,238,1) 40%,rgba(204,204,204,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* ie6-8 fallback on horizontal gradient */;-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,0.5);