Possibilité de faire une lueur/ombre en utilisant une transparence partielle en HTML/CSS?

Eh bien, je suppose que c'est une question en deux parties.Possibilité de faire une lueur/ombre en utilisant une transparence partielle en HTML/CSS?

Tout d'abord comment puis-je faire une image ont une transparence partielle (je pense que vous pouvez le faire avec PNGs mais ne sais pas comment - je photoshop juste besoin des instructions)

Deuxièmement, comment puis-je utiliser cette image dans une mise en page en utilisant CSS? Je pense que je besoin d'une sorte de « Hack PNG »

Source

2009-02-05 Andrew G. Johnson

L'option facile qui ne fonctionnera probablement pas pour vous:

navigateurs Webkit (Safari, Chrome) peuvent utiliser la propriété -webkit-box-shadow CSS3. Firefox et IE (bien sûr) ne supportent pas cela (ou ont un équivalent spécifique au vendeur) pour le moment.

Les autres options que vous êtes de gauche avec sont nombreux et largement couverts sur Internet (puisque chaque homme et son chien veulent utiliser des ombres portées)

http://www.google.com/search?q=how+to+make+a+drop+shadow

Juste une chose que je voudrais ajouter : avant de jouer avec des hacks PNG transparents, vous devez considérer combien de vos utilisateurs sont encore sur IE6, et combien il est important pour vous de rendre votre site attrayant pour quelqu'un qui n'a pas mis à niveau depuis 8 ans.

Source

2009-02-05 22:25:52 nickf

Je suppose que vous n'avez pas lu le corps de ma question. Je ne cherchais pas une réponse CSS3 que 3% des gens verraient –

Non, je l'ai fait - c'est pourquoi j'ai dit que la solution CSS pure ne fonctionnerait probablement pas, mais c'est toujours une option pour 3% des utilisateurs. Qui sait: cela pourrait encore être utile à quelqu'un. – nickf

Firefox 3 prendra en charge les propriétés box-shadow et text-shadow. La bêta que j'utilise en ce moment fait. C'est assez lisse. –

Créer un nouveau photoshop documents
Ajouter de nouvelles couches et tirer sur les
Supprimer la couche nommée Contexte
Fichier> Enregistrer pour le Web
Choisissez un format PNG 24 bits.

L'obtention d'un bon fonctionnement dans IE6 sera le problème. Vous devez utiliser une feuille de style séparée que seules les charges IE6 par des commentaires conditionnels qui charge l'image backgorund comme ceci:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="my_trans_image.png", sizingMethod="crop");

Et dans votre feuille de style standard utiliser comme toute autre image:

background-image: url(/path/to/my_trans_image.png);

charge une stylesheet avec des règles spécifiques IE6 comme ceci:

<!--[if lt IE 7]> 
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8" /> 
<![endif]-->

Cela ne charge dans IE et si la version est inférieure à 7.

Note finale: IE6 est en train de disparaître rapidement. Si vous n'avez pas besoin de prendre en charge IE6, la définition du format PNG en tant qu'image d'arrière-plan dans un fichier CSS ordinaire fonctionnera dans tous les navigateurs modernes sans problème réel.

Source

2009-02-05 22:28:15

umm - un PNG 24 bits n'aura pas de canal alpha, c'est-à-dire pas de transparence partielle –

C'est ce que Photoshop l'appelle. C'est vraiment un PNG 24 bits avec transparence, techniquement 32 bits. http://beautifulpixel.com/assets/photoshop_png_saving-20090205-143342.png –

Vraiment? C'est vraiment déroutant. –

Eh bien, c'est l'idée - vous devez créer des fichiers PNG transparents. J'utilise habituellement Paint.NET pour ce genre de choses, mais si vous vous sentez plus à l'aise avec Photoshop, allez-y. Tout ce dont vous avez besoin est d'avoir un fond transparent sur votre image et ensuite mettre des pixels sombres semi-transparents sur ce qui deviendrait l'ombre.

Vous pouvez utiliser des images avec CSS par la propriété background-image.C'est:

#myDiv 
{ 
    background-image: url('myimage.png'); 
}

IE6 ne supporte pas la transparence PNG de la boîte - Google pour pirater IE6 PNG ou recherchez simplement ce site. Aussi, soyez averti que même si IE7 prend en charge la transparence PNG, il est terriblement lent donc il est à côté de inutilisable pour les effets avancés comme les ombres. Vous souhaiterez peut-être avoir un style de remplacement plus basique pour Internet Explorer.

Source

2009-02-05 22:29:19

Pour répondre à votre deuxième question: Si cela ne vous dérange pas d'utiliser un peu de JavaScript, vous pouvez utiliser un fichier JavaScript png fix pour appliquer automagiquement le filtre spécifique à IE à vos images.

Source

2009-02-05 22:30:57

Assurez-vous que votre lueur/ombre utilise un mode de fusion "Normal". D'autres modes de fusion tels que Multiply ou Screen sont vraiment géniaux dans Photoshop, mais ils n'auront pas l'apparence attendue sur le web.

Si vous devez prendre en charge IE6, vous aurez besoin d'une sorte de solution de réparation PNG. Cette liste de plusieurs postes: Is there a JavaScript PNG fix for IE6 that allows CSS background positioning?

Mon préféré est: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Source

2009-02-06 00:01:43

Le correctif type IE PNG provoque effectivement IE crash sous certaines conditions. Sauf si l'utilisateur a modifié un paramètre de registre. A moins que vous ne souhaitiez un mode de fonctionnement implicite pour certains de vos utilisateurs IE6, essayez d'utiliser VML pour les images PNG transparentes. the raphael.js lib est un bon moyen d'y parvenir.

Source

2009-02-06 00:26:16 Breton

Possibilité de faire une lueur/ombre en utilisant une transparence partielle en HTML/CSS?

Répondre

Questions connexes