Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > css static filter_CSS/HTML

css static filter_CSS/HTML

WBOY

Release： 2016-05-16 12:12:29

Original

1270 people have browsed it

It’s very boring to pile n filters together to get the following effect, haha
IE5.5+ Only

<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>Glow
<input type="checkbox" value="2" onpropertychange="pp02.filters[value].enabled=checked;" checked>DropShadow
<input type="checkbox" value="3" onpropertychange="pp02.filters[value].enabled=checked;">Blur
<input type="checkbox" value="4" onpropertychange="pp02.filters[value].enabled=checked;" checked>Wave
</div>

[Ctrl+A to select all Note: If you need to introduce external Js, you need to refresh to execute

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

Related labels：

css静态滤镜

source：php.cn

Previous article：The problem of HTML form elements overriding style elements and its remedies_CSS/HTML Next article：DIV_implementation of rounded edges and corners_CSS/HTML

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

Launch a transparent browser to improve the experience of web applications and PWA [support static HTML, CSS and JavaScript] [allow users to view desktop wallpapers in our web applications/PWA] I'm a junior front-end developer and designer currently developing a web application (chat...

From 2024-04-05 13:50:12

0

1

1367

CSS row class makes some elements go out of frame, while they should be static and fixed to the bottom of the display My page currently looks like this. After adding the row class so that the two elements are...

From 2024-04-03 18:48:12

0

1

281

Can't apply CSS filter on hover in Safari I noticed that making changes to the filter property on hover causes strange behavior in S...

From 2024-04-01 08:19:51

0

1

387

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template