Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Kurs CSS3 - cz. 1

Dzisiaj rozpocznę kurs z zakresu CSS3, czyli już nie tak nowego standardu arkuszy stylów. Na wstępnie należy przypomnieć, iż nie jest on jeszcze w całości obsługiwany przez wszystkie przeglądarki na rynku. W dzisiejszym artykule przybliżę dokładniej jak tworzyć nałożyć efekty na tekst oraz jak tworzyć obramowania obiektów. 

Zacznijmy od cechy text-shadow. Dzięki niej będziemy mogli uzyskać prosty cień nałożony na tekst, przy użyciu samego kodu.
Implementuemy go w kodzie CSS w następujący sposób:
selektor{
text-shadow: ośX[px] ośY[px] rozmazanie[px] kolor[hex/rgb];
}

czyli przykładowy kod, stylizujący element 'p' , będzie wyglądał następująco:
p{
text-shadow: 5px 5px 10px #eeffdd;
}

Przykładowy tekst



Kolejna bardzo przydatna cecha to word-wrap. Dzięki niej długi wyraz, który do tej pory wychodził poza obręb div'a, zostanie przerwany i przeniesiony do następnej linijki.
Implementacja:
selektor{
word-wrap: normal|break-word;
}
Przykład:
.przyklad{
word-wrap: normal;
}
Bardzodługiwyrazktoryzostanieprzecietypotozebyladniejwygladalo nieprawdaż?
 
.przyklad{
word-wrap: break-word;
}
Bardzodługiwyrazktoryzostanieprzecietypotozebyladniejwygladalo nieprawdaż?


Trzecią i ostatnią cechą powiązaną z tekstem jest text-overflow. Dzięki niej możemy określić, jak tekst ma wyglądać, jeżeli wychodzi poza obręb div'a. Obowiązkowo musimy użyć również 'overflow:hidden;' (dzięki temu tekst poza divem będzie niewidczony) oraz 'white-space: nowrap;' (umożliwia łamanie białych znaków).
Implementacja:
selektor{
overflow:hidden;
white-space: nowrap;
text-overflow: clip|ellipsis|string;
}
  • clip - utnie tekst
    przykład:
    .przyklad{
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    width: 100px;
    }
    Tutaj tekst, który zostatnie obcięty po wyjściu poza obręb
  • ellipsis - ucina tekst, lecz pozostawia trzy kropki na koniec
    przykład:
    .przyklad{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px;
    }
    Tutaj tekst, który zostatnie obcięty po wyjściu poza obręb


W drugiej części tego artkułu przybliżę kilka ciekawych efektów do ozdabiania bloków (div'ów) przy użyciu CSS3. Przede wszystkim pokażę, tworzenie zaokrąglonych rogów, obracania obiektów oraz cienie bloków.
Zacznijmy od zaokrąglania rogów. Używamy do tego cechy border-radius. Aby działało to poprawnie na wszystkich przeglądarkach musimy równcześnie dodawać dwie inne cechy: -webkit-border-radius oraz -moz-border-radius.
Implementacja:
selektor{
-webkit-border-radius: wartosc[px];
-moz-border-radius: wartosc[px];
border-radius: wartosc[px];
}

przykład:
.przyklad{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Tutaj tekst, który zostatnie zaokrąglony.


Teraz pokażę, jak przy użyciu cechy transform i metody rotate() obrócić dowolny obiekt. Oczywiście, aby poprawnie działała ona na przeglądarkach IE i Chrome, musimy używać również: -ms-transform oraz -webkit-transform.
Implementacja:
selektor{
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
gdzie 45, to ilość stopni, o które chcemy obrócić obiekt.
przykład:
selektor{
transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
 

Tutaj tekst, który zostatnie obrócony o 5 stopni.


Ostatnia część tego artykułu będzie o cieniowaniu obiektów(nie tylko samego tekstu). Do tego wykorzystamy cechy box-shadow.
Implementacja:
selektor{
box-shadow: odległośćOdX[px] odległośćOdX[px] rozmazanie[px] kolor[hex/rgb];
}
przykład:
.przyklad{
box-shadow: 5px 5px 2px #000;
}

Tutaj tekst, który zostatnie obrócony o 5 stopni.



Przydatny generator cieni do potestowania znajdziecie tutaj.

To na tyle na dzisiaj, w następnym kursie pokażę w jaki sposób tworzyć gradienty w CSS3, a także tworzenie animacji czy przejść.