Zaokrąglanie rogów bez użycia grafik
Zaokrąglenie rogów można stosować na obrazkach, tabelach, elementach blokowych. Ale nie tylko - ogranicza nas w tym przypadku tylko wyobraźnia.
Rozwiązanie jest proste i polega na skorzystaniu z dobrodziejstw oferowanych przez Kaskadowe Arkusze Stylów (CSS). Warto wiedzieć, że do najnowszej wersji 3 została dodana funkcjonalność border-radius. Umożliwia ona zaokrąglenie rogów we wskazanych elementach blokowych, za pomocą dodania do arkusza zaledwie jednej linijki kodu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-radius: 6px 5px;
border-radius: 6px;
- border-top-left-radius - lewy górny róg
- border-top-right-radius - prawy górny róg
- border-bottom-left-radius - lewy dolny róg
- border-bottom-right-radius - prawy dolny róg
- border-radius: 6px 5px - wszystkie rogi: 6px na X, 5px na Y
- border-radius: 6px - wszystkie rogi: 6px
Zaokrąglanie rogów obsługują najpopularniejsze przeglądarki: Google Chrome 5.0+, Internet Explorer 9.0+, Mozilla Firefox 4.0+, Safari 5.0+ i Opera 10.5+.
Kategorie: HTML + CSS. Tagi: #css, #grafika, #html, #Internet Explorer, #mozilla firefox, #opera, #przeglądarki internetowe. Źródło obrazków: Pixabay, Font awesome.
Zobacz także
9 komentarzy
