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...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...Szablon artykułu w HTML
Kodowanie HTML to nie tylko odpowiednie pocięcie projektu graficznego, ale także przygotowanie i ostylowanie treści serwisu. Zainspirowany bardzo ciekawą stroną HTML ipsum i występującym tam elementem zwanym „Kitchen sink”, przygotowałem sobie pewnego rodzaju szablon HTML dla treści na stronie. Podstawowym założeniem było zamieszczenie w artykule jak najwięcej przydatnych znaczników HTML, i tak w kodzie znalazły się:
- nagłówki od h1 do h6
- elementy wyróżniające strong i em
- wygląd linków
- trzy rodzaje list ul i ol wraz z zagnieżdżeniami, oraz listę definicji
- obrazki, jedne większy na całą szerokość tekstu, oraz dwa mniejsze do opływania tekstu
- tabela
- cytat, indeks górny i dolny
- znacznik code i pre
Poniżej przedstawiam kod. Mam nadzieję, że się Wam przyda:
Czytaj dalej...
