[html, css] Gradient eliptyczny

[html, css] Gradient eliptyczny
Dryobates
  • Rejestracja:prawie 23 lata
  • Ostatnio:około 6 lat
0

Jak zrobic gradient w pionie wykorzystujac html i css wiem. Jak poziomy takze. Ale... czy ktos z was wie, co zrobic, aby otrzymac eliptyczny gradient? Tzn. jedna barwa np. w lewym gornym rogu i promieniscie w kazda strone stopniowo przechodzi w inna barwe?

Niestety SVG odpada, bo jest za slabo obslugiwane przez przegladarki ;(. Filtry IE oraz Flash tak samo odpadaja (ale juz z troche innych powodow :) ).


Jest jeszcze jeden błąd :)
Unix is user friendly. It's just very particular about who it's friends are.
LI
  • Rejestracja:ponad 20 lat
  • Ostatnio:ponad 20 lat
0

Z ciekawości spytać: jak zrobić te poziome/pionowe gradienty? Nie znam żadnej własności css ani html, która by się tym zajmowała...


Konto do usunięcia
Dryobates
  • Rejestracja:prawie 23 lata
  • Ostatnio:około 6 lat
0

Z ciekawości spytać: jak zrobić te poziome/pionowe gradienty? Nie znam żadnej własności css ani html, która by się tym zajmowała...

Jezeli chesz np. gradient od lewej do prawej, na szerokosci 760px to tworzysz taki gradient w programie graficznym o wysokosci 1px.
W CSS dajesz:
body {
background: url(sciezka_do_pliku.jpg) repeat-x fixed;
}
I juz :)
Dla pionowego robisz analogicznie, tylko odwrotne proporcje dla obrazka i repeat-y.


Jest jeszcze jeden błąd :)
Unix is user friendly. It's just very particular about who it's friends are.
LI
  • Rejestracja:ponad 20 lat
  • Ostatnio:ponad 20 lat
0

No to teraz mnie rozłożyłeś... Myślałem, że znasz jakiś tajemny sposób, co by przy użyciu tylko css i html można było gradienciki robić :). W takim razie: żeby zrobić gradient eliptyczny, robisz taki w programie graficznym i wstawiasz jako tło. Trudne? :D


Konto do usunięcia
Dryobates
  • Rejestracja:prawie 23 lata
  • Ostatnio:około 6 lat
0

Trudne? :D

Tak. Bo nie stala mam tylko szerokosc okna, ale nie wysokosc i nie wiem jak duza grafike musze przygotowac. Moglbym teoretycznie przygotowac jakiegos giganta, ale zalezy mi na tym, by strona byla w miare lekka.


Jest jeszcze jeden błąd :)
Unix is user friendly. It's just very particular about who it's friends are.
piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0

Troszke mnie to zainteresowalo, choc jest to nie wykonalne to moze
zadowoli Cie pokretne rozwiazanie z filtrami dzialajace takze pod Mozillami :)

http://piechnat.iglu.cz/download/Css%20Filters%20-%20Test.html


LI
  • Rejestracja:ponad 20 lat
  • Ostatnio:ponad 20 lat
0

To jeżeli chcesz to zrobić zgodnie ze standardami, to inaczej niż przez bezpośrednie wstawianie a się nie da. Może coś takiego będzie w CSS3...


Konto do usunięcia
piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0

To jeżeli chcesz to zrobić zgodnie ze standardami, to inaczej niż przez bezpośrednie wstawianie a się nie da. Może coś takiego będzie w CSS3...

hmmm.... a czy to o czym mowisz to nie beda przypadkiem dzilania majce na celu wstawienie sobie odnosnika do validatora css na stronie ? bo jesli tak, to wez pod uwage ze validator html potrafi podac pozytywny wynik dla stron w XHTML 1.1 z naglowkiem text/html :-D


LI
  • Rejestracja:ponad 20 lat
  • Ostatnio:ponad 20 lat
0

Walidator jest przydatny, ale jak każde narzędzie - nie jest doskonały. poza tym nie ma czegoś takiego jak znaczek walidatora - jest znaczek, który mówi, że strona jest zgodna ze standardem... nie z walidatorem. Czy potrzebujesz naprawdę walidatora, żeby sprawdzić, czy nie popełniłeś żadnych błędów gramatycznych/rzeczowych w np. wypracowaniach? Słowniki też sprawdzą tylko ortografię.

BTW, gdzie jest napisane, że dokument xhtml 1.1 musi być przesyłany z mime application/xhtml+xml? Z tego co pamiętam, to w jakimś dokumencie w3 spotkałem się tylko ze słówkiem should.


Konto do usunięcia
piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0

Walidator jest przydatny, ale jak każde narzędzie - nie jest doskonały.

Właśnie to napisałem w poprzednim poście, milo ze się ze mną zgadzasz... :-*

poza tym nie ma czegoś takiego jak znaczek walidatora - jest znaczek, który mówi, że strona jest zgodna ze standardem... nie z walidatorem.

Czy ja pisałem o znaczku ? napisałem odnośnik do validatora CSS czyli hiperłącze prowadzące do strony z validatorem CSS. Czy to takie skomplikowane ?

Czy potrzebujesz naprawdę walidatora, żeby sprawdzić, czy nie popełniłeś żadnych błędów gramatycznych/rzeczowych w np. wypracowaniach? Słowniki też sprawdzą tylko ortografię.

O co Ci chodzi ?

Cos czuję ze nie zrozumiałeś dokładnie treści mojego poprzedniego postu wiec spróbuje Ci go wyjaśnić:

Wydaje mi się (dlatego użyłem formy pytającej) że jeśli coś jest niezgodne ze standardami to gdzie byś tego nie wstawił (czy to w tagu czy w nagłówku czy osobny pliku) to i tak nadal będzie niezgodne ze standardami. Z drugiej strony pomyślałem sobie skąd Ci to mogło przyjść do głowy ? Czy masz jakieś konkretne informacje ? Później jednak przypomniało mi się że validator CSS tak funkcjonuje tzn nie sprawdza poprawności w tagach i skojarzyłem to z twoją wypowiedzią. Czy teraz już rozumiesz moje pytanie ?

BTW, gdzie jest napisane, że dokument xhtml 1.1 musi być przesyłany z mime application/xhtml+xml? Z tego co pamiętam, to w jakimś dokumencie w3 spotkałem się tylko ze słówkiem should.

hmm.... w FAQ :-D

http://quiris.klub.chip.pl/w3c/xhtml-faq.htm#mime11


Dryobates
  • Rejestracja:prawie 23 lata
  • Ostatnio:około 6 lat
0

Troszke mnie to zainteresowalo, choc jest to nie wykonalne to moze
zadowoli Cie pokretne rozwiazanie z filtrami dzialajace takze pod Mozillami :)

http://piechnat.iglu.cz/download/Css%20Filters%20-%20Test.html

Piechnat: jestes moim guru htmlowym. To jest genialne. Ale jak z dzialaniem pod innymi?

Co do sporu dot. xhtml to ta strona moze byc jak najbardziej zgodna z xhtml. To czego uzywa tam piechnat, to jedynie css niezgodny ze standardem, ale xhtml mozna z tego zrobic jak najbardziej. Zawartosc i wyglad :)


Jest jeszcze jeden błąd :)
Unix is user friendly. It's just very particular about who it's friends are.
LI
  • Rejestracja:ponad 20 lat
  • Ostatnio:ponad 20 lat
0

Właśnie to napisałem w poprzednim poście, milo ze się ze mną zgadzasz...

Odebrałem to jako ironię (zwłaszcza przez tę buźkę), że niby program do sprawdzania błędów jest wadliwy, bo nie wychwytuje ich wszystkich. Ganz egal, na jedno wychodzi.

Czy ja pisałem o znaczku ? napisałem odnośnik do validatora CSS czyli hiperłącze prowadzące do strony z validatorem CSS. Czy to takie skomplikowane ?

Znaczek, odnośnik, wszystko jedno. I tak chodzi o pokazanie, że strona jest zgodna ze standardami.

Poza tym, moim zdaniem należy unikać wszystkich takich kruczków (takich jak te filtry) wykorzystujących błędy w walidatorach - bo nie tędy droga. Przyjdzie nowa przeglądarka, nie zrozumie ich i pomysł nie zadziała. Myślałem, że właśnie chcesz takie błędy wykorzystać - zasugerowałem się Twoim przykładem, w którym były m.in. IE'owe filtry, do tego ten nieironiczny post z buźką wrednie naśmiewającą się.

Dzięki za link do tego spolszczonego faq. Czytałem to kiedyś po angielsku (chyba) i zgubiłem je gdzieś.


Konto do usunięcia
piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0

Dryobates:

Ale jak z dzialaniem pod innymi?

Wszystkie browsery które mam na składzie to kupują
IE 6, Opera 7, Mozilla 1.7, Phoenix 0.5, FireFox 0.9, Netscape 7
tyle że z tym gradientem nie jest zbyt dobrze, trzeba trochę pokombinować z nasyceniem kolorów i tłem a z uwagi na pół-przezroczystość i tak nie osiągnie się właściwych barw...

Liorithiel:

Trochę jestem znużony tą dysputą ale jako że mam dziś wojowniczy nastrój to Ci odpiszę :-P

Znaczek, odnośnik, wszystko jedno.

Nie wszystko jedno :-[ bo prawisz mi morały na temat tego że "nie ma czegoś takiego jak znaczek walidatora". Oczywiście, że nie ma tylko, że ja napisałem "odnośnik do validatora" a coś takiego istnieje - czyli przekręciłeś moje słowa na potrzeby swojego wyimaginowanego argumentu. Myślałeś że nie zauważę i przyznam Ci rację ?

Poza tym, moim zdaniem należy unikać wszystkich takich kruczków (takich jak te filtry) wykorzystujących błędy w walidatorach - bo nie tędy droga.

To bardzo dobrze, że teraz tak uważasz ale cały spór zaczął się od tego że zasugerowałeś mi użycie takiego kruczku wykorzystującego błędy validatora i co najważniejsze stwierdziłeś że w tedy strona będzie zgodna ze standardami natomiast to że validator nie wyświetla błędów nie oznacza że strona jest poprawna więc poczułem powinność uświadomienia tego tobie...

Jeszcze raz przypomnę twoje słowa żeby nie było że ja przekręcam:

To jeżeli chcesz to zrobić zgodnie ze standardami, to inaczej niż przez bezpośrednie wstawianie a się nie da.


0

Nie wszystko jedno

A litera nie jest znaczkiem (znakiem graficznym)? A odnośnik nie jest "znaczkiem", który ma oznaczać, że strona jest zgodna? OK, może i nie jest. Zostawmy to, bo nie ma sensu o tym dyskutować/kłócić się.

A co jest niewłaściwego w zgodnym ze standardami wstawianiu:
w treść pliku *.[x]html gdzieś na początku sekcji <body />?

piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0

A litera nie jest znaczkiem (znakiem graficznym)?

co próbujesz udowodnić ? że znasz już alfabet :-D bo jakoś nie kumam...

A odnośnik nie jest "znaczkiem", który ma oznaczać, że strona jest zgodna?

na prawdę nie dociera do ciebie ? miałeś czelność poprawiać mnie pisząc:

nie ma czegoś takiego jak znaczek walidatora - jest znaczek, który mówi, że strona jest zgodna ze standardem...

natomiast ja napisałem odnośnik do validatora - jest coś takiego jak odnośnik do validatora - po kliknięciu przenosi on do strony z validatorem, dociera ?

oskarżasz mnie o błędy których nie popełniłem, próbujesz mi wmówić że napisałem coś co według ciebie nie istnieje ale ja tego nie napisałem, jasne ? :-[ :-[ :-[ [diabel]

A co jest niewłaściwego w zgodnym ze standardami wstawianiu:
w treść pliku *.[x]html gdzieś na początku sekcji <body />?

nie rozchodzi się o z-index tylko o filtry, jesteś niepoczytalny, masz sklerozę czy strugasz wariata ? :-D


LI
  • Rejestracja:ponad 20 lat
  • Ostatnio:ponad 20 lat
0

Ok, z tym znaczkiem faktycznie przesadziłem. Przepraszam.

A co do reszty... mi też już się nie chce dyskutować na ten temat. Chyba nie bardzo się zrozumieliśmy. Nie wiem po co w ogóle stosować przezroczystość (IE'owe filtry, gecko'we -moz-opacity, operowe opacity), jeżeli można po prostu na tym rysunku namalować gradient. Zapisany w odpowiednim formacie na pewno nie będzie zbyt duży. Odpada przy okazji problem niekompatybilności.


Konto do usunięcia
piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0

Ok, z tym znaczkiem faktycznie przesadziłem. Przepraszam.

przeprosiny przyjete [cygaro]

jeżeli można po prostu na tym rysunku namalować gradient

w tym jednym Ci musze przyznac racje, przez moja kosmiczna :-D wizje dwoch lekkich pol-przezroczystych obrazkow ktore rozciagniete wzajemnie sie uzupelnia umknelo mi ze prosciej jest zrobic jeden ciezszy kwadrat z ukosnym gradientem i go rozciagnac, to jednak dlatego ze moim priorytetem byla oszczednosc zer i jedynek...


Dryobates
  • Rejestracja:prawie 23 lata
  • Ostatnio:około 6 lat
0

Koniec. Ktos tu za duzo smieci w MOIM temacie :P
Co do gradientow to nie moge umiescic 1 obrazka, bo nie wiadomo jakie beda rozmiary strony. Z rozwiazania piechnata ostatecznie tez nie skorzystam, bo okazalo sie, ze gradient poziomy najlepiej wyglada. Inna sprawa, ze ten gradient eliptyczny troszke spowalnia wyswietlanie stronki.
Nie mniej mozna spokojnie w FAQ umiescic ten przepis, bo jest ciekawy.

A znaczek walidatora gdzies i tak wstawie jezeli maszynka mi wywali, ze jest zgoodne :P

/* ma ktos ochote mnie poprawiac? [diabel] */


Jest jeszcze jeden błąd :)
Unix is user friendly. It's just very particular about who it's friends are.
WA
  • Rejestracja:ponad 21 lat
  • Ostatnio:ponad 12 lat
  • Postów:501
0

Zaraz...
To tutaj http://piechnat.iglu.cz/download/Css%20Filters%20-%20Test.html jest gradient eliptyczny? :|
Bo u mnie normalny, poziomy (ie 6)...

TH
  • Rejestracja:około 23 lata
  • Ostatnio:około 13 lat
0

Zaraz...
To tutaj http://piechnat.iglu.cz/download/Css%20Filters%20-%20Test.html jest gradient eliptyczny? :|
Bo u mnie normalny, poziomy (ie 6)...

Eliptyczny, tylko jego środek jest w lewym górnym rogu.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.