Skocz do zawartości


Zdjęcie

[CSS3] Zaokrąglenia rogów, cienie przeźroczystość i gradienty.


  • Zaloguj się, aby dodać odpowiedź
2 odpowiedzi w tym temacie

#1 Macsch15

Macsch15

    Profesjonalista

  • 3 705 postów

Napisano 06 12 2010 - 21:05

Poniższe możliwości wchodzą właściwie w skład CSS3 i większość nie działa na IE wersji 6,7,8.

Zaokrąglenie rogów:

Przeglądarka: Mozilla Firefox
-moz-border-radius
Wartoś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-radius
Z 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-shadow
Któ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-shadow
Z 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>


  • 2

#2 Gość_cabana_*

Gość_cabana_*

Napisano 06 12 2010 - 21:29

Dzięki, sam z tego skorzystam i oczywiście + za to :D

  • 0

#3 bryla33

bryla33

    Obserwator

  • 5 postów

Napisano 31 12 2010 - 17:02

Ciekawy poradnik. Na pewno przyda się kilku osobom B)

+ leci :yes:

  • 0




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych