GoldenLine
Zaloguj się

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Witam

Widziałem kilka patentów na zaokraglone rogi, ale chciałbym zapytac jaki według was jest optymalny i czesto z niego korzystacie?

Do oceny pozostawiam moj sposob:

Div main:a w nim

1div - gora zaokraglona.png
2div - tylko background kolor i tu <p></p>
3div - dół zaokraglony.png

Okraszone wszystko właściwymi rozmiarami itd.

Szukam czegoś tylko i wyłacznie na css bez dodatkowych skryptów.

Pozdrawiam
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Tworząc zaokrąglone rogi korzystam teraz wyłącznie z możliwości, jakie daje CSS3:
border-radius: 10px;
-moz-border-radius: 10px; // firefox
-webkit-border-radius: 10px; // safari, chrome

Jedyne przeglądarki, które nie obsługują zaokrąglonych rogów są IE i Opera, choć producenci zapowiadają, że od następnych wersji będą tą opcję wspomagać.

Nie ma sensu korzystania z dodatkowych div-ów i niepotrzebnego kodu w dobie, gdy mamy wsparcie dla CSS3 ze strony większości nowoczesnych przeglądarek. W przypadku IE, myślę, że nie jest to aż taki problem i elementy zostaną po prostu kwadratowe.

Pozdrawiam.
Link do wypowiedziLink
Grzegorz Wysocki

Grzegorz Wysocki Mam web do pewnych
spraw ;)

Temat: Zaokrąglone rogi - czysty css

Całkowicie zgadzam się z Dariuszem. Dodam tylko, że nie koniecznie musimy zostawiać kwadratowe rogi w IE. Można skorzystać, chociażby z 'behavior' i cieszyć się zaokrąglonymi rogami we wszystkich przeglądarkach, jednocześnie mając to poczucie, że nasz plik ze stylami jest nadal czyściutki i przejrzysty.

Cross-browser CSS3 border-radius
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Dariusz Pobożniak:
Nie ma sensu korzystania z dodatkowych div-ów i niepotrzebnego kodu w dobie, gdy mamy wsparcie dla CSS3 ze strony większości nowoczesnych przeglądarek.

Jesli chce sie osiagnac dobry wyglad wszedzie - a na tym to polega by mimo roznic w przegladarkach strona wyglada praktycznie tak samo - uzywanie CSS3 jako sposoby na zaakraglone rogi nie jest dobrym rozwiazaniem. Jesli designer zrobil to z zakraglonymi rogami - to ucznil to pewnie dlatego ze bedzie pasowac do calej reszty designu, a nie dlatego ze mial taka fantazje.

Dopoki IE6,7,8 ma ponad polowe rynku, takie rzeczy po prostu nie powinny miec miejsca. Osobiscie zrobilbym tak jak napisal Robert - gwarancja ze zadziala wszedzie, a by IE6 bylo takze zadowolone, sugeruje dodac pngFIX ktory ladnie zalatwi sprawie.

Niestety CSS3 jeszcze dlugo nie bedzie czescia standardu.
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Witam

CSS3 jest przyszłością i na bank będzie krokiem na przód dla ludzi którzy klepią w nim. Z drugiej strony trzeba robić teraz tzw: protezy bo fakt faktem jest że IE(niestety ma w dalszym ciągu dużą cześć rynku w garści.)jak nie ruszy z miejsca to się cofnie.

Dzięki za wszystkie wartościowe wypowiedzi - podoba mi się sposób Grzegorza na krągłości ;) w IE - tylko zastanawiam się co szybciej będzie się ładowało na stronie mój sposób czy wyżej wymieniony.

Pozdrawiam
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Wszystko zależy od założenia jakie stawiamy przy budowie serwisu: czy zależy nam na całkowitym odwzorowaniu projektu we wszystkich przeglądarkach, czy designer zaprojektował witrynę z myślą głównie o "nowych" przeglądarkach i możliwości pewnych odstępstw w pozostałych.

Osobiście jestem zwolennikiem, aby wykorzystać nowe możliwości i iść w stronę, by strona dobrze i poprawnie się wyświetlała na wszystkich urządzeniach/przeglądarkach, a niekoniecznie identycznie w tych, które niestety pamiętają minioną epokę.
Link do wypowiedziLink
Krzysztof Safjanowski

Krzysztof Safjanowski Senior JavaScript
Lead Developer

Temat: Zaokrąglone rogi - czysty css

Jeden plik z tłem ze sklejoną górą oraz dołem (czasami dwa, jeśli treści może być bardzo dużo, wtedy sprawdzenie poprzez JS, który plik wykorzystać)

Pierwszy kontener – tło wyrównane do dołu
Drugi kontener – tło wyrównane do góry

Minusy: niemożność skorzystania z tła z przezroczystością – wtedy stosuję rozwiązanie podobne do tego zaproponowanego przez @Roberta

Psss, MSIE ma 30,6% udziału w tortowym rynku przeglądarek.
Link do wypowiedziLink
Krystian O.

Krystian O. IT Project Manager w
Blue Services Sp. z
o.o.

Temat: Zaokrąglone rogi - czysty css

O ile CSS3 jest aja i oczywiście wykorzystanie jego możliwości to słuszna droga to zdarza się, że trzeba zrobić zaokrąglone rogi nawet pod IE6...

jak dla mnie z odsieczą przychodzi http://www.curvycorners.net
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Krzysztof Safjanowski:
Psss, MSIE ma 30,6% udziału w tortowym rynku przeglądarek.

Na stronach na ktorych ja pracuje (15 roznych jezykow, miliony odwiedzin miesiecznie) ilosc uzytkownikow uzywajacych MSIE = okolo 45% (ps. z tego IE6 to nadal 12%!!) ;)
Wiec nie wierze w te 30% - za pieknie by bylo ;)
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

sorry panowie ale to klient i użytkownicy tworzą "standardy" i wymagania do których trzeba się dostosować a nie koderzy ...

CSS3 to jeszcze musi troszkę poczekać ... wtedy to dopiero się koderzy rozleniwią ;)

bez CSS3
bez obrazków
i działa wszędzie
http://blog.benogle.com/2009/04/29/css-round-corners/
http://www.webreference.com/programming/css_borders/
http://www.cssplay.co.uk/boxes/snazzy.html
http://www.spiffycorners.com/
http://www.cssplay.co.uk/boxes/chunky.htmlKrzysztof Tomasz J. edytował(a) ten post dnia 31.03.10 o godzinie 23:36
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Krzysztof Tomasz J.:
CSS3 to jeszcze musi troszkę poczekać ... wtedy to dopiero się koderzy rozleniwią ;)

Az sie rozmazylem ;)
Moze kiedys dozyje tego momentu ;)
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Andrzej Winnicki:
Az sie rozmazylem ;)
Moze kiedys dozyje tego momentu ;)
dożyjesz dożyjesz ...

ewolucja to przyspieszy... najpierw "IE6 Must Die" ;)
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Krzysztof Tomasz J.:
CSS3 to jeszcze musi troszkę poczekać ... wtedy to dopiero się koderzy rozleniwią ;)

CSS3 już dosyć długo panuje w życiu Frontendu, a jedynie co uniemożliwia całkowite jego wykorzystanie to starocie jakie IE6, IE7, w IE9 Microsoft zapowiada jego poprawne interpretowanie (pożyjemy, zobaczymy :P). "Normalne" przeglądarki jednak go obsługują i myślę, że należy iść w przód, a nie stać w miejscu. Klient powinien zobaczyć w przeglądarce dobrze zrobioną stronę, która się nie rozlatuje, a w nowych (FF, Safari, etc) jeszcze ładniejszą i efektowniejszą wykorzystującą możliwości CSS3.
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

wg mnie klient powinnien zobaczyc w kazdej przegladarce fajna, nierozlatujaca sie strone a nie tylko w tych, ktore maja CSS3 ;)

Jakby przyszedl do mnie ktos i powiedzial "ooo tutaj ma jest piekne layout, zaokraglone rogi w FF, chromie, ale w IE niestety beda kwadratowe" to znaczy ze nie potrafi zrobic strony, albo projekt ma "gdzies".

A skoro nadal IE wymusza zrobienie tego inaczej, to chyba lepiej zrobic to tak inaczej, by dzialalo wszedzie tak samo - czyli np. poprzez dodawnie diva przed i po z obrazkiem.
Czy wolicie zrobic dla mozzilowych i webkitowych w css3 a dla IE kombinowac inaczej? jest sens robic to samo dwa razy?

IE9 wyjdzie, a to oznacza ze trzeba nastepnych 5 lat by poprzednie przegladarki zniknely :)
Link do wypowiedziLink
Bartek Stańkowski

Bartek Stańkowski front-end & mobile
web developer

Temat: Zaokrąglone rogi - czysty css

Krzysztof Tomasz J.:
sorry panowie ale to klient i użytkownicy tworzą "standardy" i
wymagania do których trzeba się dostosować a nie koderzy ...

Jakby wszystko zależało tylko od klientów, to dalej siedzielibyśmy w jaskiniach. :)
Jak się chce i wie jak to robić, to korzystać z CSS3 można coraz częściej i robić to tak, żeby wszyscy dostawali prawie identyczny layout, ale ci z dobrymi przeglądarkami dostawali go szybciej, lepiej, bardziej elastyczny, itp.

Dwa przykłady

border-radius:
Opera, Fx, Safari – CSS,
IE – JS, np. DD_roundies, border-radius.htc albo inne, podobne opcje.

gradienty:
Zamiast grafiki dla każdej przeglądarki, dla Fx i Safari można użyć gradientów w CSS. Co więcej, odpowiednia deklaracja w CSS sprawi, że przeglądarki bez obsługi pobiorą obrazek, a Fx 3.6 użyje gradientu = 1 request mniej, szybsza strona, skalowalne tło, itd.
Podobnie z jednolitymi tłami z kanałem alpha – RGBA dla dobrych, grafika dla IE.

Po to mamy zabawki takie jak np. Modernizr, żeby korzystać z nowości, ułatwiać sobie życie i ulepszać wrażenia użytkownika.

Jakby czekać z tym wszystkim do momentu, kiedy IE 6 i 7 znikną z sieci, umarlibyśmy z nudów w tej robocie. Nie ma nic złego w tym, żeby wygląd niektórych elementów zależał od JS. Wykrywanie obsługi CSS czy HTML5 przydaje się coraz bardziej. Te kilka kb JavaScriptu nie zrobi większej różnicy, a może zaoszczędzić pobierania np. kilku grafik tła.

Dariusz Pobożniak:myślę, że należy iść w przód, a nie stać w miejscuKlient powinien zobaczyć w przeglądarce dobrze zrobioną stronę, która się nie rozlatuje, a w nowych (FF, Safari, etc) jeszcze ładniejszą i efektowniejszą wykorzystującą możliwości CSS3.

Dokładnie tak.

Andrzej Winnicki:
wg mnie klient powinnien zobaczyc w kazdej przegladarce fajna,
nierozlatujaca sie strone a nie tylko w tych, ktore maja CSS3 ;)

To prawda, ale co innego rozlatująca się strona, a co innego taka, która nie ma 3-pikselowego, ledwie widocznego cienia wokół jakiegoś bloku. ;)
Czy wolicie zrobic dla mozzilowych i webkitowych w css3 a dla IE
kombinowac inaczej?

Tak wolę. ;)
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Bartku, całkowicie popieram Twoje podejście do sprawy, że dzięki CSS3 można uzyskać niejednokrotnie szczegóły, które zdecydowanie poprawią wygląd strony, a których brak nie uszczupli możliwości, jakie daje użytkownikom IE. W ostatnim projekcie prawie całkowicie zrezygnowałem z obrazków, które tworzyły lekki gradient, na rzecz gradientów w CSS3 i zdecydowałem, że starszych przeglądarkach wystarczą jednolite background'y i nie spowoduje to, że strona będzie wyglądała gorzej.
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Dariusz Pobożniak:
Bartek Stańkowski:

Panowie przodownicy widzę że zachyśneliście się nowością ;)
... pokażcie mi choć jeden poważny serwis w którym zastosowano CSS3 (np. takie zaokrąglone rogi) ...

Strony robi się po to aby były dostępne dla większości użytkowników i wyglądały możliwie tak samo. Dostępność to większe zyski...

Klienta nie interesuje czy ten serwis ma jeden obrazek do wczytania więcej, bądź czy używa "starego" CSS2 a nie nowej 3... ma wyglądać tak samo i dawać taką samą dostępność czy to jest Safari, Chrome, FF, Opera czy IE

Czy jest coś co można zrobić w CSS3 (a obłsuży to każda z przegladarek - załużmy że IE 9 już jest) a nie można zrobić w CSS2 ?
Zamiast ograniczać dostępność lepiej poszukać w necie gotowych sprawdzonych rozwiązań którem można łatwo wdrożyć.
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Bartek Stańkowski:
Jakby czekać z tym wszystkim do momentu, kiedy IE 6 i 7 znikną z sieci, umarlibyśmy z nudów w tej robocie.

wręcz przeciwnie ... znajdowanie rozwiązać z cyklu niemożliwe w IE jest takie ... brzmi jak wyzwanie ! ;)
Link do wypowiedziLink
Bartek Stańkowski

Bartek Stańkowski front-end & mobile
web developer

Temat: Zaokrąglone rogi - czysty css

Krzysztof Tomasz J.:
Dariusz Pobożniak:
Bartek Stańkowski:

Panowie przodownicy widzę że zachyśneliście się nowością ;)

Ktoś musi, jeśli "stara gwardia" woli zostać w tyle… ;)

... pokażcie mi choć jeden poważny serwis w którym zastosowano CSS3 (np. takie zaokrąglone rogi) ...

A jaki to poważny serwis? O poważnej tematyce, czy z dużą liczbą odwiedzających? :)
Czy np. YouTube ma wystarczająco dużo użytkowników?
Rzućmy okiem do Firebuga: -moz-linear-gradient, -moz-border-radius…
Nie wspominając o porzuceniu wsparcia IE6.
Tak się robi postęp, a nie czekając aż klienci/użytkownicy łaskawie obudzą się, że mamy XXI wiek. :)

Strony robi się po to aby były dostępne dla większości użytkowników i wyglądały możliwie tak samo. Dostępność to większe zyski...

No i powtarzam jeszcze raz, że można korzystać z nowości, a strona i tak będzie wyglądała tak samo u wszystkich. Tylko np. zamiast zaśmiecać sobie HTMLa żeby uzyskać kilka zaokrągleń, ja użyję CSS i JavaScript dla IE. Efekt ten sam, jakość lepsza.
Ale zaokrąglone rogi to nie dostępność.

Klienta nie interesuje czy ten serwis ma jeden obrazek do wczytania więcej, bądź czy używa "starego" CSS2 a nie nowej 3... ma wyglądać tak samo i dawać taką samą dostępność czy to jest Safari, Chrome, FF, Opera czy IE

Ale jeśli ma 10 obrazków mniej i załaduje się szybciej, bo strona jest lżejsza o 50kb, to go interesuje.
A o numerkach nikt klientowi nie mówi.


Czy jest coś co można zrobić w CSS3 (a obłsuży to każda z przegladarek - załużmy że IE 9 już jest) a nie można zrobić w CSS2 ?
Zamiast ograniczać dostępność lepiej poszukać w necie gotowych sprawdzonych rozwiązań którem można łatwo wdrożyć.

Jeszcze raz, nie mówimy o dostępności, bo border-radius i box-shadow to nie dostępność. Layout i treść są czytelne tak samo.

A border-radius dla dobrych przeglądarek plus jakikolwiek dodatek w JS dla IE, to jak najbardziej sprawdzone rozwiązanie (sprawdzam codziennie), a o wiele prostsze niż "stara szkoła".

PS. Ten plus to przypadkiem, ale niech będzie za dyskusję. ;)
Link do wypowiedziLink
Bartek Stańkowski

Bartek Stańkowski front-end & mobile
web developer

Temat: Zaokrąglone rogi - czysty css

Krzysztof Tomasz J.:
Bartek Stańkowski:
Jakby czekać z tym wszystkim do momentu, kiedy IE 6 i 7 znikną z sieci, umarlibyśmy z nudów w tej robocie.

wręcz przeciwnie ... znajdowanie rozwiązać z cyklu niemożliwe w IE jest takie ... brzmi jak wyzwanie ! ;)

Brzmiało tak przez jakiś czas, ale czy nie jest czasami bardziej stratą czasu i pieniędzy, niż wyzwaniem? :) Nie oszukujmy się, to było śmieszne, ale ileż można! :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Zaokrąglone rogi IE FF Safari




Wyślij zaproszenie do
Anuluj