communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > filtre statique css_CSS/HTML

filtre statique css_CSS/HTML

WBOY

Libérer： 2016-05-16 12:12:29

original

1272 Les gens l'ont consulté

C'est très ennuyeux d'empiler n filtres pour obtenir l'effet suivant, haha
IE5.5+ uniquement

<style> 
#pp00 { 
    width:950px; 
    height:256px; 
    position:absolute; 
    left:10px; 
    top:0px; 
    background-color:#000060; 
    font-size:256px; 
}

#pp01 { 
    width:0px; 
    height:256px; 
    background-color:red; 
    position:absolute; 
    left:10px; 
    top:0px; 
    filter:Alpha(style=1,opacity=30,finishOpacity=70,startY=0,finishY=256); 
}

#pp02 { 
    width:960px; 
    height:256px; 
    letter-spacing:-30px; 
    background-color:white; 
    color:black; 
    position:absolute; 
    left:0px; 
    top:0px; 
    filter:Chroma(color=#000000) Glow(color=gold,strength=3) DropShadow(color=#0000F0,offX=-3,offY=-3,positive=true) Blur(Enabled=false,makeShadow=true,pixelRadius=1.0) Wave(add=false,freq=0,strength=5,lightStrength=8,phase=100); 
    font-size:256px; 
    font-weight:bold; 
}

#pp03 { 
    position:absolute; 
    left:30px; 
    top:320px; 
}

</style>

<div id="pp00">
<div id="pp01"></div>
<div id="pp02">诘聱gna</div>
</div>
<div id="pp03">
<input type="checkbox" value="0" onpropertychange="pp02.filters[value].enabled=checked;" checked>Chorma
<input type="checkbox" value="1" onpropertychange="pp02.filters[value].enabled=checked;" checked> Lueur
<input type="checkbox" value="2" onpropertychange="pp02.filters[value].enabled=checked;" checked>DropShadow
<input type="checkbox" value="3" onpropertychange="pp02.filters[value].enabled=checked;">Flou
<input type="checkbox" value="4" onpropertychange="pp02.filters[value].enabled=checked;" checked>Vague
</div>

[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter

]
<script> function doL(){ l=pp01.offsetWidth; l=(l>pp01.parentNode.offsetWidth-20)?0:l+2; pp01.style.width=l; } setInterval(doL,20) </script>

Étiquettes associées：

css静态滤镜

source：php.cn

Article précédent：Le problème des éléments de formulaire HTML remplaçant les éléments de style et ses solutions_CSS/HTML Article suivant：DIV_implémentation des bords et coins arrondis_CSS/HTML

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

Lancez un navigateur transparent pour améliorer l'expérience des applications Web et des PWA [prend en charge HTML, CSS et JavaScript statiques] [permet aux utilisateurs d'afficher les fonds d'écran de nos applications Web/PWA] Je suis un développeur et concepteur front-end junior développant actuellement une applica...

Depuis 2024-04-05 13:50:12

0

1

1367

La classe de lignes CSS fait sortir certains éléments du cadre, alors qu'ils devraient être statiques et fixés au bas de l'écran. Ma page ressemble actuellement à ceci. Après avoir ajouté la classe de lignes afin que les...

Depuis 2024-04-03 18:48:12

0

1

281

Impossible d'appliquer le filtre CSS au survol dans Safari J'ai remarqué que la modification de la propriété de filtre au survol provoque un comporte...

Depuis 2024-04-01 08:19:51

0

1

387

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal