Aller au contenu

CSS des choses à apprendre


recherche_webmaster

Sujets conseillés

Bonjour,

Je regardais le site webrankinfo.com et je me pose deux questions quant au design :

1- Le logo en haut à gauche est une image avec un peu de texte vertical.

Question : Comment l'effet d'éclaircissement est-il produit sur l'ensemble de la zone image + texte ?

2 - Il y a un effet de profondeur donné à la page par les deux bordures à droite et gauche de celle-ci. Je ne comprend pas comment c'est fait puisque si l'on redimensionne l'écran l'effet reste (donc ce n'est pas un body-background avec positionnement des éléments en absolu).

Voilà, j'ai déjà vu ça ailleurs mais ça me plait bien et aussi je voudrais comprendre, par curiosité.

Lien vers le commentaire
Partager sur d’autres sites

Hello,

1- En fait il ne s'agit que d'un seul lien qui contient l'image en arrière plan, et un texte. Au survol, il y'a un simple changement de l'arrière-plan et un changement de couleur du texte.

2- Il s'agit vraissemblablement d'une imbrication de bloc (ici <div>) : un bloc qui contient la partie droite de la bordure (image d'arrière plan), et dans lequel est inclu le bloc de contenu qui lui contient la partie gauche de la bordure

Lien vers le commentaire
Partager sur d’autres sites

 En fait il ne s'agit que d'un seul lien qui contient l'image en arrière plan, et un texte. Au survol, il y'a un simple changement de l'arrière-plan et un changement de couleur du texte.

Ok, j'étais parti sur l'idée d'un calque transparent.

Il s'agit vraissemblablement d'une imbrication de bloc (ici <div>) : un bloc qui contient la partie droite de la bordure (image d'arrière plan), et dans lequel est inclu le bloc de contenu qui lui contient la partie gauche de la bordure

Là je comprend moins parce que l'image de fond du bloc de la partie droite a nécessairement une largeur fixe alors que les blocs doivent être positionnées avec une valeur en % (par rapport à la taille de l'écran). Donc en redimensionnant la fenêtre, l'image devrait dépasser la taille en % impartie à son bloc conteneur.

Modifié par recherche_webmaster
Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

Là je comprend moins parce que l'image de fond du bloc de la partie droite a nécessairement une largeur fixe alors que les blocs doivent être positionnées avec une valeur en % (par rapport à la taille de l'écran). Donc en redimensionnant la fenêtre, l'image devrait dépasser la taille en % impartie à son bloc conteneur.

Heu, non, l'image de fond, n'est pas considérée comme une image mais comme un arrière plan, elle ne change donc pas de taille (ne se déforme pas), a propriété css repeat-y ou no-repeat est utilisée pour éviter de répéter l'arrière plan sur toute la largeur du div.

La même technique est utilisée pour le deuxième div, à une nuance près car cette fois-ci il y a rajout d'un alignement à droite de l'arrière plan.

Si on résume on a:

Premier div:

Il fait 100% de largeur

il définit un arrière plan, qui est en fait une image ne se répetant que sur la verticale.

Deuxième div:

Il fait aussi 100% de largeur

Il a une marge gauche correspondant à la largeur de la bordure gauche

Il définit un arrière plan, ne se répétant que sur la verticale et aligné à droite du conteneur.

Il a une marge droite interne (padding) correspondant à la largeur de la bordure droite.

Pour avoir une texture d'arrière plan, il faudrait donc avoir un troisième div qui contiendrai les deux autres ... On ne peut mettre qu'un seul arrière plan par conteneur, c'est selon moi, un assez grand défaut dans css :/

Lien vers le commentaire
Partager sur d’autres sites

l'image de fond, n'est pas considérée comme une image mais comme un arrière plan, elle ne change donc pas de taille (ne se déforme pas)

C'est ce que j'ai dit, oui, l'image ne change pas de taille, mais la div oui d'où le problème en cas de redimensionnement.

Deuxième div:
Il fait aussi 100% de largeur
Il a une marge gauche correspondant à la largeur de la bordure gauche

Tu veux dire un margin exprimé en pixel ? Effectivement vu comme cela le premier point s'éclaire (s'éclaircit?). Je vois comment ça peut se faire en effet, je vais peut être faire un essai. Je n'avais pas pensé aux deux blocs avec une largeur de 100%.

il faudrait donc avoir un troisième div qui contiendrai les deux autres ... On ne peut mettre qu'un seul arrière plan par conteneur

Tu fais bien de le préciser, je me demandais justement si c'était possible.

Modifié par recherche_webmaster
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...