Background et petit probleme

razor7
Les bases HTML/CSS

Salut !

En regardant sur le site du zero j'ai vu qu'il y avait un atelier et je me suis posé une question sur cela :

Je me demandais comment il arrive à mettre la barre transparente ou pas dans le background (barre dans le backgound a côté du logo 5)???
j'arrive à faire le site (et oui je l'ai fait pour m'amuser) :
J'ai fait un top avec le menu ensuite un conteneur avec tout sauf le foot ! ainsi j'ai pu faire l'ombre du conteneur bloc avec box-shadow, mais le problème est comment faire le barre dans le background ! (je peux la faire mais dans ce cas je dois enlever l'ombre box shadow et modifier mon conteneur)....

J'ai pensé à linear-gradient mais cela ne doit pas répondre à mon probleme, car elle ne se fixe/aligne pas par rapport à la barre dans le bloc.....

J'ai beau cherché je ne vois pas....

Au passage, j'ai posé la question sur site du zero, mais il y a trop de monde, je préfère de loin votre forum plus sympa voir génial niveau ressource !, je viens de me m'inscrire et je me demandais si il y avait aussi des ateliers !?

@+

12 réponses

halfjo2000
Réponse acceptée

j'ai l'impression que tu n'as pas tt a fait compris se que je voulais dire :). La barre oblique est sans doute une image en png ( pour faire simple ), mise au dessus du content. La visiblement t'as une div ou li délimitée par ton conteneur.
Essaye de simplement mettre une div avec une image dans ton body, et en css tu la place en position absolute avec un z-index élevé, en espérant que sa t'aide à comprendre le hack ;)

halfjo2000

c'est la mm barre à mon avis, juste que sur les coté elle est sur un fond plus sombre. essaye sa sinon envoie un lien je te dirais.

razor7
Auteur

Oui je pense que c'est certainement la même barre, mais le problème est que c'est hors de conteneur qui est fermé !, car je suis obligé d'avoir un conteneur global (sauf pour le top et le footer), pour pouvoir utiliser le box box-shadow pour l'ombre (ombre gauche et droite) !
C'était à vrai dire l'ancien site du zero je n'ai donc pas de lien.....
Merci en tout cas de ton aide !

fdusautoir

quelle est cette version du site du zero ?

razor7
Auteur

Dans la section atelier ou ils proposent de faire le site, ils disent qu'une bonne partie est de la beta v4 privée....

halfjo2000

Du coup je sais pas si j'ai bien tout compris.
Si tu parles de la bande oblique au niveau du "5" de html5, pour faire sa rapidement j'aurais fait une image .png en gris (transparence autour des 40%) en background d'une div (en absolute ou pas à voir la construction) et joué sur le z-index.

razor7
Auteur

Pour la barre je sais comment la faire, d'ailleur j'y arrive si je ne fais pas de bloc conteneur pour mon box shadow !

Si tu veux je peux t'envoyer mon code ?

@+

razor7
Auteur

ah d'accord, je comprends mieux maintenant !
Je vais bossé cela !
Merci pour ton aide, je te tiens au jus !!

razor7
Auteur

Salut !

Marche impeccable merci !!!

halfjo2000

k, cool :)

djtec

C'est faisable en full css il suffit de faire une div sur le body en absolute avec un z-index: -1; puis de mettre une autre div sur ton conteneur et pour l'orienter un ptit coup de -webkit-transform: rotate(1deg); sur les deux div et le tour est joué

halfjo2000

oui, mais c'été pour faire passer l'idée rapidement ;)