Zaokrąglone rogi dzięki CSS

Każdy by chciał mieć zaokrąglone rogi na swojej stronie internetowej. Praktycznie jak ich nie ma to strona nie nadaje się do oglądania http://webfly.pl/images/smileys/yes.gif Trzeba nadążać za trendami mody inaczej skończymy marnie http://webfly.pl/images/smileys/big_boss.gif

Jeszcze jakiś czas temu było to dość kłopotliwe. Takie zaokrąglenia trzeba było wykonać przy użyciu plików graficznych. Na szczęście teraz jest dużo prostsza metoda. Z pomocą przychodzi nam CSS3.
http://webfly.pl/images/upload/2012_5/2k88172e2b39.png

Aby zaokrąglić jakiś element, wystarczy dodać taki kod do swojego CSS:

Kod CSS:

Zaznacz


  1. .element_z_zaokraglonymi_rogami {
  2. -webkit-border-radius: 5px; /* Safari, Chrome */
  3. -khtml-border-radius: 5px; /* Konqueror */
  4. -moz-border-radius: 5px; /* Firefox */
  5. border-radius: 5px;
  6. }
Wartość w px oznacza promień krzywizny.

Możemy także zaokrąglać oddzielnie każdy z rogów:

Kod CSS:

Zaznacz


  1. .element_z_zaokraglonymi_rogami_u_gory {
  2. -webkit-border-top-right-radius: 5px; /* prawy górny */
  3. -webkit-border-top-left-radius: 5px; /* lewy dolny */
  4. }

Jest to na tyle intuicyjne, że zostawiam bez komentarza.

Gdzie ten cud technologiczny używać? Wszędzie gdzie się da http://webfly.pl/images/smileys/new_russian.gif Im mniej ostrych kantów tym trudniej sobie zrobić krzywdę serfując po sieci. Tak więc zaokrąglone rogi niezaprzeczenie mają ogromny wpływ na bezpieczeństwo w internecie.

Na tej stronie taki efekt wykorzystuję w chmurze tagów po prawej stronie.

Komentarze:

Ten wpis nie był jeszcze komentowany.

Dodaj komentarz

* - pole wymagane


 

Podobne wpisy:

  • Kurs tworzenia stron www dla początkujących - CSS, HTML, PHP, MySQL, JavaScript

    Kurs tworzenia stron www dla początkujących - CSS, HTML, PHP, MySQL, JavaScript

    Właściwie to kurs tworzenia stron to za dużo powiedziane, ale przedstawię w tym artykule podstawowe, przydatne informacje dla osób chcących zacząć przygodę z tworzeniem stron internetowych. Osoby, które projektują strony www stosunkowo niedługi lub po prostu nie czują się w tym dobre, też znajdą tu informację czy czasem nie idą w złym kierunku. Na samym początku warto poznać same podstawy, czyli jaki język do czego służy (a raczej do czego powinien.. bo wiadomo, że ...
  • Dlaczego nie warto robić stron opartych na tabelach

    Dlaczego nie warto robić stron opartych na tabelach

    Opisze dość skrótowo zagadnienie budowy strony opartej na tabelach. Przedstawię wady takiego rozwiązania i zalety (o ile przyjdą mi jakieś do głowy podczas pisania). Określenie strona oparta na tabelach odnosi się do głównej konstrukcji strony jak i jej mniejszych elementów. W praktyce często objawia się to poprzez ukrycie obramowania tabeli i wielokrotne zagnieżdżanie ich w sobie. Tworzy się wtedy swoista siatka, na której można projektować stronę. Przykładowo główna ...