28112 sujets

CSS et mise en forme, CSS3

Shadow box inset qui ne marche pas

Bonjour,

Je commence tout juste le code et la création d'un site mais dès le début je me confronte à un problème que je ne comprends pas du tout !

Dans mon code il n'y a qu'une seule image et le but c'est de faire comme si cette image bannière était "en dessous" du 'blanc' qui suit.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- UNDISPLAYED -->
    <meta charset="UTF-8">
    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css"  type="text/css"/>
    </head>
    <body>
    <div class="heqd">
        <img src="img/N1.jpg" alt="New Zeland">
    </div>
    </body>
 </html>


/*CONTAINER*/
.heqd img{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  box-shadow: inset 1px -4px 9px -6px;
}


L'ombre n'apparait pas et je ne comprends pas pourquoi Smiley decu

Quelqu'un aurait une idée ?

Cordialement,

Unica
Avec un pseudo-élément(::before ou ::after), je pense. Ils sont souvent utilisés pour rajouter des ombres…

Sur cette page, il y a beaucoup d'exemples de fort jolies ombres :
… désolée, un problème de serveur apparemment.

Mais il y a cette page de démonstration :
https://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/

Smiley sweatdrop

Edit : le pseudo-élément ne peut se placer sur l'image puisque celle-ci est un "élément remplacé" mais le placer sur son parent (le .heqd)ne pose aucun problème. (D'autant plus que l'image prend tout la place de son parent si j'ai bien compris.)
Modifié par Zelena (17 Aug 2017 - 14:08)
Modérateur
Ah oui effectivement Smiley ravi Bon bah du coup faut faire un png avec une marge transparente de la taille de l'ombre interne Smiley biggol

Encore une autre piste, mettre l'image en background si elle ne représente rien de trop crucial (accessibilité tout ça tout ca) https://jsfiddle.net/oucbs5Ln/2/
Zelena a écrit :
Avec un pseudo-élément(::before ou ::after), je pense. Ils sont souvent utilisés pour rajouter des ombres…

Les éléments html "injectés", (images, mais aussi éléments de formulaires, etc) ne sont pas prévus pour supporter les pseudos éléments. Certains navigateurs le font, mais ce comportement n'est pas standard.
Olivier C a écrit :

Les éléments html "injectés", (images, mais aussi éléments de formulaires, etc) ne sont pas prévus pour supporter les pseudos éléments.

Et c'est assez logique puisque le pseudo-élément, ::before par exemple, se retrouve placé au début mais aussi à l'intérieur de l'élément auquel il est appliqué.
C'est comme cela que l'on peut rajouter une cellule à un tableau tout en la positionnant au début.
Ce qui n'a pas de sens avec un élément remplacé.
Smiley smile
Modifié par Zelena (17 Aug 2017 - 18:20)
Merci beaucoup pour toutes vos réponses !

Du coup j'ai opté pour l'image en background ça marche super bien !

Mais j'ai lu quelque part que les images en background ne 'devaient pas' être trop lourdes, pourquoi ça ? Je comprends bien que pour la vitesse de chargement d'une page il faut que les images soient de taille réduite (d'un poids réduit plus exactement d'ailleurs) mais est-ce que 'l'option' background ajoute encore à cette problématique ?

Merci encore pour toutes vos réponses !

Cordialement,

Unica
Que ce soit pour un background, une image insérée directement ou n'importe qu'elle autre ressource accessible via un chemin tu fais une requête http donc ça va prendre un certain temps. Un nombre élevé de requête va grandement impacter les performances d'un site car à chaque fois il y a un aller retour serveur de fait et cet aller retour peut être bien plus long que le téléchargement de la ressource elle même.

Par exemple : https://tools.pingdom.com/#!/c2SpUa/alsacreations.com

Tout cela dépend du serveur et de la connexion du client.

Pour optimiser le téléchargement des pages tu as la possibilité des compresser les ressources avec gzip deflate et de mettre en cache les ressources avec les expires headers.
Sujet clos
Aller à