|
Un des grands mystères de la conception de sites Web est de savoir comment obtenir un effet d'ombre portée derrière la zone de contenu principal, qui est souvent blanc ou de couleur claire et dénommé le wrapper . Création de la bonne image dans un éditeur d' image, comme Photoshop, est la moitié de la bataille. En utilisant l'image comme fond répétant dans une balise div HTML est l'autre moitié . L'image se trouve réellement à l'intérieur de son propre div à l'intérieur du div "wrapper " sur la page. Instructions
1 Créer un nouveau document dans Photoshop qui est de 840 pixels de large par 1000 pixels de profondeur. Double- cliquez sur le calque d'arrière-plan dans la palette Calques pour rendre une couche modifiable. L'espace de travail doit avoir un fond en damier , ce qui indique la transparence.
2 créer un rectangle sur la scène à l'aide de l'outil "Rectangle Marquis " (rectangle pointillé) dans la barre d'outils à gauche . Ne vous inquiétez pas de la taille que vous dessinez. Faites un clic droit sur la case et sélectionnez " Transformer la sélection . " Cliquez sur la case en haut à gauche dans le «Point Lieu de référence " indicateur dans la barre d' outils en haut de l'espace de travail . Il ressemble à une planche de Tic Tac Toe de toutes sortes. Cela oriente votre coordonnées X, Y en haut à gauche de l'espace de travail . Dans les champs de formulaire de référence à la droite de l'indicateur , réglez votre coordonnée x 20 pixels et la largeur de 800 pixels. Ce centre de la rectangle dans votre espace de travail et laisse 20 pixels de chaque côté de l'ombre . Double -cliquez sur votre rectangle pour revenir à votre rectangle de marquis. Faites un clic droit dessus , sélectionnez "remplir" et choisissez " blanc " de vos options.
3 Cliquez sur le bouton "Ajouter un style calque" bouton ( F ) le long du bas de l' palette Calques et sélectionnez " lueur externe ". Double-cliquez sur " Définir la couleur de Glow " champ dans la fenêtre qui s'ouvre et entrez 333333 . Réglez votre " Opacité " à 100 pour cent et "Spread " et " Taille " à 5 . «Bruit» et « Jitter » devraient être mis à 0 et "Range" à 50, les valeurs par défaut pour tous les trois. Cliquez sur « OK ». L'effet ombre de type devrait apparaître autour du rectangle , même si elle apparaît moins prononcée que à quoi il ressemblera sur votre page web.
4 Réglez votre outil " Crop" à 840 pixels pour la largeur et deux pixels pour la profondeur . Faites glisser votre outil " Crop" d'un côté de l'espace de travail à l'autre, couper un coin de 2 pixels de profondeur dans le milieu de votre rectangle. Double-cliquez sur l'outil " Crop" dans la barre d'outils pour confirmer la récolte (puisque vous n'avez pas de place à Double-cliquez sur l'image mince). Une petite quantité de la lueur apparaîtra sur chaque côté de votre image recadrée à l'intérieur des 20 pixels de la zone transparente que vous avez laissé de chaque côté. Enregistrez votre fichier sous " wrapper.png " dans le format PNG pour le même dossier que votre page Web.
5 Ouvrez votre document HTML et de créer un div wrapper avec l'ID de "wrapper" qui est 840 pixels en largeur et centrée dans la page. Créer un div avec l'ID du «contenu» qui se trouve à l'intérieur de la div wrapper d'une largeur de 840 pixels et d'ajouter votre wrapper.png à cette couche comme une image de fond répéter sur l'axe des y , ou verticalement. Ajouter un div avec l'ID " leftSideBar " avec un contenu à donner de la profondeur à votre contenu div , qui s'étend le fond blanc de sorte que vous pouvez voir l'effet de l'ombre. Le codage de la page HTML ressemble à ceci:
| 
