Zaokrąglenie rogów:
Przeglądarka: Mozilla Firefox
-moz-border-radiusWartości jakie przyjmuje to:
0 0 0 0
Pierwsza wartość to Lewy górny róg, druga to Prawy górny róg, trzecia to Lewy dolny róg i czwarta to Prawy dolny róg.
Przykład użycia:
<style type="text/css"> #tweaks_pl{ -moz-border-radius: 15px 10px 20px 50px; width: 200px; height: 200px; background: #000; } </style> <div id="tweaks_pl"> </div>
Przeglądarka: Google Chrome, Opera, Safari
Przyjmują:
border-radiusZ tymi samymi wartościami jak wersja na firefoxa, czyli przykładowo:
<style type="text/css"> #tweaks_pl{ border-radius: 15px 10px 20px 50px; width: 200px; height: 200px; background: #000; } </style> <div id="tweaks_pl"> </div>
Cienie
Przeglądarka: Mozilla Firefox
-moz-box-shadowKtóra przyjmuje wartości:
0 0 0 #000
Pierwsza wartość odpowiada za Cień z prawej strony obiektu, druga wartość Cień z dolnej strony obiektu, trzecia wartość odpowiada za rozmycie tego tła i ostatnia to kolor w wartościach HEX.
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: #000; -moz-box-shadow: 8px 7px 10px #ccc; } </style> <div id="tweaks_pl"> </div>
Przeglądarka: Google Chrome, Opera, Safari
box-shadowZ tymi samymi wartościami co w firefox.
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: #000; box-shadow: 8px 7px 10px #ccc; } </style> <div id="tweaks_pl"> </div>
Przeźroczystość
przyjmuje trzy wartości:
filter:alpha(opacity=00); opacity: 0.00; -moz-opacity:0.00;
Przeglądarka: Internet Explorer od wersji 8
filter:alpha(opacity=00);"00" decyduje o intensywności, np 80 zwraca przeźroczystość w 80%.
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: #000; filter:alpha(opacity=70); } </style> <div id="tweaks_pl"> </div>
Przeglądarka: Mozilla firefox, Google Chrome, Safari, Opera
opacity: 0.00;0.00 Przyjmuje wartości "w układzie setnym", działamy tu przeciwnie jak w powyższym przykładzie, tutaj wartość 0.20 odpowiada 80% przeźroczystości, natomiast 1.00 to brak przeźroczystości.
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: #000; opacity: 0.20; } </style> <div id="tweaks_pl"> </div>
Przeglądarka: Mozilla firefox wersje starsze
-moz-opacity:0.85;Przyjmuje te same wartości co w "opacity: 0.00", przykłąd użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: #000; -moz-opacity:0.20; } </style> <div id="tweaks_pl"> </div>
Gradient (NIE POLECANE)
Przeglądarka: Mozilla firefox
background: -moz-linear-gradient(top, #3e3e3e, #ccc 100px);Pierwsza wartość to rozpoczęcie kreślenia, druga to kolor gradientu, trzecia to kolor tła "za" gradientem i ostatnia to rozpiętość gradientu.
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: -moz-linear-gradient(top, #3e3e3e, #ccc 100px); -moz-opacity:0.20; } </style> <div id="tweaks_pl"> </div>
Przeglądarka: Google Chrome
background: -webkit-gradient(linear, 0 0, 0 0, from(#ccc), to(#3d3d3d));Pierwsza wartość to sposób malowania gradientu, linear = liniowy, 0 0 to współrzędne X i Y które odpowiadają za początek malowania gradientu, następne 0 0 to również współrzędne tyle że końcowego malowania, "from(#ccc)" to kolor początkowy gradientu (góra) a "to(#3d3d3d)" określa końcowy kolor (dół).
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: -webkit-gradient(linear, 0 0, 0 80%, from(#ccc), to(#3d3d3d)); -moz-opacity:0.20; } </style> <div id="tweaks_pl"> </div>
Przeglądarka: Opera
background: -o-linear-gradient(top, #ccc, #3d3d3d);pierwsza wartość - pozycja początkowa, druga - kolor samego gradientu i ostatnia to tło gradientu.
Przykład użycia:
<style> #tweaks_pl{ width: 200px; height: 200px; background: -o-linear-gradient(top, #ccc, #3e3e3e); -moz-opacity:0.20; } </style> <div id="tweaks_pl"> </div>