Skip to main content
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

twitter-fail-whale

La baleine Twitter dessinée et animée en pur CSS

Il y a quelques temps déjà que Steve Dennis a dessiné un « logo » non officiel pour Twitter : des petits oiseaux soulevant hors de l’eau une baleine.

Cette « image » a été réalisée entièrement en CSS (oui oui, entièrement, sans la moindre image).
Vous n’y croyez pas ?
Aller voir la démo en ligne sur différents navigateurs :

  • Chrome et Safari marche parfaitement (et l’image est même animée),
  • Pour les autres, c’est plus délicat. Noter plutôt le rendu Internet Explorer 8 🙁

Impressionnant, n’est-ce pas ?

indeterminate-checkbox

Indeterminate checkbox

Par défaut, une case à cocher peut être cochée … ou non cochée.

Cela se symbolise de la façon suivante selon la version de HTML:








Mais il existe un troisième état que l’on voit souvent sur des applications « client lourd », notamment lorsqu’on installe une application et que l’on coche ou décoche dans une arborescence.

C’est l’état « indeterminate » alias « ni-coché-ni-décoché » !

Cet état existe aussi pour le web, mais n’est pas accessible en tant qu’attribut HTML (dommage), mais uniquement en tant propriété du DOM (donc via Javascript).
Ce champ est défini dans la spec HTML5 des checkbox.

Il est à noter que cet attribut ne change que l’aspect graphique de la case à cocher, et qu’elle reste considérée comme non-cochée lors de la soumission du formulaire au serveur.