CSS3 transition – co to jest i jak z tego korzystać
CSS3 transition to niedawno wprowadzona możliwość tworzenia płynnego, zmieniającego się w funkcji czasu, parametru zdefiniowanego w CSS. Najprościej będzie to wytłumaczyć na przykładzie. Weźmy pod uwagę nawigacje dowolnej strony, często po najechaniu na dany link zobaczymy np. zmianę koloru tła. Tradycyjnie odbywało się to natychmiastowo, jednak za pomocą Transitions możemy sprawić, aby zmiana ta odbywała się stopniowo. Pozwala to nam na w miarę proste ożywienie naszej strony, bez wykorzystania bibliotek typu jQuery.
W tym miejscu od razu chciałbym przestrzec przed nadmiernym wykorzystaniem tej funkcji, najczęściej strony pełnią funkcje informacyjną i nie jest wymagane, aby cały projekt nam skakał, albo nie daj boże grał.
Jak wygląda funkcja CSS3 transition?
transition : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>Jest to skrócona wersja tej funkcji, podobnie jak w przypadku border, możemy kolejno definiować dane parametry np.: transition-property, transition-duration, transition-timing-function oraz transition-delay.
Opiszmy teraz za co odpowiadają dane funkcje:
- transition-property – odpowiada za to jaką funkcje mamy objąć transition, czyli jeżeli chcemy aby z czasem zmienił się nam kolor tła, to ustawiamy – background-color. Domyślnym parametrem jest all, czyli CSS transition będzie działa na wszystkie obsługiwane funkcję. Oto lista obsługiwanych parametrów.
- transition-duration – czas trwania przejścia.
- transition-timing-function – funkcja czasu, zaprezentowana w formie krzywej beziera. Istnieje 5 zdefiniowanych funkcji gotowych do wykorzystania pod nazwami: ease, linear, ease-in, ease-out, ease-in-out. Możemy także zdefiniować własną funkcję przy pomocy cubic-bezier. Pomocna w tym przypadku może okazać się strona http://cssglue.com/cubic.
- transition-delay – możliwość zdefiniowania opóźnienia całej przemiany.
Wsparcie dla przeglądarek
CSS transtions obsługiwane jest obecnie przez Chrome, Safari, Opera 10.5+, Firefox 4+. Z zapowiedzi wynika, iż wersja 10 IE również ma posiadać ich obsługę, czy w pełnym stopni? Trudno powiedzieć. Oczywiście należy pamiętać o dodawaniu prefilksów: -o-, -moz-, -webkit-, oraz -ms- właśnie ze względu na przyszłość.
Czytaj dalej...Odbicie lustrzane w CSS3 – funkcje transform i gradient
Surfując po Internecie regularnie spotykam strony, wykorzystujące rozmaite możliwość najnowszej wersji CSS. Standardem stają się zaokrąglone rogi, cienie i mniejsze lub większe animacje. Czasami jednak można przy pomocy kombinacji kilku funkcji stworzyć interesujący efekt. Tym razem pokażę jak przygotować prezentację zdjęcia, wraz z delikatnym odbiciem lustrzanym u jego podstawy. Końcowy efekt poniższego artykułu można zobaczyć na przygotowanej stronie demo.
Podstawowy HTML
Zaczniemy jak zwykle od początku, czyli od pokazania wykorzystanego kodu HTML.
<div class="content">
<div class="image">
<img src="http://placekitten.com/100/150" alt="" />
<div><img src="http://placekitten.com/100/150" alt="" />
<div class="fade"></div>
</div>
</div>
<div class="image">
<img src="http://placekitten.com/100/150" alt="" />
<div><img src="http://placekitten.com/100/150" alt="" />
<div class="fade"></div>
</div>
</div>
</div>Dla wygody interesujące nas obrazki umieszczam w jakimś kontenerze, w tym przypadku o nazwie klasy content. Obrazek wraz z jego odbiciem umieszczam w kontenerze o klasie image. Kolejny div odpowiada za nasze odbicie lustrzane, więc w nim umieszczamy drugi raz interesujący nas obraz, który potem za pomocą CSS3 odwrócimy i zasłonimy półprzezroczystym gradientem stworzonym dzięki pustemu divowi o klasie fade.
W tym miejscu warto zauważyć konieczność dublowania tego samego obrazka, co prawda wczyta się on tylko raz, ale w dużych ilościach efekt ten może lekko zwolnić naszą przeglądarkę. Warto więc ostrożnie korzystać z tego rozwiązania.
Czytaj dalej...Tworzymy krok po kroku stronę w HTML5 i CSS3 część 2
W poprzednim artykule przygotowaliśmy i omówiliśmy podstawy dotyczące naszej prostej strony internetowej w HTML5 i wykorzystując możliwości styli CSS3. Opisałem typowy dla nowej wersji HTML Doctype, podałem także moją propozycję struktury i podziału na konkretne elementy naszego projektu graficznego. W poniższym artykule nadszedł czas na szczegółowe kodowanie i ostylowanie poszczególnych części serwisu.
Dla ułatwienia udostępniam:
- podgląd efektu końcowego naszego serwisu
- plik do ściągnięcia zawierające gotowy kod HTML i CSS opisany w tym artykule
Tło i kontener strony
Zaczniemy od najprostszej czynności czyli ustawienie tła i wyśrodkowanego kontenera dla naszego serwisu. Kod odpowiadający za tę część serwisu:
body{
background: #50763b url('../img/background.png') repeat-x;
width: 100%;
font: 12px/20px Verdana, Arial, sens-serif;
color:#fff;
}
#wrapper {
margin: 0 auto;
width:960px;
padding:0 10px;
margin-bottom:20px;
overflow: hidden;
}
W body ustawiliśmy dla całego tła kolor ciemno zielony (#50763b). Dodatkowo wykorzystując stworzony plik background.png, o wymiarach zaledwie 1 px na 250 px, dodamy górny jasno zielony gradient. Aby obrazek wyświetlał się na całej szerokości naszego serwisu stosujemy właściwość repeat-x. Ustawiamy także nasza podstawową czcionkę, kolor, jej wymiary i szerokość odstępów między liniami.
Nasz kontener ustawiamy na szerokość 960px, która obecnie jest standardowym i polecanym wymiarem szerokości strony. Warto jednak zwrócić uwagę, iż powoli wartość ta się zwiększa i nie jest błędem skorzystać np. z 1100px. Korzystamy także ze standardowej metody środkowania naszego kontenera poprzez ustawienie automatycznych marginesów.
Czytaj dalej...Tworzymy krok po kroku stronę w HTML5 i CSS3 część 1
Artykuł ten jest pewnego rodzaju kontynuacją, do wpisu Projekt graficzny prostej strony internetowej krok po kroku. Tym razem zajmiemy się cięciem przygotowanego wcześniej layoutu do HTML5 i dodatkowo wykorzystamy także możliwości CSS3.
Informacje wstępne
Naszym podstawowym zadaniem jest przygotowanie kodu HTML i styli CSS do wcześniej przygotowanego projektu graficznego. Zaznaczam jednak, że strona nie musi wyglądać identycznie we wszystkich przeglądarkach, jeżeli użytkownicy starszych przeglądarek nie zobaczą np. zaokrąglonych rogów, czy półprzezroczystego tła nic strasznego się nie stanie. Najważniejsze jest, aby strona była czytelna, a brak pewnych funkcjonalności nie wpłynął na ogólną użyteczność serwisu.
Przygotowanie podstawowych elementów
Ponieważ zamierzamy wykorzystać HTML5, zarówno podstawowy kod strony HTML jak i elementy struktury będą wyglądać trochę inaczej. Podstawowy kod od którego zaczniemy wygląda następująco (plik index.html):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Bieszczady</title>
<link rel="stylesheet" href="style/reset.css" />
<link rel="stylesheet" href="style/style.css" />
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
// tu kod naszej strony
</body>
</html>Od razu rzuca się w oczy bardzo krótki doctype, oraz dwa dodatkowe skrypty umieszczone w komentarzach warunkowych. Plik html5.js pozwala na używanie nowych tagów dostępnych w HTML5 w przeglądarkach, które ich nie obsługują. IE7.js to z kolei bardzo przydatna biblioteka „naprawiająca” starsze wersje przeglądarki Internet Explorer. Poprawia wiele problemów z HTML i CSS oraz umożliwia prawidłowe wykorzystywanie przezroczystych plików PNG. Ponadto dodajemy plik reset.css, czyli standardowy plik resetujący i zerujący domyśle wartości poszczególnych przeglądarek:
Czytaj dalej...Narzędzia CSS3
Od momentu kiedy zacząłem wykorzystywać CSS3 przy kodowaniu projektów graficznych, praca ta stała się dla mnie o wiele przyjemniejsza. Na fali ogromnej popularności powstało wiele ciekawych narzędzi i generatorów, które znacznie usprawniają pracę z nowymi funkcjami dostępnymi od wersji trzeciej. W tym artykule podzielę się narzędziami, które najczęściej wykorzystuje w swojej pracy i które uważam obecnie za najbardziej przydatne.
CSS3 Generator
Jedno z najlepszych obecnie narzędzi, które w bardzo prosty sposób pozwala tworzyć gotowe fragmenty kodu CSS3. Wystarczy tylko wybrać interesującą nas właściwość i wypełnić pojawiający się formularz. Otrzymamy podgląd działania naszych parametrów oraz interesujący nas kod CSS3. Do wyboru mamy praktycznie wszystkie najpopularniejsze właściwości:
- border-radius,
- box-shadow,
- text-shadow,
- rgba,
- columns-gap i coumn-count,
i kilka innych, które polecam przeglądnąć. Brakuje tylko gradientów, ale jedynym powodem, dlaczego nie dodano ich do tej strony jest to, iż ktoś już stworzył rewelacyjne wręcz narzędzie do ich generowania.
Ultimate CSS Gradient Generator
Doskonałe narzędzie pozwalające stworzyć wielostopniowe gradienty, działaniem przypominające ustawianie gradientów w produktach Adobe. Generowany kod uwzględnia praktycznie wszystkie przeglądarki w tym częściowo IE. Dodatkowo mamy dostępną bazę predefiniowanych gradientów, które możemy wykorzystać w swoich projektach.
Czytaj dalej...