We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.


Posted By

speck on 07/02/06


Tagged

css hack opacity


Versions (?)


Who likes this?

139 people have marked this snippet as a favorite

jonhenshaw
luman
arcturus
xaviaracil
Roshambo
designerd
alvaroisorna
joernba
splorp
meth
gardano
cochambre
samuraicoder
panatlantica
marc0047
jkochis
nicolaspar
px
hxseven
zensir
oronm
visualAesthetic
theMacpenguin
peterF
block
lhplam
koncept
KilgoreTrout67
icarus
nankoweap
shachi
Phoenix
happolati
n00ge
cmslounge
manub
m10
fragholrok
fael
rich13
asimovi
vali29
heinz1959
SamuelMiller
aziz
hariharank12
sjaq
Winkyboy
sp1r1t
adix
skywalker
balinuxster
neoprolog
DFCNT
ernscht
usgraphicscom
stphnclysmth
sosof
vbert
wbowers
sbbath
maddesigns
gbot
adamsimms
mb
eorwoll
zeljkoprsa
rovision
brent-man
unravelme1
stylz
mmccrack
mattkenefick
JustinCrossman
randylien
enajenkins
neb0
riz
pablodgavilan
jamesming
blackabee
Xek
crashdr
nickdoherty
loopdream
marouanomezzine
esquareda
ravenlp
SnipItPrpDemo
titox
conspirator
Leech
l1r
poGDI
zerolab
Wiederkehr
rubensarrio
dmatranga
chippper
asturi
pixelz
numtre
joaosalless
Sn0opy
salibaray
crisb
igor822
AlexWolfe
ilumin
aleprieto
LostCore
jder
Hilyin
jackomono
ozayo
yuindustries
mori
LeeRJohnson
elbuenob
bryandease
ping_ch
owais
Anber
johnnytoobad
Bolek
nreliu
hamiltonmascioli
bigheadlyf
shali
tekbomb
ira
cmahoney
savintsev
danielfilho
fragmentist
nightowl
darkapple
exanimo9
spazione


Opacity Hack


Published in: CSS 


Sets the opacity of an element and its children. Doesn't validate. Mozilla began supporting the opacity rule in version 1.7, so '-moz-opacity' may not be necessary...

  1. selector {
  2. filter: alpha(opacity=60); /* MSIE/PC */
  3. -moz-opacity: 0.6; /* Mozilla 1.6 and older */
  4. opacity: 0.6;
  5. }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: Roshambo on August 16, 2006

As a note, I believe, Gecko 1.7 was implemented in Firefox 1.5.

Posted By: Jo-W on October 8, 2008

Firefox 1.5 uses gecko 1.8 Firefox 1.0 uses gecko 1.7 So anything older then firefox 1.0 does not support opacity

Posted By: netsi1964 on November 13, 2008

Hi, In general I like the Idea of snippets, no doubt about that! But I would love to see some kind of standardilzation of them, preferable in a combination of XML, XSD (schema). You could then transform your XML snippet to what ever purpose you would need it in - say a HTML context. You can validate the input to the snippet using XSD. And some clever programmer might create add-ins for say MS Visual Studio 2008 or other commenly used development tools.

Here is my first thoughts about how it could be put together - based on this snippet for opacity:

Opacity hack
1.0
CSS



     {
    filter: alpha(opacity=); /* MSIE/PC */
    -moz-opacity: ; /* Mozilla 1.6 and older */
    opacity: ;
    }
Posted By: netsi1964 on November 13, 2008

Sorry the system didn't like me pasting XML into the comment field... I try again: Hi, In general I like the Idea of snippets, no doubt about that! But I would love to see some kind of standardilzation of them, preferable in a combination of XML, XSD (schema). You could then transform your XML snippet to what ever purpose you would need it in - say a HTML context. You can validate the input to the snippet using XSD. And some clever programmer might create add-ins for say MS Visual Studio 2008 or other commenly used development tools. Here is my first thoughts about how it could be put together - based on this snippet for opacity: Opacity hack 1.0 CSS { filter: alpha(opacity=); / MSIE/PC / -moz-opacity: ; / Mozilla 1.6 and older / opacity: ; }

Posted By: netsi1964 on November 13, 2008

Sorry - I simply couldnt make my comment containing XML example. So I wrote an article on my blog: http://netsi1964.blogspot.com/ - feel free to read it :-)

Posted By: jadedbat on November 25, 2008

This method does not validate but surely works.. cool with hovers.

You need to login to post a comment.