joyride-tour-presentation-site

Joyride – créer un tour de présentation de votre site

Joyride est un plugin Jquery qui vous permet de réaliser un tour de présentation des fonctions de votre site, simplement et rapidement, à l’aide d’info bulle design.

De quoi mettre un peu plus d’interaction dans votre site, et amener l’utilisateur à découvrir les fonctionnalités de votre site.

Pour cela, ajouter les quelques scripts nécessaires à votre page :


/* Attacher la CSS */

/* jQuery */

/* le plugin jquery Joyride */

A chaque étape de votre visite, mettez simplement un attribut id avec un nom unique à l’élément HTML désiré :


Créer une liste ordonnée contenant chacune des étapes de votre visite guidée. Vous pouvez spécifier différentes choses:

  1. Joyride est un plugin permettant faire des présentations de fonctionnalités de site

  2. Description de la fonction 1.

  3. Description de la fonction 2.

  4. Dernière fonction

    Pour finir, une belle description mise en forme...

    Il est évidemment possible de mettre en forme les bulles en HTML/CSS

  1. Présentation

    WebJuice vous permet de découvrir de nouveaux outils, des infos pratiques et utiles pour développer vos compétences, votre communication sur internet

  2. Naviguer

    naviguer sur le site à l’aide du menu principal

  3. Nos Services

    Découvrez les prestations proposées par ACcréation, éditrice de ce blog

  4. Rechercher

    Rechercher un article sur un sujet donné à l’aide du formulaire dédié

  5. Echanger

    Suivez-nous sur les réseaux sociaux WebJuice et ACcréation, ou en vous inscrivant à la newsletter

  6. Commenter

    L’article vous plait ? Vous avez une question ? Laissez un commentaire ! ou contactez-nous

  7. Partager

    Nous souhaitez partager votre joie de nous lire mais ne savez pas comment ? N’hésitez plus !

Finalement, lancer le plugin au chargement de la page, en précisant éventuellement des paramètres facultatifs :


Et voilà, ça fonctionne !
N’est-ce pas ?

Lire la suite

coming-soon-page

Coming Soon Pages efficaces

Vous allez « bientôt » lancer votre site, dans quelques semaines ou mois.
Le nom de domaine est réservé et vous n’attendez plus que la mise en ligne officielle pour communiquer efficacement.
N’attendez pas. Une coming soon page (page d’attente ou page de maintenance) peut être mise en ligne dès maintenant, et vous permettre de vous faire connaitre, de donner envie à l’internaute de revenir, voir de l’informer le jour du lancement, et de voir arriver vos premiers clients dès la mise en ligne.
Pour cela, voyons les principales composantes d’une bonne page d’attente.

Premièrement, la page doit être agréable à regarder. Évitez les « site en construction » et les logos représentant une barrière, un casque de chantier, …

 

La page d’attente doit donner envie, susciter la curiosité. Pour cela, son identité doit être forte, comme le sera votre site.
Mettez votre logo sur la page, et utilisez les couleurs et le style qu’aura votre site à son lancement.
Cette page d’attente, tout comme votre site, représente votre société, en l’attente  du site final.

 

La page d’attente doit également vous permettre de vous faire connaitre, de faire le buzz.
Utilisez donc les réseaux sociaux les plus adaptés à votre activité pour permettre aux internautes de vous suivre et de s’intéresser à vous : Twitter et Facebook maintenant indispensables, Flickr ou DeviantArt pour les artistes, MySpace pour les musiciens, …
Bien sûr, ces réseaux devront être alimentés régulièrement pour maintenir le suspense, l’attention, et donner envie aux internautes de relayer l’information.

 

En plus des réseaux sociaux, n’hésitez pas à intégrer un formulaire d’inscription à une newsletter.
Cela vous permettra d’informer tous les intéressés lors du lancement du site.
C’est aussi un moyen efficace de pousser de l’information régulièrement, si votre site nécessite un temps de développement long.

Pour aller encore plus loin, pourquoi ne pas mettre un petit formulaire de contact?

Après tout, ce n’est pas parce que votre site n’est pas en ligne que votre entreprise ne peut pas travailler !

 

Pensez également référencement !

Les moteurs de recherche (notamment Google) prennent en compte l’ancienneté d’un nom de domaine, son contenu, ses liens.
Donc faire du buzz est très intéressant pour générer des liens vers votre nom de domaine.
Mais pensez à mettre un peu de contenu textuel. Disons idéalement 200 mots (ou au moins 50) présentant votre entreprise, ses produits/services.
Votre texte doit contenir les expressions ou mots-clés sur lesquels vous souhaitez être trouvé.

 

Donnez envie de revenir régulièrement !
Donnez une date de mise en ligne précise (avec un compte-à-rebours) ou approximative, annoncez des évènements afin de donner envie à l’internaute de revenir voir votre site.

 

Pour résumer, votre page d’attente doit contenir dans l’idéal :

  • Un design attrayant
  • Les coordonnées de votre entreprise, avec une description optimisée pour les moteurs de recherche
  • Un formulaire de contact et d’inscription à une newsletter
  • Des liens vers vos réseaux sociaux pour vous suivre

Avec tout cela, vous devriez très rapidement voir les premiers visiteurs et clients sur votre site dès sa mise en ligne !
Voilà pourquoi ACcréation travaille sur cette page, qui bien que temporaire, a toute son importance.

 

Lire la suite

design-adaptatif

Trucs et astuces pour un design adaptatif (responsive design)

Le design adaptatif, ou responsive design, très à la mode depuis l’émergence du mobile, est l’art de faire s’adapter un site à la taille de l’écran l’affichant.

En d’autres termes, naviguez sur un même site depuis votre PC ou depuis votre tablette tactile ou votre mobile, le site sera toujours lisible (sans défilement intempestif), et beau, mais il se présentera différemment.
Par exemple, les colonnes de droite s’afficheront en dessous sur un petit écran, voir pas du tout, ou sous une forme différente afin de simplifier la lecture ou la navigation.

Alors quelles sont les bonnes pratiques pour avoir un site adaptatif ?

  • Approche « Mobile first » afin de vous concentrer sur l’essentiel de votre communication, et adapter ensuite le site pour afficher plus de choses pour les écrans le permettant.
  • Utilisez les @media CSS pour adapter la présentation de la page à la taille de l’écran.
  • Utilisez les librairies Javascript comme Respond.js ou CSS3 Media Queries afin d’apporter la prise en charge des @media aux navigateurs ne les comprenant pas par défaut.
  • Utilisez des « fluid layouts », ou zones adaptatives et relatives, afin de s’adapter à l’écran. Ne faites pas une CSS pour les iPhone, une pour les tablettes, …, car demain (et déjà hier) un écran avec des dimensions intermédiaires sortira.
  • Faites votre design en fonction de votre contenu. Les frameworks CSS sont à la mode, et utiles dans certains cas, mais font rarement l’affaire pour un site sur-mesure. Ne les laissez pas mettre votre créativité dans des cases.
  • Adaptez la taille de vos images à la taille des écrans avec img { max-width: 100%; }. Cela permet de gérer l’affichage, mais télécharge toujours un fichier unique (en général, le fichier en taille réelle). Pour pallier ce problème, essayer avec un script comme Responsive Images afin de télécharger l’image de la taille correspondant à celle de l’écran.
  • Utilisez le lazy loading pour vos images. Un petite librairie Javascript qui permet de ne télécharger les images que lorsque l’internaute aura fait suffisamment défiler la page pour que l’image se trouve dans la zone visible. On peut citer le très bon plugin jQuery Lazy Load.
  • Oubliez la perfection (mais essayez de l’atteindre). Il y aura toujours des personnes avec de très vieux navigateurs, ou Javascript désactivé. Faites en sorte que l’affichage de votre design dans ces conditions soit correct, que le site reste beau et utilisable, même si tout ne sera pas parfait (le site aura par exemple des images haute résolution alors que l’écran de l’internaute n’est pas très grand).

Cette façon de concevoir est récente, mais s’avère de plus en plus nécessaire, compte-tenu des périphériques variés ayant accès à internet (PC fixes, portables, tablettes, mobiles, télévision).
Suivre ces recommandations demande du temps et de la réflexion pour obtenir un site joli, bien fait, utilisé et utilisable, mais c’est important, et vous les connaissez maintenant, alors comme on dit, y’a plus qu’à.

Lire la suite

HTML5 : La nouvelle technologie suscite beaucoup d'intérêt

HTML5 : des expériences à voir absolument

A l’heure actuelle, HTML5 est l’un des sujets les plus populaires chez les développeurs.

Cette nouvelle technologie suscite beaucoup d’intérêt chez ces derniers, qui tentent des expériences incroyables que l’on aurait pas pu imaginer sans flash il y a encore quelques années.

Aujourd’hui, nous vous proposons de voir une collection incroyable d’expériences en HTML5, de sites en HTML5 ainsi que de tutoriels HTML5 pour ceux qui voudraient toucher de plus prêt à cette nouvelle techno !

ENJOY !!!

 

31 expériences HTML que vous devez voir

Attention vous allez en avoir plein les yeux !

Le pouvoir des fleurs en HTML5

 

50 sites Internet utilisant la technologie HTML5

50 sites utilisant HTML5

 

25 tutoriels HTML 5

Amusez-vous 😉

Tutoriels HTML5

Lire la suite

geoplugin-geolocaliser-internautes

geoPlugin – géolocalisez vos visiteurs sans rien installer

En temps normal, afin de localiser un internaute (à partir de son adresse IP), vous devez passer par une librairie serveur s’appuyant souvent sur Maxmind, une base de données gratuite et fiable, mais que vous devez installer sur votre serveur.

Vous pourrez maintenant utiliser GeoPlugin, une librairie Javascript qui vous permettra d’afficher sur votre site la ville, la région, le pays, les coordonnées GPS, … de vos internautes.
Cette librairie fait appel à un webservice (via Ajax) et ne nécessite donc aucune installation sur votre serveur.

Quelques lignes suffisent à sa mise en place :



Cerise sur le gâteau pour ceux qui auraient besoin d’autres technologies.
Vous pouvez obtenir le retour du webservice en JSON, en XML ou en tableau PHP sérialisé.
Et deuxième cerise, la librairie dispose également d’un convertisseur de devises.

Lire la suite

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();
});

Lire la suite

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

Lire la suite

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.

Lire la suite

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

Lire la suite

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 ?

Lire la suite