[css]przezroczystość, jak zrobić Opcje

[gosienkami]

mam pytanko jak zrobić tyle zeby po najechaniu na obrazek był zasłonięty warstwa przezroczystą. cos takiego jak jest na wp.pl. w 4 zakładkach., i zeby działało pod kazda przegladarką

[piotrooo89]

swego czasu napisałem dwa artykuły na ten temat:
http://olaszewski.com/2008/12/05/przezroczystosc-w-ie/
http://olaszewski.com/2009/02/23/bugi-ie-cz-1/

[gosienkami]

hmm pod MF mi to nie działa
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

swego czasu napisałem dwa artykuły na ten temat:
http://olaszewski.com/2008/12/05/przezroczystosc-w-ie/
http://olaszewski.com/2009/02/23/bugi-ie-cz-1/

[erix]

Bo to jest tylko dla IE; dla Fx/innych musisz jeszcze dopisać opacity: 0.7.

[decha-design]

Bo to jest tylko dla IE; dla Fx/innych musisz jeszcze dopisać opacity: 0.7.

a najlepiej zrobic osobny styl css dla IE, który by ładował ten filtr tylko jeżeli uzywa się IE ... bo na jakiego pierona to ładować do Fx i innych o.O'

[thomson89]

No najlepiej. Jak twój serwer obsługuje php, to poszukaj tematu który niedawno założyłem, tam było coś o wykrywaniu przeglądarki.

[PHP] pobierz, plaintext 
<?php
//skrypt znajdujacy przegladarke
if($nazwa_przeglad == 'opera' || $nazwa_przeglad == 'firefox')
echo '<style src="operaff.css">';
else echo '<style src="explorer.css">';
?>
[PHP] pobierz, plaintext 

[erix]

A czy o komentarzach warunkowych, to nie słyszałeś? Poza tym, masz bardzo ograniczone podejście; tylko trzy przeglądarki na świecie istnieją...? $nazwa_przeglad, to co to jest?

Przystopuj, człowieku, chcesz nabić sobie "pomógł", zapomnij...

[kilas88]

Kod

<!--[if lt IE 8]>
  <link rel="stylesheet" type="text/css" href="/template/blue/style/ie.css" />
  <script type="text/javascript" src="/system/ie_bugs.js"></script>
<![endif]-->

Ten post edytował kilas88 8.04.2009, 21:53:00

[thomson89]

A czy o komentarzach warunkowych, to nie słyszałeś? Poza tym, masz bardzo ograniczone podejście; tylko trzy przeglądarki na świecie istnieją...? $nazwa_przeglad, to co to jest?

Przykład.

[erix]

To jest bardzo zły przykład, który - summa summarum - nie ma prawa zadziałać w rzeczywistości.

Nie nabijaj postów.

[decha-design]

@erix, widzę że Ci podpadł ^^

Co do twojego przykładu thomson ... naprawdę jest zły =)

[PHP] pobierz, plaintext 
<?php
if($nazwa_przeglad == 'opera' || $nazwa_przeglad == 'firefox')
?>
[PHP] pobierz, plaintext 

jak masz zamiar coś zrobić z tym? co jest pod $nazwa_przeglad?

[hiszpanespaniol]

jeżeli chcesz, żeby działało po najechaniu, to najprościej będzie użyć odnośnika <a>, bo w jego przypadku na najechanie myszką/tabem reagują wszystkie czołowe przeglądarki.
1. Masz obrazek powiedzmy 100x100 px.
2. Otaczasz obrazek elementem <a> któremu dałeś display: block; height: 100px; position: relative.

[HTML] pobierz, plaintext 
<style type="text/css">
a {
    display: block;
    height: 100px;
    position: relative;
}
</style>
<a href="#">
    <img src="obrazek.jpg" alt="cośtam" longdesc="cośtam2" />
</a>
[HTML] pobierz, plaintext 

3. Do kodu dopisujesz sobie element <div> (czyli wewnątrz <a> masz <img> i <div>). Dla diva dajesz taki css: position: absolute; left: -999em; top: -999em; margin-top: 50px i jeszcze style o których wyczytasz w artykułach piotrooo89.

[HTML] pobierz, plaintext 
<style type="text/css">
  a {
      display: block;
      height: 100px;
      position: relative;
  }
div {
    position: absolute;
    left: -999em;
    top: -999em;
    margin-top: 50px; /* to jest po to, żeby Ci całego obrazka nie zakrył */
}
  </style>
<a href="#">
      <img src="obrazek.jpg" alt="cośtam" longdesc="cośtam2" />
      <div>Przeczytaj cośtam</div>
  </a>
[HTML] pobierz, plaintext 

4. Teraz, żeby się pojawił po najechaniu na obrazek, definiujesz css dla div'a który jest wewnątrz a:hover (left: auto; top: 0)

[HTML] pobierz, plaintext 
a:hover div {
    left: auto;  /*albo zero, jak wolisz */
    top: 0;
}
[HTML] pobierz, plaintext 

edycja:
nie powinieneś używać <div> wewnątrz <a>, mój błąd. zastąp <div> elementem <span> (będziesz mu musiał do stylów jeszcze dopisać display: block)

Ten post edytował hiszpanespaniol 9.04.2009, 17:01:40

[thomson89]

[php]
//skrypt znajdujacy przegladarke

Wynik skryptu. Ale skoro mówicie że jest źle, to nie będę się kłócił. A co do nabijania postów, ~erix, sprawa chyba załatwiona

Ten post edytował thomson89 9.04.2009, 10:36:52

[gosienkami]

.przenikanie{
opacity: 0.75;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
mam tak jak u ciebie i u mnie ten styl nie działa pod kadza przegladarka.

swego czasu napisałem dwa artykuły na ten temat:
http://olaszewski.com/2008/12/05/przezroczystosc-w-ie/
http://olaszewski.com/2009/02/23/bugi-ie-cz-1/

[erix]

Nie każdą, to znaczy? Stare Fx-y wymagały innej własności.

[piotrooo89]

daj tak

[HTML] pobierz, plaintext 
filter: alpha(opacity=70); 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
opacity: 0.70;
[HTML] pobierz, plaintext 

[guitarnet.pl]

dla CSS3 (ostatni argument to opacity):
background-color: rgba(255,0,0,1);
background-color: rgba(0,0,255,1);

aczkolwiek warto potestowac dla roznych przegladarek

[gosienkami]

[HTML] pobierz, plaintext 
nie działa mi  podany kod co po najechaniu myszy ma sie pojawiać tło przezroczyste. mam tak
<style type="text/css">
 
<style type="text/css">
a {
display: block;
height: 100px;
position: relative;
}
div {
position: absolute;
left: -999em;
top: -999em;
margin-top: 50px; /* to jest po to, żeby Ci całego obrazka nie zakrył */
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
opacity: 0.70;
}
a:hover div {
left: auto; /*albo zero, jak wolisz */
top: 0;}
</style>
</head>
<body>
 
<a href="#"> <img src="wypoz.jpg" alt="cośtam" width="640" height="480" longdesc="cośtam2" />
<div>przezroczystosc </div>
</a>
 
</body>
[HTML] pobierz, plaintext