Comment créer une ombre pour une table web

<

Contenu

article data-type="article">

Si vous souhaitez ajouter un aspect tridimensionnel à une table sur une page Web, vous pouvez lui donner un "ombre portée". Il n`y a pas moyen d`ajouter une ombre en ajoutant simplement un code à la table elle-même, mais vous pouvez le faire avec CSS (Cascading Style Sheet) code, qui définit le style d`un élément HTML. Vous aurez également besoin de prendre les mesures nécessaires pour créer une image d`ombre dans un programme.

Créer l`image fantôme

  • Ouvrez un programme d`édition d`image qui vous permettra de créer une image avec un fond transparent. Aller à "Fichier", "Nouveau" et définir les dimensions de 800 pixels de large par 800 pixels de haut. Définir l`arrière-plan transparent.

  • Cliquez sur l`outil de section rectangulaire et cliquez sur le coin supérieur gauche du nouveau document. Faites-le glisser vers le bas vers le coin inférieur droit du document pour faire la sélection, mais ne pas prolonger tout le chemin vers le coin inférieur droit. Laissez une quantité égale d`espace du côté droit du document et le bord inférieur (environ 10 pixels).

  • Cliquez sur une lumière ou moyenne nuance de gris dans la palette de couleurs et de choisir la "Remplir" ou "Seau de peinture" outil. Cliquez sur la sélection pour le remplir avec la nuance de gris. droite, cliquez sur la sélection pour désélectionner.




  • Allez à la "Effets" menu dans le programme et sélectionnez le "flou" fonction. Le fond et à droite de la zone grise vous avez créé va estomper (dans les 10 espaces de pixels que vous avez laissé sur la droite et en bas) et l`intérieur de la zone grise va encore regarder solide.

  • Cliquez sur l`outil de sélection et sélectionnez à partir du coin supérieur gauche pour les bords intérieurs des bords flous (le bord de la partie solide). Cliquer sur "Effacer" pour isoler le droit floue et en bas. Enregistrez le document comme une image .jpg pour qu`il puisse conserver le fond transparent.

Créer le Code

  • Téléchargez l`image de l`ombre à votre serveur, ou à une image site d`hébergement gratuit, pour donner l`image d`une URL (http://hostingsite.com/shadowbackground.jpg).

  • Entrez le CSS (Cascading Style Sheet) code entre les balises du code HTML de la page où vous souhaitez que le tableau apparaisse.

    Assurez-vous que l`URL de l`image est après "Contexte" et les tailles de marge sont les mêmes que le montant de la chambre que vous avez quitté sur les bords droit et inférieur de l`image. Si vous avez déjà CSS définissant le style de votre page Web, il suffit d`entrer le code de la table dans la CSS existante.

  • Entrez le code pour votre table, dans le code HTML du document, où vous voulez qu`il apparaisse sur la page (où entre les balises):

    Ceci est une cellule. Ceci est une autre cellule.

    Première cellule de la deuxième rangée. Deuxième cellule dans la deuxième rangée.

    Enregistrez le document HTML de la page et de recharger la page pour voir votre table avec une ombre portée.

Conseils & Avertissements

  • Pour ajouter des lignes à votre table, il suffit d`entrer la séquence ci-dessous la dernière ligne et avant la balise. Vous pouvez également ajouter d`autres cellules en ajoutant plus de balises entre les balises.
Technologie / Web design & développement / Création de sites web

AUTRES

» » » » Comment créer une ombre pour une table web