CSS transform:rotate et contour de texte

Le
Pierre Goiffon
Bonjour !

Je suis en pleine remise à jour de mon site personnel, et j'en profite
pour ajouter un peu de CSS pour améliorer l'esthétique.

J'ai vu un joli bandeau chez http://code.flickr.com : ça se situe en bas
des billets, ça commence par un :
<div class="hiring-banner">
<p class="group-photo">
L'image à gauche a un transform: rotate() appliqué.

J'ai voulu m'en inspirer pour mon site, pour une image en float:right de
gros paragraphes de texte. Cependant cela pose des prb de bordure : le
texte mange sur l'image en bas !

Voici une page pour reproduire :
http://pgoiffon.free.fr/_temp/transform-rotate.html
Comme vous le voyez, à partir du 3eme paragraphe le texte mange sur
l'image

On peut s'en sortir avec une marge gauche sur l'image, mais ça n'est pas
très beau car les premiers paragraphes sont très éloignés
Sinon on pourrait oublier le css transform, générer une image inclinée
et la découper en tranche afin d'appliquer à chacune une marge au fur et
à mesure mais ça serait bien moche.
Idéalement, je cherche une option permettant d'indiquer le contour à
suivre

Je n'arrive pas à trouver celà Est-ce que quelqu'un aurait une piste ?
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pierre Goiffon
Le #26303603
Le 05/08/2014 13:22, Pierre Goiffon a écrit :
http://pgoiffon.free.fr/_temp/transform-rotate.html
Comme vous le voyez, à partir du 3eme paragraphe le texte mange sur
l'image...


(...)
Idéalement, je cherche une option permettant d'indiquer le contour à
suivre...



Hé bien, j'ai trouvé un moyen standard de répondre à ce besoin ! Les CSS
Shapes. Le support est cependant fort limité (juste Chrome, Safari et
Safari iOS)...

A lire cet article qui parle du sujet :
http://sarasoueidan.com/blog/css-shapes/

Au passage, je suis tombé là-dessus à partir de cette très intéressante
vidéo (une présentation des dernières possibilités html 5 et css 3 par
un employé Adobe au début de l'année) qui parle de css path :
https://www.youtube.com/watch?v=KYgxeg8txlk
Eric Demeester
Le #26303659
Pierre Goiffon (Sat, 23 Aug 2014 11:26:57 +0200 -
fr.comp.infosystemes.www.auteurs) :

A lire cet article qui parle du sujet :
http://sarasoueidan.com/blog/css-shapes/



[vidéo]
https://www.youtube.com/watch?v=KYgxeg8txlk



Article et vidéo passionnants, merci de les avoir cités ici

En complément, je suis tombé sur ce site, évoqué dans la vidéo :
http://caniuse.com/

que j'ajoute céans à ma boîte à outils.
Pierre Goiffon
Le #26304398
Le 23/08/2014 16:02, Eric Demeester a écrit :
Article et vidéo passionnants, merci de les avoir cités ici



C'est bien normal :)

En complément, je suis tombé sur ce site, évoqué dans la vidéo :
http://caniuse.com/

que j'ajoute céans à ma boîte à outils.



Oui il faut ! C'est une référence absolue !
Publicité
Poster une réponse
Anonyme