Skip to main content
fitvids-responsive-design-video

Responsive-webdesign : vos vidéos s’adaptent à votre taille d’écran

Le responsive-design est décidément dans l’ère du temps, avec l’explosion du mobile et autres tablettes, et la multiplication des tailles d’écrans.

Grâce à la librairie fitvids.js, vos vidéos youtube, viméo, … s’adaptent automatiquement à la taille de votre navigateur.

Même en pleine lecture, vous pouvez redimensionner votre navigateur (et donc votre vidéo) sans coupure !

Niveau intégration, comme toujours avec jQuery, rien de plus simple :

$(document).ready(function(){
$("#mavideo").fitVids();
});

taille-de-police-web-rem

Fini la galère des tailles de police

Déterminer l’unité à utiliser pour vos polices (font) a toujours été un problème délicat, avec des avantages et inconvénients dans chaque cas.

Pour rappel, il existait jusqu’à maintenant deux principales unités dans le web :

  • l’unité absolue (pixel alias px)
  • l’unité relative (alias em)

Taille de police en px

Depuis le début du web, l’unité pixel est utilisée pour spécifier les tailles d’objets, et notamment les tailles de polices.

L’avantage de cette unité est que l’on sait exactement à quoi elle correspond.

L’inconvénient est qu’en l’utilisant, on perd une faculté importante, celle de pouvoir redimensionner le texte. Et il n’est pas possible de grossir la taille du texte avec cette unité, même sur des navigateurs récents.
Il existe toutefois une fonction zoom sur certains navigateurs (qui grossit tout, et pas seulement le texte), ce qui peut déjà  être un petit palliatif.

Taille de police en em

L’unité em parue il y a déjà plusieurs années parait donc être la solution absolue (enfin relative…).

Cette unité permet après définition de la taille de texte par défaut, de définir la taille du texte d’un bloc (une div par exemple) relativement à la taille du texte du bloc parent.

Par exemple:


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */

L’avantage de cette unité est sa notion d’unité relative, ce qui permet en changeant la taille du texte de base, de changer la taille de l’ensemble des textes du site.
Le navigateur peut ainsi en changeant sa taille de base, grossir l’ensemble des textes de la page, tout en gardant les différences entre les différents textes (le titre en plus gros, le copyright en plus petit, …).
L’inconvénient est que cette notion de relative est dépendante du bloc parent.
Dans l’exemple ci-dessus, si notre balise « a » est dans le body, elle aura une taille de 14 pixels, mais si notre « a » se trouve dans une balise « p », elle aura une taille de 20px (soit 14px * 1.4).
D’où un gros problème de design potentiel, obligeant à créer des styles pour les éléments enfants à 1em.

Par exemple :


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */
p a { font-size: 1em; } /* =14px */

C’est pénible !
La solution arrive avec CSS3 et l’unité rem.

Taille de police en rem

Cette unité, qui veut dire « root em », au lieu d’être relative à son parent direct, est relative à la racine du HTML, c’est à dire à la balise html.
En reprenant nos styles, cela donnerait donc :


html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
p { font-size: 1.4rem; } /* =14px */
a { font-size: 1.4rem; } /* =14px */

Noter qu’il n’y a plus de « ? » pour notre balise « a », car on est maintenant sûr de la taille de notre lien.
Elle est pas belle la vie ?
D’autant que le support de cette unité est plutôt correct : Safari 5, Chrome, Firefox 3.6+, et même Internet Explorer 9 !

Vous me direz, d’accord, mais pour les autres (IE6 à 8, Opéra, …) ?
Et bien, le mieux est de définir deux unités :

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
p { font-size: 14px; font-size: 1.4rem; } /* =14px */
a { font-size: 14px; font-size: 1.4rem; } /* =14px */

Vous savez maintenant comment avoir une belle taille de police, homogène dans tous les navigateurs.

Source : Snook.ca

utilisation-app-webapp

Sur Android, les applications plus populaires que les Webapp

Le cabinet Nielsen vient de publier des statistiques sur l’utilisation des portables Android.

Les utilisateurs d’Android utilisent leur portable pour consulter les actus, la météo, leur email, ou les réseaux sociaux.

Aujourd’hui, les personnes munies de smartphones consacrent non loin d’1 heure à leur portable par jour.

Pour cela, ils peuvent passer par les sites mobiles, ou par des applications dédiées installées sur le portable.

Et les applications ont encore de beaux jours devant elles, avec 37 minutes par jour sur 56 !

Sur les plus de 250000 applications Android disponibles, les 50 plus importantes représentent plus de 60% de l’audience, ce qui ne laisse qu’un petit 40% aux 249950 autres.
Mais compte tenu des millions d’utilisateurs, il y a encore des places à prendre (sans forcément vouloir rivaliser avec les Facebook, Twitter, et autres ténors du marché).

Source : Statistiques Nielsen

 

elephant-origami

elePHPant Origami, pour les fans de PHP et d’origami !

Voici un billet tellement inutile qu’il en devient tout simplement indispensable 🙂

elePHPant Origami vous présente tout simplement comment réaliser l’éléphant PHP en Origami et le poser sur votre bureau (votre vrai bureau, pas celui de votre écran) !

Vous trouverez dans le guide téléchargeable en PDF:

  • 37 étapes pour réaliser pas à pas votre propre elePHPant en papier.
  • 1 template de base à imprimer sur feuille A4
  • 1 lien vers le tutorial vidéo Youtube

Tout simplement énorme !

blog-sortez-du-lot

7 techniques pour avoir un bon blog

Crédit photo : c.a.muller

A l’heure où la technologie et Internet se développent, ces deux outils de communication ont créé de nombreux moyens pour se faire connaitre et faire croitre sa société.
Les blogs sont l’un de ces moyens.
Mais comment faire pour que son blog soit lu et suivi ?

1- La qualité de vos posts

La qualité de vos posts est très importante, car si vos visiteurs trouvent des contenus de qualité, intéressants et attractifs, ils vont revenir sur votre blog, en parler autour d’eux, partager vos contenus. Et jour après jour, votre nombre de visiteurs va s’accroitre.
Nous pouvons donc dire que pour avoir un bon trafic sur son blog, il faut écrire des contenus de qualité qui apporteront un bénéfice à vos lecteurs.

2- Alimenter régulièrement votre blog

Dans chaque boulot, travailler continuellement est la principale clé du succès. Si vous n’êtes pas ponctuel et régulier dans votre travail, vous n’êtes pas à même de réussir. Il en est de même pour votre blog. Si vous alimentez régulièrement votre blog de contenus, vos visiteurs auront envie de vous suivre et de revenir vous lire. Il n’y a pas de règles dans le monde du blog, vous pouvez l’alimenter tous les jours, toutes les semaines, tous les mois, le tout est d’être régulier et d’apporter toujours plus de contenus à vos visiteurs.
Si vous êtes constants dans votre travail, votre réussite sera constante également.

3- Connaitre les envies de vos lecteurs

Si vous êtes dans l’optique de fournir du contenu régulier en fonction des centres d’intérêts de vos lecteurs, cela vous aidera à avoir un succès incroyable. Poster un article en pensant que le lecteur aimera ça, revient à répondre à des questions intéressantes, à partager ses points de vue, ses idées… avec ses lecteurs.
Ne restez pas inactif une fois l’article posté et répondez aux questions que le lecteur posera dans les commentaires, participez au débat.
Essayez d’écrire sur des sujets qui vous intéressent tout en faisant référence aux nouvelles tendances.
Car un bon bloggeur va toujours chercher à fournir un contenu exemplaire à son lecteur et sa première préoccupation sera de répondre aux besoins et envies de ses lecteurs.

4- Poster au bon moment

Poster un bon contenu sur un super sujet au bon moment sera excellent pour votre marketing.
Cela jouera un rôle vital au niveau de la stabilité de votre blog dans les flux d’informations.
Il vous suffit juste de devancer vos concurrents pour écrire un contenu intéressant avant eux. Pas la peine de vous lancer dans la rédaction dans un essai ou dans la poésie, vos lecteurs viennent juste chercher de l’information, alors n’essayez pas de les impressionner avec des paragraphes à rallonge. Ecrivez juste au bon moment, même s’il n’y a que quelques lignes.

5- Ecrire avec sa propre expérience

Si vous avez de l’expérience sur le thème de votre blog ou dans le domaine sur lequel vous souhaitez poster, alors mentionnez cette expérience et n’essayez pas d’écrire sur des choses que vous ne connaissez pas ou peu. Par exemple, si vous êtes Web Designer dans une société, il y a des milliers de sujets que vous pouvez aborder, mais ne parlez pas des Web Designer Freelance si vous n’avez jamais travaillé en Freelance.
Si vous écrivez avec votre expérience, votre post sera unique sur le sujet, plus attractif et plus intéressant à lire pour tout le monde.

6- Avoir un design attractif

Ecrire des contenus intéressants et de qualité c’est bien, mais ça ne suffit pas !
Le design joue pour beaucoup et plus votre site sera beau esthétiquement parlant, plus il attirera des visiteurs. Il existe de nombreux thèmes WordPress très sympas et gratuits, ou à des prix tout à fait abordables sur la toile. Mais attention à bien choisir votre thème en concordance avec la thématique de votre blog.

7-Parler de son blog

Il y a enfin une dernière chose à ne pas négliger pour avoir du trafic sur son blog, c’est d’en parler et de le faire connaître. Aujourd’hui les réseaux sociaux sont devenus un passage obligé et vous permettent de communiquer en très peu de temps des informations importantes à votre réseau, qui ensuite va répercuter la nouvelle à son propre réseau et ainsi de suite…
Ne négligez donc pas ces nouveaux outils de communication et donnez-vous les moyens de vous faire connaitre.
Privilégiez les réseaux sociaux Viadeo et LinkedIn pour les professionnels ou Facebook et Twitter pour les particuliers.

En résumé

Pour assurer un bon trafic sur votre blog et pour que les visiteurs restent et reviennent, il vous faut donc :

  • Un bon design
  • De bons contenus, de qualité, intéressants, adaptés à vos lecteurs
  • De l’interactivité
  • Poster au bon moment
  • Ecrire avec votre propre expérience
  • Faire connaitre votre blog

Maintenant, vous avez toutes les clés en main pour que votre blog soit un succès.

Partager vers Google+

La fonction de partage vers Google+ rajoutée au bouton +1

Depuis hier, Google vient d’ajouter la fonctionnalité de partage à son bouton +1 !
L’équivalent, du bouton Share de Facebook, mais avec le petit plus Google : la possibilité de sélectionner vers quels cercles publier l’info.

Il vous suffit de cliquer sur le bouton +1, de choisir Share et d’éventuellement poster un petit commentaire.
Sélectionner le ou les cercles vers lesquels partager, et c’est parti !

Cette fonction de partage sera bientôt disponible pour tout le monde.
En l’attente, il vous suffit de saisir votre adresse mail (celle de votre compte Google+) à cette adresse : http://www.google.com/+/learnmore/platform-preview/
Puis de revenir cliquer sur le bouton +1 de cet article (ou de n’importe quel autre).

Si vous ne disposer pas encore d’un compte Google+, n’hésitez pas à me demander une invitation en m’envoyant un message

checkbox-ergonomique

Pour des cases à cocher et radio boutons faciles à utiliser

Les cases à cocher et les radio boutons sont des éléments essentiels dans un formulaire de contact ou d’inscription.
Pour autant, il n’est pas toujours simple de les utiliser, car on est obligé de cliquer sur ce tout petit carré (ou rond).
Heureusement, il existe des façons très simples d’améliorer leur utilisation.

Utiliser la balise label

Les cases à cocher sont toujours adosser à un texte. Ce texte doit être intégré dans une balise « <label> » afin d’être associée à la case à cocher correspondante.
De cette façon, l’utilisateur aura la possibilité de cliquer sur le texte pour cocher/décocher la case.

Mettre des effets de survol

Mettre un label est le minimum pour rendre ses cases à cocher un peu plus user-friendly.
Mais l’utilisateur peut ne pas savoir qu’il peut cliquer sur le texte pour cocher la case. On se retrouve du coup avec une fonctionnalité très intéressante, mais inutilisée.
C’est dommage, rappelez-vous la règle des 3U, clé du succès : avoir une solution Utile, Utilisable, Utilisée

Pour rendre nos cases à cocher utilisées, un petit effet au survol du texte s’avère nécessaire : au minimum, un curseur en forme de pointeur.

Placer les cases à cocher dans une zone dédiée

En alliant label cliquable, et effet de survol très visible, on obtient des cases à cocher très ergonomiques.

Il ne reste plus qu’à placer l’ensemble des cases à cocher d’un ensemble dans une zone dédiée pour maximiser la compréhension et l’utilisation des cases à cocher.

On en trouve de très beaux exemples dans les applications mobiles (ici jQueryMobile) :

Voilà une méthode simple et rapide pour rendre vos formulaires plus agréables à renseigner pour l’utilisateur.

checklist-marketing-viral

Checklist de campagne Marketing viral

Vous souhaitez créer une campagne de marketing viral, excellente idée.
Mais il est facile de devenir trop focalisé sur les détails, et de ne pas voir la forêt qui se cache derrière l’arbre.
Une bonne campagne est composée d’un ensemble de choses auxquelles il faut prêter attention.
En voici une liste rapide afin de s’assurer que vous n’avez pas oublié quelque chose.

Objectifs

Avez-vous défini des objectifs de votre campagne ?
Savez-vous ce que vous essayez de faire (d’une manière réalisables et quantifiables) et avez-vous identifié les critères que vous allez utiliser pour identifier le succès ?
Gardez à l’esprit que certains types d’utilisateurs ont tendance sont plus en clin à la diffusion de contenu, assurez-vous de cibler ces personnes.

Cible virale

Avez-vous identifié les caractéristiques démographiques de votre cible de campagne.
Avez-vous cherché à savoir quels types de contenus ils partagent et à partir d’où ils le partagent ?

Unicité et nouveauté

Votre campagne est-elle véritablement nouveau ? Il peut s’agir un regard neuf sur un concept ancien, mais il doit y avoir du neuf dans votre campagne, sinon qui s’en souciera ?

Utilité

Votre campagne est-elle utile, ou peut-elle améliorer la vie des utilisateurs ?
Si les gens croient qu’ils vont aider quelqu’un en leur envoyant votre contenu, cela va considérablement augmenter vos chances d’effet viral.

Motivation

Les utilisateurs peuvent-ils avoir une motivation à diffuser votre contenu ?
Echantillons de produits ou informations gratuites sont un moyen facile d’accomplir cette tâche.

Adhésion

Avez-vous inclus la possibilité pour les utilisateurs qui aiment votre campagne de s’engager sur le long terme ?Abonnements email ou flux RSS sont des moyens pour ce faire.

Appel à l’action

Avez-vous inclus des appels à l’action qui vont déclencher le désir de diffuser votre contenu chez l’utilisateur (que vous devriez avoir identifié dans le stade de la recherche) ?

Optimisation

Avez-vous vérifié que votre contenu est facile à partager ?
L’URL est courte et permanente ? Des outils permettant aux utilisateurs de partager sur les réseaux sociaux sont disponibles ? Si vous utilisez des vidéos, les utilisateurs peuvent-ils intégrer la vidéo sur leurs propres sites et profils ?

Conversation

Est-ce que votre campagne a des mécanismes  pour permettre aux utilisateurs d’en parler (à la fois avec vous et avec leurs amis) ? Les commentaires sont la manière la plus courante de le permettre.

Semer pour récolter

Une fois votre contenu rédigé, avez-vous une stratégie pour lancer votre campagne parmi les utilisateurs qui sont susceptibles de le partager ? Ne pas succomber au piège du « je rédige mon contenu et les utilisateurs viendront d’eux-mêmes ». Vous devez placer votre campagne à la vue de votre cible virale.

Tracking & Statistiques

Avez-vous des systèmes d’analyse en place afin que vous puissiez suivre la propagation et la croissance de votre campagne ainsi que de mesurer son rendement par rapport à vos objectifs ?

Plan de secours

Le succès de votre plan de marketing viral n’est pas garanti, alors il est recommandé de planifier le lancement de plus d’une campagne. Quoi que vous choisissiez de faire, assurez-vous d’avoir un plan si votre première tentative n’est pas aussi virale que prévue.

reseaux-sociaux

Les 5 erreurs de promotion sur les réseaux sociaux

Les médias sociaux sont en effet une chose puissante de nos jours. Les médias sociaux ont beaucoup à offrir, cependant, il y a de bonnes et de mauvaises choses.
Les médias sociaux peuvent vous apporter beaucoup, même peuvent aussi avoir des très mauvais effets s’ils sont mal utilisés.

Si vous êtes présents sur les médias sociaux, vous devez être très prudent dans les décisions que vous prenez et vous assurer que vous n’avez pas commis toute sorte d’erreurs qui peuvent nuire à votre réputation, et ruiner les efforts que vous avez fait pour être présents sur ces médias sociaux.

Les médias sociaux sont stratégiques. Si vous faites la promotion de votre entreprise, quel qu’en soit le secteur, voici quelques points à éviter.

Le but principal de cet article est de vous faire prendre conscience des erreurs qui devraient être évitées. Les petites entreprises, mais également les plus grandes ont commis des erreurs dans le passé et continuent encore à le faire. Au moment où elles le réalisent, il est souvent trop tard. Alors, continuez à lire cet article si vous voulez éviter ces erreurs :

Ne pas savoir ce que l’on cherche

La plus grande erreur que la plupart des sociétés font est qu’elles ne sont pas sûrs de ce qu’elles veulent.
Elles souhaitent juste être présentes car c’est dans l’air du temps, en espérant atteindre leur cible par magie.

Étrangement, ces entreprises, aussi grosses soient elles, ignorent les fondamentaux de la présence sur les médias sociaux. Nous pourrions discuter de nombreux exemples de ces grandes entreprises qui savent que la présence sociale est importante et qui font des pages de fans sur Facebook.

Mais une fois que des centaines de personnes aiment la page de la marque, vous verrez que la plupart des fans se retrouvent à se plaindre des choix et des produits de la marque et que toutes les questions posées sur la page Facebook restent sans réponse. En procédant de cette façon, vous avez trouvé  la bonne façon de vous attirer toutes les réactions négatives et l’objectif principal de votre présence dans les médias sociaux est perdu.

Si vous voulez vraiment que votre présence sur les médias sociaux ait pour vous un sens positif, vous devez être sûr de ce que votre but réel. Si vous connaissez la raison exacte et le but de votre présence, sa gestion ne devrait pas être difficile.
Mais être présent sur les médias sociaux juste pour le plaisir de le faire est certainement une grosse erreur. Si vous êtes présent face à vos clients/prospects/internautes et que vous ne vous adressez pas à eux, vous n’obtiendrez aucune reconnaissance.

Ne pas assumer sa présence

Quand il s’agit d’avoir une présence sur les réseaux sociaux, la plupart des entreprises pensent que la chose la plus importante est d’avoir une présence, et non pas de la maintenir. Aussi, il n’est pas nécessaire de faire des efforts pour«promouvoir» la présence de votre entreprise sur les médias sociaux. Je me demande pourquoi ils s’attendent à ce que les gens apprennent leur présence par eux-mêmes. Par exemple, si vous avez une société d’impression qui est populaire hors d’internet alors vous pourriez ne pas avoir besoin de trop de publicité et de marketing pour obtenir une forte présence sur les médias sociaux. Toutefois, si vous êtes dans l’impression en ligne et une jeune société, vous ne devriez pas supposer que le simple fait de créer une page, va automatiquement amener les gens à vous.

Ne vous contentez pas de créer une simple page sur Facebook ou Twitter, parce que tout le monde le fait. Même si vous le faites, assurez-vous de promouvoir votre page afin que les gens découvrent votre existence. Vous pouvez trouver beaucoup de sites où vous pouvez promouvoir votre présence sur les médias sociaux sans avoir à dépenser des montants énormes. Si vous voulez une forte présence sur ces médias, assurez-vous promouvoir votre présence en ligne et hors ligne (logo et adresse sur vos flyers, affiches, …).

Se reposer entièrement sur votre agence

Une autre erreur commune lorsque vous êtes présent sur les réseaux sociaux est d’être complètement dépendant des agences de communication.

Certaines entreprises font appel à des agences de communication (ce qui est une bonne chose), mais oublient ensuite l’importance de leur présence. Elles s’attendent à ce que l’agence puisse tout gérer.

Oui, elles aident, c’est évident. Leurs connaissances d’internet et en particulier des réseaux sociaux va permettre d’obtenir les bons conseils, de créer une page unique, accueillante, et d’initier les bases d’une communication solide.
Toutefois, votre relation client ne pourra être gérée par l’agence sur le long terme, sauf si vous avez prévu de payer l’agence pour toujours. Si oui, très bien, une personne, connaissant vos produits, votre fonctionnement, votre stratégie, pourra répondre aux internautes et donner une image positive de votre marque.
Mais si vous ne pouvez pas vous permettre d’embaucher une agence pour cette gestion au quotidien, vous avez besoin d’avoir une vision de comment les choses vont fonctionner à l’avenir pour votre présence dans les médias sociaux.

En tant qu’utilisateur d’Internet, comme pour de nombreuses personnes, faire confiance au contenu en ligne n’est pas si facile et les gens cherchent des informations authentiques. Les gens vont toujours chercher la source la plus fiable et qui ne peut être que quelqu’un qui est associée à l’entreprise. Ainsi, au lieu de tout laisser gérer par l’agence, assurez-vous que votre page est gérée par les gens de votre propre service client. Les gens souhaitent avoir des réponses à leurs questions à partir des sources fiables et authentiques. Une forte présence sur les médias sociaux nécessite une forte relation avec vos clients et celle-ci ne peut être faite qu’avec l’appui de votre service client.
Puisque les agences ne sont pas réellement liées à votre produit, elles peuvent en faire la promotion au départ, mais elles n’auront pas la possibilité de tisser des liens avec vos clients. Rappelez-vous toujours que la présence sur les médias sociaux n’est efficace que si vous êtes en mesure de tisser des liens avec votre public.

Tout miser sur les réseaux sociaux

Si vous pensez que votre seule présence sur les médias sociaux peut vous apporter une foule de personnes vous suivant, vous avez tort. Une autre erreur commise par les entreprises, c’est qu’elles ont commencé à ignorer les médias traditionnels comme des dépliants, brochures, cartes postales, cartes de visite, affiches, brochures, cartes publicitaires et des calendriers etc

Une plate-forme peut être utilisée pour promouvoir une autre plateforme.
Parlez de votre page Facebook sur vos affiches, et parler de vos parution dans les journaux sur votre page Facebook.
Vous avez évidemment une stratégie pour promouvoir votre produit et sans aucun doute, les médias sociaux jouent un rôle important, mais ne négligez pas les autres médiums, ils sont tout aussi important.

Tout gérer soi-même

Envisagez-vous de gérer votre présence en ligne vous-même ?
Ceci n’est pas une bonne idée. Vous devez comprendre que cela ne va pas être une chose facile.
Vous devez le prendre au sérieux. Aujourd’hui, tout le monde pense qu’il peut manipuler les médias sociaux et qu’il n’y a pas besoin de qualifications spécifiques. Les experts du marketing viral, les bons community manager sont rares.
Soyez prudent et honnête dans votre relation client sur les médias sociaux, choisissez un partenaire qui puisse vous aider dans votre réflexion et vos actions, car un mauvais choix peut détruire votre présence sociale sur ces médias.

Résumé

Finalement, ces erreurs peuvent être éviter simplement.
Maitriser sa communication, connaitre ses objectifs, communiquer largement, bien s’entourer, avoir une démarche d’ouverture.
Ces concepts, bien que simples, sont souvent mal mis en pratique.
Alors, réfléchissez, planifiez, faites-vous conseiller.

formes-CSS

Dessiner des formes en CSS pur

Avec l’arrivée de CSS3 sur les navigateurs et des border-radius, il devient possible de faire des formes jusqu’alors impensables.
Ci-dessous sont présentes une liste non-exhaustives de formes possibles (un navigateur respectant les normes CSS3 et notamment les border-radius est nécessaires pour en apprécier la beauté ; bref presque tous sauf IE 8 et moins).

Pour que ça soit compréhensible, les formes sont classées par ordre de difficultés de réalisation.

Square


#square {
width: 100px;
height: 100px;
background: red;
}

Rectangle


#rectangle {
width: 200px;
height: 100px;
background: red;
}

Circle


#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Oval


#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Triangle Up


#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Triangle Down


#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Triangle Left


#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Right


#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Top Left


#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Top Right


#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}

Triangle Bottom Left


#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Bottom Right


#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

Parallelogram


#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}

Trapezoid


#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

Star (6-points)


#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

Star (5-points) via Kit MacAllister


#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}

Pentagon


#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}

Hexagon


#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}

Octagon


#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

Heart via Nicolas Gallagher


#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

Infinity via Nicolas Gallagher


#infinity {
position: relative;
width: 212px;
height: 100px;
}

#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Diamond


#diamond {
width: 80px;
height: 80px;
background: red;
margin: 25px 0 15px 35px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

Egg


#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Pac-Man


#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}

Talk Bubble


#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}

12 Point Burst via Alan Johnson


#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

8 Point Burst via Alan Johnson


#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

Source : CSS-Tricks