Fond d'écran particulier. Comment procéder ? Fermé

Question

Bonjour à tous,

Etant Dj, j'ai récemment décidé de créer mon site perso afin d'y mettre quelques infos, photos et donner la possibilité aux gens de télécharger mes sets.
Voici un aperçu pour mieux comprendre mon problème :
http://nsa27.casimages.com/img/2011/11/24/111124125048849364.jpg
(c'est une ébauche, mais l'idée principale est là)

Voici les questions que je me pose concernant la manière de procéder afin d'avoir le meilleur rendu possible.
1) Est-il possible de faire des formes géométriques en css3 (dans mon cas, la forme derrière le texte principal et les 2 triangles qui vont jusqu'à l'oeil ?)
Si pas comment faire? Intégrer la forme dans mon arrière plan ?

2) Concernant l'arrière plan comment procèderiez vous ? A la base je voulais utiliser du jQuery afin d'avoir mon background qui s'adapte à la résolution de l'écran. Malheureusement si je procède ainsi, la pointe de ma forme bleue n'atteindra pas forcément le centre de l'oeil (si elle ne fait pas partie de mon background) Ou mon texte ne sera plus à la bonne place par rapport à la forme qui se trouve derriere (si ma forme est inclue dans mon background)
du coup je pensais travailler sur le même gabarit (même dimensions) que l'image actuelle mais en faisant déborder l'image de telle sorte à ce que mon background se prolonge au cas où mon site est visionné sur un écran avec une plus grande résolution. Afin d'éviter d'avoir une coupure nette. Je ne sais pas si j'arrive à me faire comprendre.
En gros pour l'instant on voit la moitié du visage, mais admettons que mon site soit visionné sur un écran plus grand, on verrait l'autre partie du visage.
Comme c'est le cas avec le background de se site
https://www.canalplus.com/ [...] ml?vid=520692
(désolé c'est l'exemple que j'avais sous la main)

Au final est il possible d'envisager de mettre un site de ce style en ligne ou l'idée est trop "compliquée" pour pouvoir la gérer en HTML et CSS.

Un grand merci d'avance à tous ceux qui auront la patience de me lire et de m'aider.

ps : si vs avez des critiques sur le design de mon layout, je suis tout ouïe ! ;-) 

Configuration: Windows XP / Firefox 8.0

Thordendall · Answer

Bonjour, je ne saurais vous aider malheureusement, mais je prend 2mn pour me moquer gentiment du fait que vous écoutez Mickaël Miro ^^ Sans rancune :) En tout cas le site a l'air bien! J'adore l'idée du fond d'écran, c'est classe, pas too much. Les couleurs rappellent le Suprême NTM. Que du bon!

hugo_d · Answer

Il y a pas de soucis mais je ne vois pas pourquoi vs dites ça ^^
Je ne sais même pas qui c'est. Si c'est le type de la photo que j'ai utilisé, j'ai simplement cherché une photo de profil en "low key" sur google image. 
N'ayant pas de bon appareil photo, dans un premier temps j'ai utilisé une photo "exemple".
Bref tout ça pour dire que je ne connais pas ce fameux Mickaël et étant passionné de musique électronique je doute fort que ça soit mon style de musique :-) 

Ceci dit merci pour votre compliment ;-)

Thordendall · Answer

Dans votre capture d'image il ya un favoris youtube qui est titré Mickaël Miro. Bref c'est pas grave, c'est juste une musique bien naze construite sur trois accords de guitare bateau avec des paroles dénuées de créativité. Pour votre histoire de forme, je crains que vous ne soyez obligé de passer par un autre langage que le HTML CSS. Mais je ne m'y connais pas suffisamment pour vous dire exactement comment faire.
Peut_être pourriez vous essayer de trouver des sites avec le même procédé, et de voir comment ils sont faits!

Cordialement!

hugo_d · Answer

Hooo bien vu :-) 
Je n'ai pas d'excuse valable pour justifier la présence de ce lien :p 

Oui je pense que pour ce genre de site je suis obligé de procéder en flash.
Mais n'étant pas du tout à l'aise avec ce logiciel, je pense que je vais revoir l'interface de mon site.

la vrille · Answer

bonjour,

Votre design est intéressant, il me paraît bien coller avec le sujet de votre site ; il est sobre mais par contre la forme géométrique qui vous pose problème est à revoir ; si je ne m'abuse la perspective n'est pas correcte.
Avec quel logiciel avez-vous créé ce design ? Je vous suggère de composer votre arrière-plan (background avec le visage) avec la forme intégrée directement dessus et ensuite avec le code vous le rendez extensible ainsi il pourra s'afficher comme vous le désirez selon les résolutions.
Faites un tour sur 
lesiteduzero ou alscreations ( entre autres ) vous trouverez le moyen de le coder.

ps désolé, impossible de mettre les liens :-(

Mihawk · Answer

Ah j'ai perdu mon post !!
Je refais donc... moi je garderais le visage coupé au centre, c'est plus mystérieux.
Donc bien sur que c'est faisable mais avec beaucoup d'image : le CSS n'autorise pas les triangles...

1/ Mettre un background-color noir sur la page.

2/ Mettre en background-image une image contenant la moitié du visage, les rayons et la forme "carrées" ainsi que le texte contenu à l'intérieur. Placer ce background-image en background-position top-right avec qu'elle soit toujours collée à droite et jamais coupée.

3/ Mettre le titre, le menu et les textes en bas dans des div indépendants collés à gauche avec du margin-left d'une trentaine de pixels.

Normalement ça devrait tourner. Mais je soumet mon avis aux critiques évidemment.

Fond d'écran particulier. Comment procéder ?

6 réponses

Discussions similaires