Komentarze do: Nakładające się na siebie tła przy przewijaniu strony w CSS3

Autor: Love Quotes | Rick Quotes

Love Quotes | Rick Quotes — Sun, 07 Feb 2016 15:03:39 +0000

Title

[… ]very handful of internet websites that eventually turn out to be thorough under, through each of our viewpoint are without doubt very well worthy of checking out out[… ]…

Autor: Travsko

Travsko — Sat, 20 Dec 2014 07:06:00 +0000

W odpowiedzi do qwertuMMM. Z niecierpliwością zapoznam się z Twoimi projektami, które nie są dla Ciebie przygnębiające...

Autor: Css | Pearltrees

Css | Pearltrees — Sun, 16 Nov 2014 11:37:24 +0000

[…] jQuery CSS3 image hover effects for you. All these hover effects work wonder for the web design. Nakładające się na siebie tła przy przewijaniu strony w CSS3 | WEBroad.pl. Od jakiegoś czasu zauważyłem (pewnie nie tylko ja) rosnący trend na budowanie witryn […]

Autor: qwertuMMM

qwertuMMM — Wed, 17 Sep 2014 00:15:00 +0000

Osobiście nie przepadam za tym efektem. Mówiąc delikatnie, ta forma prezentacji treści jest męcząca i irytująca. A obecnie mamy czasy, że jak na coś jest jakiś trend to nagle taką samą koncepcją jesteśmy atakowani na znacznej części projektów.
Jeszcze parę lat temu faktycznie projekty cechowała jakaś indywidualność, a obecnie mamy do czynienia ze stronami na jedno kopyto.
Przeglądam dość często galerie topowych stron i szczerze mówiąc niewiele z tych projektów mnie zauroczyło.
Obecnie wiele osób wykorzystuje frameworki pokroju Foundation czy Bootstrap, klepiąc te projekty jak maszyna oparte na jednym schemacie.

Strasznie to przygnębiające, bo strony internetowe przestają się sensownie wyróżniać. Można użyć frameworków ale niech kwestia grafiki będzie jednak trochę bardziej oryginalna niż można zaobserwować obecnie.

A sądząc po komentarzach, znowu będzie wysyp projektów opartych na tym efekcie.
Strasznie ciężko znaleźć jakieś fajne projekty stron nie będące powielaniem trendów., które straszliwie spłaszczają tą dziedzinę.

Autor: Mr.Mr

Mr.Mr — Thu, 14 Aug 2014 17:06:00 +0000

W odpowiedzi do Robert. Na forum zapraszamy (niestety tymczasowo niedostępne 0_0 - będziemy naprawiać). Jak już będzie można pisać to podaj w pytaniu od razu kod, strony. Może ktoś pomoże.

Autor: Robert

Robert — Thu, 14 Aug 2014 16:22:00 +0000

Witajcie. Jestem zielony i dopiero zaczynam przygodę z językiem HTML i CSS i mam do Was pytanie dlaczego mój tekst pomimo, że skopiowałem kod ze strony nie jest wyśrodkowany? W separatorze jest wszystko ok, ale text-align w content-cie już nie przynosi żadnych rezultatów i tekst wychodzi poza ekran.
Pozdrawiam.

Autor: Comandeer

Comandeer — Mon, 11 Aug 2014 14:59:00 +0000

Właśnie się napatoczyłem na artykuł o prawdziwym (zwolniony scroll, perspektywa i te sprawy) parallaxie w CSS – http://blog.keithclark.co.uk/pure-css-parallax-websites/
Co prawda nie jest tak prosty, jak technika przedstawiona tutaj, ale razem stworzyłyby świetne rozwiązanie w duchu PE ;)

Autor: Comandeer

Comandeer — Sat, 26 Jul 2014 11:48:00 +0000

W odpowiedzi do Michał Załęcki. >Rozmawiamy o tym konkretnym przykładzie Zawsze myślałem, że egzemplifikacja służy rozpoczęciu dyskusji o ogólnych mechanizmach w nim użytych. Jeśli zawęzimy dyskusję do samego przykładu to można powiedzieć jedynie "Wow" :| Nie mówię o jakichś hipotetycznych ograniczeniach, ale moich własnych doświadczeniach przy projektowaniu takich a nie innych aplikacji. A HSTS będzie coraz szerzej stosowany w związku z przechodzeniem na SPDY/HTTP 2.0. Polecam spojrzeć na kod takiego FB, Twittera czy choćby porneLa - nagłówek Strict-Transport-Security jest dołączony, by zawsze wymuszać optymalne połączenie przez szybki serwer SPDY. To nawet nie jest kwestia "ograniczenia" a właśnie poprawnego użycia feature z fallbackiem dla starszych browserów. >Poza tym istnieje zawsze 'unsafe-inline' przy CSP, więc "Twój kod nie będzie działał" jest dużym skrótem myślowym, gdyż jest to kwestia konfiguracji. No to nie rozumiem po co ktoś w takim wypadku używa CSP, który służy do ograniczenia ataków XSS a my zostawiamy najlepszą furtkę dla XSS. Ba, jest to nawet napisane w samej specce: http://www.w3.org/TR/CSP11/#sec-directives To tak jakby mieć alarm w domu, ale zostawić drzwi do domu otwarte… Niby działa, ale jednak coś jest nie tego. Tobie Twój sposób działa, a mnie nie, bo mam inne wymagania, które opisałem w poście (wyraźnie napisałem, że chodzi mi o aplikacje, które tworzę, więc nie rozumiem skąd atak…). Wolisz swój sposób, to proszę bardzo - używaj go. Wracając jeszcze do części o deklaratywnym określeniu vs konkretnej implementacji. Wsadzenie CSS-a bezpośrednio do HTML uniemożliwia szybką zmianę sposobu animacji/nadawania tego tła. W chwili, gdy mamy to jako atrybut, przepisanie tego np na animację w canvas jest kwestią dołożenia odpowiedniego skryptu, bez nawet ruszania HTML. Przy wielu aplikacjach takie działanie jest bardzo pożądane (ba, jest to idea stojąca za całym konceptem WebComponents).

Autor: Mr.Mr

Mr.Mr — Sat, 26 Jul 2014 10:33:00 +0000

Prosto i szybko. Plus za brak JS ;)

Autor: Michał Załęcki

Michał Załęcki — Sat, 26 Jul 2014 10:15:00 +0000

W odpowiedzi do Comandeer. Rozmawiamy o tym konkretnym przykładzie, a nie aplikacjach dotkniętych różnymi ograniczeniami. W taki sposób można się w nieskończoność przerzucać, że "moja aplikacja musi działać na IE8, więc cover odpada, a filtrów też nie mogę, bo nasz świetny preprocesor go nie ogarnia, a raw odpada bo za siedmioma górami i lasami jest gdzieś w naszej dokumentacji, że tak jest źle" etc.

Autor: Comandeer

Comandeer — Sat, 26 Jul 2014 10:09:00 +0000

W odpowiedzi do Michał Załęcki. Jest pewna różnica pomiędzy deklaratywnym określeniem co ma być prezentowane a narzuceniem konkretnej implementacji tej prezentacji. Poza tym Twój kod nie będzie działał z aplikacjami, które tworzę, bo jest niezgodny z zasadami CSP - style inline i inline'owy JS są z automatu wycinane. Dla aplikacji HSTS CSP jest wymogiem, więc użycie klasy + [data-back] jest o wiele sensowniejsze niźli style inline.

Autor: Michał Załęcki

Michał Załęcki — Sat, 26 Jul 2014 09:56:00 +0000

W odpowiedzi do Comandeer. Chciałbyś dodawać do np. "data-back" url elementu do ustawienia go jako tło? To tylko dublowanie już istniejącego rozwiązania. Zamiast data-back="bg1.jpg" użyć style="background-image: url('bg1.jpg')". Klasa .bg jest wtedy wcale niepotrzebna. Demo: http://demo.michal.zalecki.pl/maskedbg2/

Autor: Michał Smoliński

Michał Smoliński — Fri, 25 Jul 2014 20:08:00 +0000

Spodziewałem się czarowania JSem, a tu taka niespodzianka. Bardzo pożyteczny artykuł. Inspirujący do dalszego kombinowania z jakże popularnym ostatnio tematem stron typu „neverending story”. Ostatnio trafiłem na „JQuery Scrollorama”, przykład z tego artykułu idealny dla sprawdzenia przy okazji możliwości tego pluginu.

Autor: Comandeer

Comandeer — Fri, 25 Jul 2014 12:48:00 +0000

A ja tak okołotematowo: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Co do samego efektu – wygląda to nieźle. Nigdy mi dotąd nie przyszło do głowy, żeby wykorzystać do tego background-attachment.

Bardzo fajnie by było, gdyby przeglądarki wreszcie obsługiwały składnię attr(data-back, url) – wtedy zamiast tworzyć style dla każdego tła osobno, można by zrobić uniwersalne…

Autor: Marcin Bagiński

Marcin Bagiński — Fri, 25 Jul 2014 11:10:00 +0000

dawno dawno nie budowałem to dla mnie inspiracja…. mighty webroad

Autor: Tomasz Piątek

Tomasz Piątek — Fri, 25 Jul 2014 11:06:00 +0000

W odpowiedzi do Michał Kortas. to taki pseudo paralax ;> fajnie wygląda gdy tło jest stałe a na są nałożone np. krople z wodą, czy coś innego i przewija się to wolniej niż cała strona :)

Autor: Michał Kortas

Michał Kortas — Fri, 25 Jul 2014 10:50:00 +0000

W odpowiedzi do Piotr Nalepa. Dzięki. Tak, zaciekawił mnie parallax jakiś czas temu, ale postanowiłem przygotować coś bez JSa :)

Autor: Piotr Nalepa

Piotr Nalepa — Fri, 25 Jul 2014 10:43:00 +0000

Dobry tekst. Dobrze wyjaśnione. Użyłbym skróconej wersji zapisu dla background, ale jest ok :)
PS. Wyczuwam inspirację jednym z moich wpisów na blogu :)

Autor: Dariusz Mydlarz

Dariusz Mydlarz — Fri, 25 Jul 2014 10:22:00 +0000

Krótko i na temat, ekstra!