Intégration d'images obliques

Bonjour à tous,

J'ai fait une maquette dans photoshop et je cherche maintenant à l'intégrer. Un de mes gros soucis c'est le découpage de mes images de fond, puisque j'ai fait une construction avec des des lignes à 45 degrès, et j'ai n'ai pas vraiment d'idées de comment intégrer tout ça...
Auriez-vous une idée de comment je pourrais procéder ?
merci d'avance !

Bonjour Phamphile,
c'est tout simple : il te suffira de considérer une image de fond sans aucun texte, puis d'y superposer ton texte par .html et .css pour vraiment créer ta page web.

J'espère que tu avais enregistré ta maquette en .psd pour y retourner dans PhotoShop, et ainsi supprimer tout ton texte ...

Note : je ne vois pas quelle difficulté à considérer un découpage d'images oblique dans PhotoShop pour ce résultat final, exploitable en image de fond d'une page web. Car le résultat actuel (plutôt sympa et dynamisant) serait tout simplement, précisément ton image de fond (mais sans texte).

A propos de ton image : 171Ko c'est parfaitement léger pour ne pas alourdir le chargement de ta (future) page ; cependant la compression à laquelle tu l'as soumise a altéré sa qualité (ah oui ! max 200Ko sur Alsa ...).
Modifié par pictural (29 Nov 2016 - 12:20)

Bonjour phamphile,

Le sujet m'intéresse aussi. Faussement simple de prime abord. En attendant un avis plus avisé, j'ai pensé à 3 approches ?

1/ Le plus rapide, placer les images de fond avec les formes directement dessinées sur l'image, comme déjà suggéré. Du coup c'est plus simple mais assez rigide. Il suffit de placer les textes et certains blocs par dessus. Pour la version responsive sur mobile, il faudra complètement repenser les images (et simplifier la maquette).

2/ Tracer des blocs (polygones) en CSS avec les images et fonds indépendants les uns des autres ?Plus tordu mais avec un certain potentiel (parallaxes… ). Perso, je ne m'y risquerais pas, mais à voir ?

Quelques exemples de formes biscornues en CSS, il suffit d'y placer fonds et couleurs :
https://css-tricks.com/examples/ShapesOfCSS/

3/ Incliner des blocs à 45° (rotate). Cette solution me semble un peu tordue (il faut que les images de fond soient inclinées à l'inverse), et demande de la maîtrise vu la complexité de votre maquette, comme pour la piste précédente.

Blocs CSS en biais :
http://www.tayo.fr/ecrire-en-bias-en-css-avec-rotate-aide.php

Le risque est de se retrouver avec une usine à gaz si c'est mal pensé. La piste 1 peut servir de base. Mixer 2 ou 3 pistes, pour garder qq chose de simple mais pas trop figé ? Pour éviter le mille-feuille indigeste, il faut penser en amont aux superpositions, aux calages, à ce qu'on souhaite animer ou pas, et aux déclinaisons à venir (responsive… ).

MàJ : Olivier C explore la piste 2.
Modifié par spongebrain (29 Nov 2016 - 12:47)

Merci à tous pour vos réponses !
J'avais bien pensé à ce que me propose Pictural, mais je trouvais ça un peu rigide comme solution, et je crois aussi que j'ai envie de me compliquer un peu la tache !
Alors je pense que je vais étudier les pistes de Spongebrain et d'Olivier...
Je penserais à vous faire part du résultat !

Laissez-moi un peu de temps : là je suis au boulot, mais d'ici demain j'aurais quelque chose à vous proposer qui, je l'espère, sera intéressant...

Donc, pour la problématique de rétablir une image droite sur un carré positionné à 45 degrés, j'ai la solution de passer par un pseudo-élément : CodePen.

Si besoin on peut placer les éléments dans une grille, tel qu'ici : Grid with offsets
... ou encore ici : Grid with offsets 2

Notez que vous pouvez aussi placer la même image sur plusieurs éléments pour obtenir un (avec ici l'ajout d'un peu d'animation) : effet mosaïque.

Votre propre template demandera de composer avec tout ceci. Maintenant, le jeu en vaut-il la chandelle ? A vous de voir...
Modifié par Olivier C (03 Dec 2016 - 10:15)

@OlivierC,
l'effet graphique mozaïque est véritablement bluffant ! mais il consume déjà tout le CPU d'un ordi ...

Bonsoir Phamphile,
à la suite de Spongebrain et OlivierC, il y aurait bien une synthèse de ce qu'à 3 nous avons envisagé :
a. facile à mettre en oeuvre
b. facile à décliner pour screen, tablet et mobile en changeant dans un bloc de fond un jeu d'images par html et css.

J'explique la méthode :
1. créer un div1 longuement vertical, dont les propriétés position:absolute;overflow-hidden
2. y intégrer un div2 dont les propriétés position:absolute;transform:rotate(-45deg), qui soit une composition d'images horizontales. Les images, dont les propriétés respectives position:relative;left:_px;top:_px
3. superposer à ce div1 div2, un main div3 pour tout le texte, dont la propriété position:relative ...

Pour l'aspect graphique idéal : quelles seront les images réunies selon telle résolution d'écran ?

La seule réelle difficulté sera l'application de tel ou tel bloc de fond : pur css ou hack javascript ? Moi j'opterais pour du javascript qui détecterait la résolution d'écran et y affecterait un div2.innerHTML="_" approprié qui contiendrait le bon jeu d'images.
Modifié par pictural (29 Nov 2016 - 20:55)

pictural a écrit :
@OlivierC : l'effet graphique mozaïque est véritablement bluffant ! mais il consume déjà tout le CPU d'un ordi ...

Ça, c'est sûr... mais ce code animé n'a été créé que dans un but d'exploration des possibilités du css. Là je ne voulais simplement montrer la possibilité de faire une mosaïque, l'animation est à mettre de côté.