4 Komentarzy
Tagi: -webkit-,
css,
css3,
ease,
przejścia,
rotate,
scale,
transform,
transformacje,
transformations,
transitions
W związku z komentarzem pod ostatnim wpisem postanowiłem posłuchać się rady czytelnika i urozmaicić otrzymany efekt. W poniższym przykładzie postaram się zamienić animację w jQuery na animację wykonaną w czystym CSS3.
CSS3 Transitions – Przejścia
Do wykonywania animacji w CSS3 wykorzystuje się tzw. przejścia (ang. transitions). Pozwalają one na zmianę stanu elementu w sposób płynny, tworząc tym samym ciekawy element animacji.
W opisywanym przykładzie wykorzystałem kilka udogodnień CSS3: obracanie (rotate), skalowanie (scale) oraz wspomniane wcześniej przejścia. Dokładniejszy opis tych ostatnich wymaga osobnego artykułu dlatego nie będę teraz tego szerzej rozwijał. Podsyłam jedynie link do dokumentacji, gdzie opisane są wszystkie rodzaje przejść dla przeglądarki Mozilla. (więcej…)
Niedawno pewien czytelnik bloga napisał do mnie z prośbą o wyjaśnienie jak wykonać w CSS coś podobnego do efektu z obrazka obok. Opisałem mu wtedy z grubsza jak to zrobić ale myślę, że warto szerzej rozwinąć ten temat.
Opisywana technika polega na nałożeniu na obrazek, lub inny element strony, bloku tekstu. Przykład takiego rozwiązania można zobaczyć chociażby na stronie głównej Wirtualnej Polski. Jak widać efekt ten jest dosyć popularny i stale powiększa się grupa jego sprzymierzeńców.
W poniższym prostym tutorialu postaram się dodać animację bloku z tekstem aby urozmaicić końcowy efekt. A więc — do dzieła! (więcej…)
Zaczynając pisać tego bloga postanowiłem sobie, że nie będę pisał o sprawach prywatnych. Tym razem postanowiłem jednak złamać trochę swoją regułę. Chciałem się z Wami podzielić moimi planami oraz przemyśleniami na temat Csstips.pl.
Władza nad czasem
Jedna mała zmiana już została poczyniona. Jak może zauważyliście usunąłem przy każdym wpisie datę jego napisania. Stwierdziłem, że artykuły, które piszę powinny być aktualne cały czas, bez względu na to czy zostały napisane dziś czy kilka lat temu. Dlatego będę się starał aktualizować swoje wpisy jeśli zajdzie taka potrzeba. W wyniku tego, mam nadzieję, uda mi się stworzyć ciekawy zestaw artykułów. (więcej…)
Własność, o której chcę Wam powiedzieć może nie jest wyjątkowo ambitna, ale na pewno ułatwi wielu osobom życie tworząć stronę internetową. Oczywiście nie każdy projekt będzie wymagał jej użycia, ale zgaduje, że znaczna ich część.
A mówię tutaj o własności word-wrap, która została dodana do specyfikacji CSS3. W przeciwieństwie do wielu innych nowości CSS3, jak zaokrąglone rogi czy przejścia (transitions), jest ona obsługiwana przez wszystkie dostępne dziś przeglądarki. Oznacza to, że możecie jej smiało używać już dziś. Co najlepsze, nawet IE w wersji 5 obsługuje tą własność.
Dziś będzie troszkę z innej beczki. Czerwiec i lipiec toczyły się dla mnie strasznie szybko, dlatego nie mogłem znaleźć czasu, żeby coś tutaj napisać. Przyszły miesiąc zapowiada się dużo lepiej i obiecuję, że zacznę znowu pisać tutaj regularnie.
Póki co chciałem się z Wami podzielić świetnym materiałem, który znalazłem w sieci. Jest to pokaz slajdów zawierający ok. 100 stron z informacjami na temat tego, w jaki sposób pisać kod CSS, aby był on przejrzysty i łatwy do utrzymania. Dzięki poradom tam zawartym, Wasz kod z pewnością stanie się dużo lepszy. Całość niestety w języku angielskim.
Przeglądając Csstips w wersji komórkowej przypomniałem sobie o pewnym sposobie, na który kiedyś trafiłem i użyłem go właśnie w tej wersji strony. Chodzi mi o wyświetlanie sformatowanego kodu przy pomocy tagu <pre>. Domyślnie wartością elementu white-space jest: “pre” . Oznacza to, że kod zawarty we wspomnianym tagu jest formatowany dokładnie tak jak został zapisany, razem ze wszystkimi białymi znakami. Jeśli szerokość jednej linii kodu jest większa niż szerokość rodzica, to tekst będzie wyjeżdżał poza obszar bloku. W ekstremalnych sytuacjach długie linie będą powodować pojawianie się dodatkowego poziomego scrolla na stronie.
W urządzeniach komórkowych, w których najwygodniej jest przeglądać strony w jednym kierunku, taka sytuacja nie jest pożądana. Dlatego aby tego uniknąć wystarczy podmienić domyślną wartość white-space dla elementu <pre>:
pre {
white-space:pre-wrap;
}
Powyższy styl spowoduje zachowanie wielokrotnych spacji oraz tabulatorów, oraz znaku nowej linii. Dodatkowo jeśli linia kodu nie zmieści się w elemencie rodzica, zostanie rozdzielona i przeniesiona do następnej linii.
Kiedyś, dawno temu, do przeglądania Internetu był wykorzystywany jedynie komputer. Na szczęście tamtej chwili minęło sporo czasu i wiele się w tej kwestii pozmieniało. W ostatnim czasie liczba użytkowników Internetu korzystających z urządzeń mobilnych rośnie w ogromnym tempie. Obecnie strony internetowe można również przeglądać na urządzeniach takich jak: telewizor, projektor, palmtop czy też różnego rodzaju urządzenia przystosowujące strony dla osób niepełnosprawnych.
Jak można się łatwo domyślić, ta sama strona będzie inaczej wyświetlana na każdym z tych urządzeń. Ponadto wiele elementów strony okazuje się być zupełnie zbędnymi w niektórych urządzeniach. Dobrym przykładem może być menu, które jest nieodłącznym elementem każdej witryny ale po wydrukowaniu staje się zupełnie bezużyteczne i zajmuje niepotrzebnie miejsce.
Doskonałym rozwiązaniem tego problemu są typy @media, które zostały zaprezentowane w dokumentacji CSS 2.1 i są nieustannie rozwijane jako zapytania @media. (więcej…)
Często podczas tworzenia strony internetowej pojawia się konieczność podmiany fragmentu tekstu przez obrazek. Czasem może to być logo naszej strony ( i odnośnik do strony głównej), czasem musimy podmienić standardowy tekst jakąś ładniejszą czcionką w postaci obrazka.
Doskonałym rozwiązaniem takiego problemu jest Image Replacement. Jest to technika, która pozwala nam podmienić fragment tekstu przy pomocy background-image. Wraz z rozwijającymi się umiejętnościami tworzenia stron internetowych powstało wiele różnych sposobów na uzyskanie takiego efektu. Niektóre z nich wymagają dodatkowego kodu (markapu) dlatego nie jestem co do nich przekonany. Poniżej sporządziłem listę kilku technik na jakie udało mi się natrafić. (więcej…)
Dodatkowe komentarze warunkowe w HTML są obsługiwane wyłącznie przez przeglądarkę Internet Explorer. Są one zazwyczaj wykorzystywane aby można było zastosować osobne style wyłącznie dla tej przeglądarki. Komentarze te są dostępne od IE5 włącznie. Mogą one także wyłapywać wersje przejściowe, takie jak IE 5.5 – co jest rzadziej używane.
W Polsce przeglądarka IE6 znacząco traci na popularności w ostatnim czasie, więc użyteczność tego typu komentarzy spada. Jednak istnieją nadal osoby, które ją wspierają lub sytuacje, które wymagają użycia dodatkowych stylów dla nowszych wersji tej przeglądarki.
Aby uzyskać efekt anaglifu w profesjonalnej fotografii należy nałożyć na siebie dwa jednakowe zdjęcia, z których jedno jest wykonane z lekkim poziomym przesunięciem. Technika ta daje złudzenie trójwymiarowości zdjęć, a prawidłowe oglądanie zdjęcia jest możliwe jedynie poprzez specjalne okulary.
Podobny efekt można uzyskać w łatwy sposób w CSS nakładając na siebie dwie warstwy tekstu i nadając im odpowiedni kolor i przezroczystość. Uzyskany wynik może nie będzie do końca trójwymiarowy ale z pewnością będzie ciekawy i pozwoli na dodanie orginalnego wyglądu dla nagłówków na swojej stronie ;-). (więcej…)
