Salve a tutti, volevo sapere come si potrebbero fare i seguenti effetti speciali con i CSS:
- Effetto ombra sotto il testo
- Effetto semi trasparenza sullo sfondo
So che alcuni di questi effetti speciali sono possibili grazie a delle parole chiave che risultano però solo compatibili con IE, e non con gli altri browser in circolazione (i.e. Firefox).
L'effetto ombra avevo sentito che era possibile usando lo z-level o qualcosa del genere. Qualcuno sa come farli?
When the myth has not limits
Prova a dare un'occhiata qui
da quello che so si tratta solo di fare 2 livelli sovrapposti leggermente sfalsati in modo tale da simulare l'effetto ombra
Ma per fare un effetto semi trasparente si può in qualche maniera? Senza usare il filter ovviamente. L'unica idea che mi era venuta in mente era quella di una gif con un pixel colorato e un altro trasparente, ma mi domandavo se per caso non era possibile usare comunque i css per "simulare" l'effetto.
When the myth has not limits
se vuoi posso darti il codice per realizzare la stessa cosa con SVG. Io l'ho fatta utilizzando le curve di Bezier che ti gestiscono un bel po di cose.
Eventualmente ti posto il codice domani, fammi sapere
OK mostrami il codice quando puoi che ci do un occhiata!
SVG lo mastico un po' ma non troppo, ma non bisognerebbe avere l'SVG Viewer per vederlo su browser?
When the myth has not limits
si, bisogna avere l'SVG Viewer.
Domani ti posto il codice.
direi ke usare svg x un bordo non mi sembra un grande affare
<svg width="800" height="100" viewBox="0 0 800 100">
<defs>
<clipPath id="barra">
<rect x="-50" y="0" width="50" height="100">
<animate attributeName="x" attributeType="XML" begin="0s" dur="5s" repeatCount="indefinite" from="-50" to="800"/>
</rect>
<rect x="800" y="0" width="50" height="100">
<animate attributeName="x" attributeType="XML" begin="0s" dur="5s" repeatCount="indefinite" from="800" to="-50"/>
</rect>
</clipPath>
<filter id="ombra">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="passo1"/>
<feOffset in="passo1" dx="5" dy="5" result="passo2"/>
<feMerge>
<feMergeNode in="passo2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<a xlink:href="http://www.google.it">
<rect x="0" y="0" width="800" height="100" stroke="red" stroke-width="2" fill="white"/>
<text x="400" y="60" style="text-anchor:middle;font-size:40;font-family:Arial;fill:red;" filter="url(#ombra)">Progetto di telematica
<animate begin="0s" dur="6s" repeatCount="indefinite" attributeName="font-size" values="40;20;10;20;40;60;80;60;40;20;10;20;80;40"/></text>
<g clip-path="url(#barra)" clip-rule="evenodd">
<rect x="0" y="0" width="800" height="100" fill="red"/>
<text x="400" y="60" style="text-anchor:middle;font-size:40;font-family:Arial;fill:yellow" filter="url(#ombra)">Progetto di telematica
<animate begin="0s" dur="6s" repeatCount="indefinite" attributeName="font-size" values="40;20;10;20;40;60;80;60;40;20;10;20;80;40"/></text>
</g>
<text x="400" y="90" text-anchor="middle" font-family="arial" font-size="35" fill="white">
P r o g e t t o d i t e l e m a t i c a
</text>
</a>
</svg>
Originariamente inviato da Reflection
Ma per fare un effetto semi trasparente si può in qualche maniera? Senza usare il filter ovviamente. L'unica idea che mi era venuta in mente era quella di una gif con un pixel colorato e un altro trasparente, ma mi domandavo se per caso non era possibile usare comunque i css per "simulare" l'effetto.
con i css si può creare un effetto ombra semitrasparente, se usi mozilla-firefox... in ogni caso puoi fare un'ombra in questo modo:
codice:<div style="position:absolute; top:103;left:203;font-size:500%; color:#000000;opacity:0.3;">Prova trasparenza</div> <div style="position:absolute; top:100;left:200;font-size:500%; color:#FFAA55; ">Prova trasparenza</div>
questo è il codice completo che ho usato, e allego uno sshot del risultato ottenuto...
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="it"> <head> <title>Prova</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body style="font-family:Arial, sans-serif; font-size:10pt; text-align:justify; color:#3E3E3E;background-color:#CCAAFF;"> <div style="position:absolute; top:103;left:203;font-size:500%; color:#000000;opacity:0.2;">Prova trasparenza</div> <div style="position:absolute; top:100;left:200;font-size:500%; color:#FFAA55; ">Prova trasparenza</div> </body> </html>
Permessi di invio
Rispondi quotando