Przezroczystość

m3a1 · 2013-10-02 20:48:32

Witam serdecznie, mam taki o to kod:

<style type="text/css">
#tab {
   width: 200px;
   height: 300px;
   position: fixed;
   top: 100px;
   
  background-color: #990033;
   border: 5px solid #9900cc;
   left: -210px;
   -webkit-transition: left 0.5s ease-out;
   -moz-transition: left 0.5s ease-out;
   -o-transition: left 0.5s ease-out;
   transition: left 0.5s ease-out;

}
#tab:after{
   content: url('LINK DO OBRAZKA');
   position: absolute;
   right: -32px;
   top: -5px;
   cursor: pointer;
}

#tab:hover {
   left: 0;
}
</style>
<div id="tab">TEKST</div>

Jednak zachciało mi się przezroczystości przez co wykombinowałem coś takiego:

<style type="text/css">
#tab {
   width: 200px;
   height: 300px;
   position: fixed;
   top: 100px;
   opacity:1.0  - DODAŁEM COŚ TAKIEGO!!!!!!!!!!!!!!!
  background-color: #990033;
   border: 5px solid #9900cc;
   left: -210px;
   -webkit-transition: left 0.5s ease-out;
   -moz-transition: left 0.5s ease-out;
   -o-transition: left 0.5s ease-out;
   transition: left 0.5s ease-out;

}
#tab:after{
   content: url('LINK DO OBRAZKA BUTTONA');
   position: absolute;
   right: -32px;
   top: -5px;
   cursor: pointer;
}

#tab:hover {
   left: 0;
}
</style>
<div id="tab">TEKST</div>

Oczywiście efekt się udał jednak nie chciałem aby to było takie w 100% przezroczyste...
Jak dodać efekt lekkiej przezroczystości z purpurowym tłem?

pro14ab · 2013-10-02 21:25:35

Liczba 0.5 odpowiada za przezroczystość.
background: rgba(153, 0, 51, 0.5);

Gotowy kod:

<style type="text/css">
#tab {
   width: 200px;
   height: 300px;
   position: fixed;
   top: 100px;
   
 background: rgba(153, 0, 51, 0.5);
   border: 5px solid #9900cc;
   left: -210px;
   -webkit-transition: left 0.5s ease-out;
   -moz-transition: left 0.5s ease-out;
   -o-transition: left 0.5s ease-out;
   transition: left 0.5s ease-out;

}
#tab:after{
   content: url('LINK DO OBRAZKA');
   position: absolute;
   right: -32px;
   top: -5px;
   cursor: pointer;
}

#tab:hover {
   left: 0;
}
</style>
<div id="tab">TEKST</div>

Ostatnio edytowany przez pro14ab (2013-10-02 21:25:51)

m3a1 · 2013-10-03 06:22:34

Faktycznie, dziękuje bardzo za pomoc [dblpt])

kostrzewa87 · 2015-01-06 10:32:26

Witam,
mi ten kod nie działa, wyświetla się że zakończenie <style> jest nieprawidłowe a jak dam bez tego to nic się nie zmienia [dblpt][slash]

pro14ab · 2015-01-06 14:22:17

Wszystko co masz miedzy <style.... a </stye> daj do modyfikacji css

kostrzewa87 · 2015-01-06 15:05:24

tak też zrobiłem - bezskutecznie, nie dało to żadnego efektu.

pro14ab · 2015-01-06 15:19:10

[dblpt]rolleyes[dblpt] W ogóle wiesz co ten kod robi?
Do modyfikacji CSS (upewnij się, że włączyłeś)

#tab {
   width: 200px;
   height: 300px;
   position: fixed;
   top: 100px;
   
 background: rgba(153, 0, 51, 0.5);
   border: 5px solid #9900cc;
   left: -210px;
   -webkit-transition: left 0.5s ease-out;
   -moz-transition: left 0.5s ease-out;
   -o-transition: left 0.5s ease-out;
   transition: left 0.5s ease-out;

}
#tab:after{
   content: url('LINK DO OBRAZKA');
   position: absolute;
   right: -32px;
   top: -5px;
   cursor: pointer;
}

#tab:hover {
   left: 0;
}

Do np. ogłoszenia

<div id="tab">TEKST</div>

LINK DO OBRAZKA-to trzeba uzupełnić.

Ostatnio edytowany przez pro14ab (2015-01-06 15:20:12)

Oficjalne forum pomocy serwisu PUN.pl

#1 2013-10-02 20:48:32

Przezroczystość

#2 2013-10-02 21:25:35

Odp: Przezroczystość

#3 2013-10-03 06:22:34

Odp: Przezroczystość

#4 2015-01-06 10:32:26

Odp: Przezroczystość

#5 2015-01-06 14:22:17

Odp: Przezroczystość

#6 2015-01-06 15:05:24

Odp: Przezroczystość

#7 2015-01-06 15:19:10

Odp: Przezroczystość

Stopka