GoldenLine
Zaloguj się

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Bartek Stańkowski:
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… ;)

stara gwardia ma spore doświadczenia i te 4 nowości z CSS3 łyknie w ciągu 3 minut bez kompotu ;)
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Dopoki CSS3 nie bedzie standardem a udzial przegladarek, ktore go nie obsluguje nie spadnie do 15%, to nie ma sensu sie w to bawic i marnowac czasu.

Wole zrobic dobry kod i tak, zmeczyczyc sie i zrobic to dodajac diva PRZED i PO niz kombinowac ;) Rzadko widze by box mial tylko zaokraglone rogi, zwykle ma jeszcze jakies bordery, cienie i cholera wie co jeszcze, wiec sila rzeczy png sprawdzi sie tutaj lepiej. I nie trzeba robic jednej rzecz, na dwa sposoby. Na css3 przyjdzie czas a ludzie beda sie w glowe walic i pytac "jeezzuu.. jak oni to kiedys robili?" - mowiac o zaokraglonych rogach czy innych podstawach ;)

Grunt zeby kod byl lekki i przyjemny, dzialal wszedzie a strona wygladala praktycznie TAK SAMO - bo nie rozumiem jak mozna wyjsc z zalozenia "ooo w ie beda kwadratowe najwyzej i nic sie nie stanie" <- taki detal czasami to kwestia zycia i smierci ;) A jesli mozecie sobie pozwolic na taka ignoracje - to moge tylko pozazdroscic ;)
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

<div> topowy, z png,
<div> z contentem i background-colorem
<div> bottomowy z png

+ dla IE - pngFIX.

wszędzie działa, zawsze działa. kodu mało, a png to kwestia paru kb. nad czym tutaj zrzędzić. modemów już nikt nie ma.
Link do wypowiedziLink
Krzysztof Krakowiak

Krzysztof Krakowiak Software Developer

Temat: Zaokrąglone rogi - czysty css

Czy ktoś może testował to http://fetchak.com/ie-css3/ ?
Link do wypowiedziLink

konto usunięte

Temat: Zaokrąglone rogi - czysty css

Jestem również za używaniem CSS3.
border-radius, text-shadow, box-shadow to niektóre właściwości wspierane już przez wszystkie przeglądarki z wyjątkiem IE.

Niestety, ale przez IE webmasterzy zostają w tyle, ponieważ (przynajmniej u mnie tak było) nie wdrażają się w wiele nowości, ze względu na brak całkowitego wsparcia przez liczące się przeglądarki. Przychodzi jednak taki czas, że siada się do projektu który nie wspiera już IE6 i okazuje się, że za wiele to nie daje, bo nie ma się nawyków korzystania choćby z pseudoklas innych niż :hover :visited i :activ dla linków.
Link do wypowiedziLink
Grzegorz Wysocki

Grzegorz Wysocki Mam web do pewnych
spraw ;)

Temat: Zaokrąglone rogi - czysty css

Krzysztof Krakowiak:
Czy ktoś może testował to http://fetchak.com/ie-css3/ ?

Krzysztofie, jest to trochę ulepszona (wybajerowana) wersja tego co podałem kilka postów wyżej. Z tego co zdążyłem podpatrzeć w kodzie, to autor ten sam, podstawa działania ta sama. Natomiast wybajerzenie polega na w miarę udanej próbie dodania obsługi box-shadow i text-shadow. Tych dwóch ostatnich nie testowałem, natomiast z zaokrąglaniem rogów przy pomocy 'trzonu' tego rozwiązania nigdy nie miałem problemów.Grzegorz Wysocki edytował(a) ten post dnia 14.04.10 o godzinie 16:51
Link do wypowiedziLink
Krzysztof Krakowiak

Krzysztof Krakowiak Software Developer

Temat: Zaokrąglone rogi - czysty css

http://www.modernizr.com/ fajny projekt, ale np pod chromem menu się sypie, trochę gorzej wygląda na androidzie w przeglądarce xScope GL (jedna z szybszych).

widzę że CSS3 to w każdej przeglądarce jest implementowany w/g własnego "widzimisi" autorów.

Poza tym jak CSS3 przyjmują przeglądarki mobilne?
Link do wypowiedziLink
Dariusz Sikorski

Dariusz Sikorski Front-End Web
Developer, Ux/Ui
Designer

Temat: Zaokrąglone rogi - czysty css

Pozwolę sobie nieco odkopać temat, jako, że od czasu dyskusji nieco zmienił się asortyment rozwiązań.

Nie polecam rysowania krawędzi przez PNG24bit. Wystarczy "czysty CSS3".
.round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

po dołączeniu http://css3pie.com/ właściwość border-radius: 10px; działa również na IE6+
Zatem mamy support dla: Opery, Chrome'a, Safari, Firefoxa, IE6,7,8,9.
Żadnej dodatkowej grafiki, za to z jednym plikiem css3pie.htc / .js.

Moja strona działa na takim zestawie i polecam go każdemu, kto mierzy w przeglądarki nie-mobilne (nie miałem okazji testować na ipodach, androidach, and so on...).

przynajmniej do czasu, aż Mozilla i Webkit nie uznają swoich zaokrągleń za "oficjalnie", nie można zrezygnować z prefixów -webkit- i -moz-.
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Zaokrąglone rogi - czysty css

Też jestem tego samego zdania co Dariusz. Idziemy do przodu, nowoczesne przeglądarki akurat border-radius ładnie renderują, do ie jest CSS3_PIE. Nawet na dinozaura(ie6) to działa(tylko chyba pierw trzeba, zaakceptować "niebezpieczną zawartość". Później już pamięta ie że może). I tyle. Zostawmy zaokrąglone rogi w PNG w 2000 roku. Jeżeli już musimy to zróbmy hacka na ie bo na FF, O czy Safari IMO to nie ma sensu.
Link do wypowiedziLink
Bartłomiej Jończy

Bartłomiej Jończy iOS / Java EE
Developer

Temat: Zaokrąglone rogi - czysty css

Andrzej Winnicki:
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.

Zgadzam się z tym w zupełności. Nowoczesne technologie są fajne, ale kiedy przyjdzie rozwścieczony klient, który powie ci, że u niego rogi są kwadratowe, a przecież ma nowoczesną przeglądarkę, bo standardową z windows 7, to nie będzie tłumaczenia. Komercja panowie, komercja. Takie realia :)
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: Zaokrąglone rogi - czysty css

Fakt, na tą chwilę najlepszym sposobem na crossbrowsing jest wycięte tło gradientowe, .png z rogami i cieniami. Jednak z drugiej strony jak widzę że muszę mieć 10 plików gradientowych bo każdy jest inny, a boxy też nie mają na całej stronie takich samych zaokrągleń no to widząc 15 obrazków tylko do tego (nie biorąc pod uwage spritesów) no to mnie szlag trafia. Ostatnio przerzuciłem się na css3, ale gradient nie działa już np w ff <3.5 (pewnie działa dopiero od 3.6), to samo w IE 7 wiec tak czy siak muszę dodać alternatywny plik z gradientem. Rogi w IE 7 i 8 nie działają wiec tez znowu jakiś .htc albo .js albo dodatkowy html. Więc wychodzi na to że na tą chwilę używając css3, tak na prawdę dodaje sobie roboty jeżeli chce zachować crossbrowsing. Nie wiem szczerze mówiąc jak to wygląda na komórkach, ale aż boje się pomyśleć :)

Tak na prawdę wszystko zależy od tego co się robi, jeżeli jest to zwykła wizytówka przy której klient idzie w nowości i nie wymaga IE 6,7 i starych wersji ff,opery itp no to można się bawić w css3 itp, ale przy rozbudowanych stronach gdzie poprawne wyświetlanie wszędzie jest niezbędne no to albo zrobimy css3 i będziemy się męczyć 2x tyle, albo sobie ułatwimy i zrobimy raz i jedynie zhackujemy trochę IE 6 a będzie dobrze wszędzie.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Zaokrąglone rogi IE FF Safari




Wyślij zaproszenie do
Anuluj