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 ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Pierre Goiffon
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
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
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
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 (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/
