16
AVR

CSS Arrow Please: Un générateur de box avec flèche en CSS3

Publié le 16/04/12 à 09h16 par DJo

CSS Arrow Please est un service web gratuit permettant de générer facilement une box avec flèche en CSS.

CSS3 Arrow Please est un service web gratuit permettant de générer facilement une box avec flèche en CSS3.

Un nouveau générateur de code CSS bien pratique qui permettra cette fois-ci de créer une box design avec flèche directionnelle.

Pratique pour attirer l'attention vers un élément de votre site.

Le service permet de configurer plusieurs aspects de la box CSS:

  • La direction de votre flèche
  • La taille de la flèche
  • La couleur de fond de la box
  • La largeur de la bordure
  • La couleur de la bordure

Dès que vous changez une option, vous obtenez instantannément le code de votre box:

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 5px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-left-color: #88b7d5;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
}
.arrow_box:before {
    border-left-color: #c2e1f5;
    border-width: 37px;
    top: 50%;
    margin-top: -37px;
}

Il ne vous restera plus qu'à personnaliser le texte de l'intérieur de la box, et le tour est joué!

 

Site Officiel

Baraguiné par geoffrey_crofte le 17/04/12 à 00h10
geoffrey_crofte via Twitter
Hello,
Vous voulez dire CSS3 comme CSS 2.1 c'est ça ? :p

En fait même la syntaxe des pseudo-éléments c'est du CSS 2. On trouve éventuellement du CSS3 sur la démo (border-radius, ombre portée), mais le code fourni n'en est pas.

Il y a éventuellement "pointer-events" qui n'est pas indispensable et qui serait considéré comme du CSS4 s'il est utilisé sur des éléments non SVG.

Voilà, je tenais juste à signaler ces quelques points, mais j'ai peut-être mal analysé la chose.
Bonne soirée.
Baraguiné par DJo le 17/04/12 à 07h34
DJo sur La Ferme du Web
En effet! J'ai fais le raccourci trop vite ;)

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web