Comment faire pour créer une ombre pour une table de web

Créer l'image fantôme

1. Ouvrez un programme de retouche 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. Régler le fond transparent.

2. Cliquez sur l'outil de section rectangle 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 l'étendre tout le chemin vers le coin inférieur droit. Laissez une quantité égale de l'espace sur le côté droit du document et le bord inférieur (environ 10 pixels).

3. Cliquez sur une lumière ou à moyen nuance de gris dans la palette de couleurs et de choisir le "Remplir" ou "Pot de peinture" outil. Cliquez sur la sélection pour le remplir avec la nuance de gris. droit; cliquez sur la sélection pour désélectionner.

4. Allez à la "Effets" menu dans le programme et sélectionnez le "Blur" fonction. Le fond et à droite de la zone grise que vous avez créé sera 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 sera toujours aussi solide.

5. 
   
   
   

   Cliquez sur l'outil de sélection et sélectionnez dans le 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 Code

1. Téléchargez l'image de l'ombre à votre serveur, ou à un site d'hébergement gratuit d'images, de donner l'image d'une URL (https://hostingsite.com/shadowbackground.jpg).

2. Entrez le CSS (Cascading Style Sheet) code entre les Tags de l'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 vous avez laissé sur les bords droite et en bas de l'image. Si vous avez déjà CSS définir le style de votre page web, il suffit d'entrer le code de la table dans le CSS existante.

3. Entrez le code pour votre table, dans le code HTML du document, où vous voulez qu'il apparaisse sur la page (n'importe où entre le balises):

   Ceci est une cellule. Ceci est une autre cellule.

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

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