5 zaawansowanych przykładów wykorzystania CSS3
CSS3 na dobre zawitało do naszych stron i aplikacji internetowych. W moich projektach staram się regularnie korzystać z możliwość jakie daje mi najnowsza wersja CSS. Zwłaszcza sporym ułatwieniem były podstawowe funkcje, jak zaokrąglenia rogów, cienie i przezroczystość. Znacząco usprawniły i przyspieszyły kodowania stron internetowych. Warto jednak zapoznać się z bardziej zaawansowanymi możliwościami CSS3, które z czasem będzie warto implementować w swoich serwisach. Oto 5 ciekawych tutoriali dotyczących zaawansowanych funkcji CSS3.
Wykorzystanie funkcji filter w CSS3
Bardzo interesujący poradnik, krok po kroku przedstawiający działanie funkcji filter. Całość została zaprezentowana w formie przykładowego portfolio. Efekt jest rewelacyjny. Zachęcam do zapoznania się z artykułem i analizą dostępnego kodu.
Czytaj dalej...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, sans-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...
