28172 sujets

CSS et mise en forme, CSS3

Bordure d'une box. Effet CSS3.

Bonjour,
je vous demandes de l'iade car voilà 30 min que je cherche à comprendre comment fonctionne un effet. Mais je n'y arrive pas...

Sur ce site:
http://fr.html5boilerplate.com/

en dessous de "prêt à plonger" on vois 2 balise <a> avec un très chouette style.
Mais je ne comprend pas comment le webdesigner à fait pour les petit triangle sur les bord de la box du <a>.
C'est apparement du pure CSS mais je ne vois pas comment...

En analysant le code la seule chose que j'ai réussis à comprendre c'est que si je retirais la position:relative cela ne fonctionne plus.

Est ce que quelqun comprend ? Merci d'avance de satisfaire ma curiosité Smiley smile
@Jb_gfx

Hehe si c'était si simple je ne demanderai pas ici Smiley smile
J'ai déjà scruter avec firebug pendant 30 min sans résultat. Sauf déceler que supprimer le position relative du <a> faisait disparaître l'effet.

@Fahrenheit

Il ne me semble pas que text shadow joue un rôle.
On peux le supprimer avec firebug et l'ombre du texte disparait. Mais les coins de la box reste découpé en triangle.

Donc le mystère subsiste Smiley sweatdrop !
Hello,

Fahrenheit a écrit :
l'effet utilisé est : text-shadow (ligne 144 de screen.css).

Euh,non... Smiley sweatdrop
jb_gfx a écrit :
Firebug est ton ami.

Oui en général, mais là c'est pas forcément évident quand on connait pas l'astuce.
Petit lien utile : The shapes of css, je te laisse voir le code correspondant à #body .dwn a:before, a[href="#dsq-content"]:before ligne 199.
Ok merci, vu.

Par contre j'ai du mal à comprendre la logique.
Mais au moins je vois le code en cause désormais.

Je suis impressioné par le infinity et le coeur de ton exemple !...
je me rendait pas compte des possibilitées; je vais essayer d'utiliser tout cela plus souvent.
Le principe est d'utiliser des bordures épaisses pour dessiner des triangles, vu que les jointures des bordures sont en biseaux.

En gros la css utilisé, en résumé.

a {
	/*Servira de référence pour positionner le :before en absolu*/
	position: relative;
	/*Line-height + padding top et bottom : hauteur de boite de 2em*/
	line: height: 1em;
	/*Padding left et right : pour réserver la place des triangle*/
	padding: 0.5em 1.5em;
}


a:before {
    content: "";
    position: absolute;
    /*left:0 et right:0 : la boite s'étend aux bords de la référence*/
    left: 0;
    right: 0;
    /*Centrage vertical*/
    top: 50%;
    margin-top: -1em;
    /*Le triangle, #232927 correspond à la couleur de background de la page*/
    border-color: transparent #232927;
    border-style: solid;
    /*Une demi hauteur de boite*/
    border-width: 1em;
}


Hésite pas en cas de question.
Modifié par Florian_R (23 Aug 2011 - 11:12)
Sujet clos
Aller à