Les partenaires publicitaires:

Comment faire pour créer des effets visuels ombre sous Têtes en CSS

En utilisant le "box-shadow" propriété Cascading Style Sheet (CSS) du code, vous pouvez ajouter un effet visuel ombre portée sous l'en-tête de votre page Web. Cette technique va ajouter de la profondeur à votre conception de Web sans faire les dossiers de demande de navigateur et de l'image de charge. Pour créer un effet subtil d'ombre, utilisez un "RGBA" code de couleur (Rouge, Vert, Bleu et Alpha) dans votre CSS de sorte que vous pouvez réduire la transparence de l'ombre. Décaler l'ombre du haut ne sorte qu'il se bloque en dessous de la tête.

Instructions

  1. Ouvrez le fichier contenant le code de l'en-tête de votre page Web dans le Bloc-notes ou un éditeur de code. Repérez la paire de balises HTML qui commencent et se terminent l'en-tête:

    Bienvenue sur mon site web!

    Ci-dessus est un exemple simple d'un en-tête d'une page Web. La "

    " balises commencent et se terminent l'en-tête. Lire l'attribut ID de la balise d'ouverture, dans ce cas, "entête." Ajouter un ID si vous ne trouvez pas un.

  2. Ajouter "




    Écrivez votre code CSS entre les balises ci-dessus. Vous pouvez également ajouter des CSS dans un fichier externe, si votre site utilise une.

  3. Écrivez ce code pour cibler votre tête en CSS:

    entête {}

    Ajouter la "box-shadow" biens entre les accolades:

    entête {

    box-shadow:

    }

  4. Ajouter des valeurs à votre "box-shadow" la propriété de fixer le montant et la direction de l'ombre offset, la quantité de flou sur l'ombre et la couleur de l'ombre. Les deux premières valeurs sont le montant de compensation de la gauche et le haut de la tête, et la troisième valeur est la quantité de flou: "box-shadow: 0px 5px 10px-".

  5. Obtenez les valeurs de rouge, vert et bleu d'une couleur que vous voulez et de les utiliser pour votre code de couleurs RGBA. Utilisez une valeur comprise entre zéro et un pour le montant de la transparence que vous voulez pour la couleur: "box-shadow: 0px 10px 5px rgba (0,0,0,0.5) -".Le Résultat final du code ci-dessus est un décalage à partir du haut de cinq pixels, estompés par un rayon de dix pixels, avec une couleur noir serti à la moitié de la transparence ombre.

Conseils & Avertissements

  • Les navigateurs plus anciens ne peuvent pas utiliser le "box-shadow" la propriété et ne sera pas afficher une ombre portée. Si vous avez besoin de l'ombre portée à afficher dans une version particulière du navigateur, vérifier si le navigateur est capable d'afficher CSS niveau trois (CSS3) effets.
» » » » Comment faire pour créer des effets visuels ombre sous Têtes en CSS