Linkdump #60: HaTeeMeL5.
Ze względu na uczestnictwo w niedawnej konferencji onGameStart czas na podjęcie tematyki HTML5 w serii Linkdump. Już dawno nie było nic na ten temat na moim blogu, także w ramach naprawy tego błędu zapraszam do lektury niniejszego wpisu.
YouTube: Pobieranie miniatury filmu / wideo.
Praca programisty nie zawsze polega na rozwiązywaniu zaawansowanych problemów programistycznych, czy też tworzeniu złożonych algorytmów przeliczających niewyobrażalne zbiory danych. Czasem potrzebujemy zwyczajnych, prostych, czasem wręcz trywialnych rozwiązań dla problemów naszych klientów. Ostatnio zetknąłem się z jednym z takich problemów - pobieraniem miniaturek do filmów wstawianych poprzez element <iframe> YouTube'a. Zapraszam do lektury krótkiego i treściwego wpisu na ten temat. ;]
[MiniBlog] Efekt paralaksy w CSS.
Jeśli chodzi o kreatywne wykorzystanie niektórych banalnych, zdawałoby się, technologii takich jak CSS, czy [X]HTML, ludzie chyba nigdy nie przestaną mnie zadziwiać. Opisywane wcześniej "dzieła" ze stron Toki Woki, The389, czy też to, co zamierzam Wam dzisiaj pokazać świadczy o tym, że nawet z najprostszych narzędzi mogą powstać genialne produkcje. Widząc po raz pierwszy tego typu rzeczy mówimy: "E tam, zwykły kawałek kodu", by zaraz potem otworzyć usta z pełnym zdumienia: "ale... ale jak to?".
Tak też zrobiłem dzisiaj, widząc efekt paralaksy stworzony wyłącznie przy użyciu HTMLa i CSSa. Zresztą, oceńcie sami, czy to, co zobaczyłem warte jest uwagi. Cały przykład opiera się na bardzo intensywnej eksploracji atrybutu background-position, dzięki któremu możemy obserwować przesuwanie się elementów całego obrazu.
Linki
[0] http://www.romancortes.com/blog/css-3d-meninas/ - opisywana strona.
[Miniblog] Zegarek cyfrowy wykonany w języku JavaScript przy użyciu elementów div.
Parę dni temu wygrzebałem w sieci kolejny przykład ciekawego zastosowania [X]HTMLa, CSSa i JavaScriptu, otóż pewien programista postanowił wykonać zegarek cyfrowy, w którym elementy cyfr ["belki"] są wyświetlane za pomocą nie mieszczących się w swoich kontenerach elementów <div>, a konkretnie za pomocą pasków przewijania które tworzą się przez rozciąganie ich w kontenerach. Co tu dużo mówić - trzeba zobaczyć. ;] Dla wnikliwych - polecam uruchomienie wtyczki WebDeveloper i wybranie opcji "Zaznacz" > "Zaznacz elementy blokowe", widać wtedy dokładnie jak to wszystko działa, bez patrzenia do kodu można podziwiać geniusz tego pomysłu.
Linki:
[0] http://toki-woki.net/p/scroll-clock/ - zegarek "cyfrowy". ;]
[1] http://toki-woki.net/p/scroll-clock/gallery/ - galeria "zegarków" w różnych przeglądarkach.