Jeśli Ktoś się z Was dodatkowo zajmuje webmasteringiem (lub czymś podobnym) to tym Kolegom chciałbym zadedykować całkiem sprawną bibliotekę do obsługi grafiki dwuwymiarowej CSS3 możliwą do wykorzystania w najnowszych standardach programowania witryn www, którą ostatnimi czasy udało mi się stworzyć (JLCG = J.L. CSS Graphics).
Na początek taka uwaga. Nie chciałbym nikogo absolutnie zniechęcić do bawienia się w projektowanie grafiki 2d czy 3d w oparciu o możliwości jakie daje obecnie CSS3 czy nawet webGL. Niemniej rzeczy, które opiszę poniżej wymagają pewnej wprawy i znajomości takich spraw jak: dołączanie bibliotek javascript do projektu, podstawowej znajomości składni CSS, javascript (przynajmniej znajomości wywoływania funkcji czy konstruowania zmiennych) oraz lekkiej znajomości biblioteki jQuery (właściwie chodzi tu jedynie o wiedzę jak ją ściągnąć i dołączyć do projektu).
Poniżej opiszę stosowanie już samej biblioteki JLCG mojego autorstwa, bez wnikania w tłumaczenie składni javascript, czy innej (na co być może kiedyś indziej przyjdzie pora).
Cel stosowania biblioteki:
- projektowanie grafiki stacjonarnej 2d jako np. tła lub elementów strony (np. przyciski, elementy zaliczane do tzw. background-image)
- uproszczenie pisania kodu css na rzecz użycia kodu jQuery/Javascript oraz w/w biblioteki
Możliwości jakie (póki co) udostępnia biblioteka:
- rysowanie prostokątów (wypełnionych jednolitym kolorem lub cieniowanych z wyborem rodzaju cieniowania)
- rysowanie zaokrąglonych narożników (1/4 koła - tak samo - albo wypełnione jednym kolorem, lub cieniowane),
w przypadku narożników jest jeszcze możliwość wyboru czy "tło" rysowanego narożnika ma być transparentne czy nie
Teraz po krótce kroki umożliwiające zastosowanie tej biblioteki w praktyce:
1. Utworzyć dowolny projekt witryny HTML gdzie będzie plik index.php lub index.html i możliwość stosowania HTML 5, CSS 3, oraz biblioteki jQuery (biblioteka jQuery jest wymagana do działania biblioteki JLCG.js).
2. Uworzyć plik javascript, w którym będzie się budowało grafikę przy użyciu biblioteki jlcg.js - np. utworzyć plik grafika.js w tym samym katalogu co plik index.php
3. Podlinkować (zainkludować) plik grafika.js do pliku index.php (czyli do głównego pliku projektu). Oczywiście w tym momencie zakładam, że reszta potrzebnych plików takich jak np. jQuery-min.js jest już podlinkowana (zaincludowana).
4. Utworzyć plik style.css (jeśli jeszcze nie został utworzony) i stworzyć w nim identyfikator (lub klasę) o jakiejś wiadomej nazwie (potem ta nazwa będzie użyta w określonym tagu HTML, np. w tagu DIV). Okey... Niech to będzie identyfikator o nazwie "mojagrafika1". W pliku style.css powinien wyglądać on mniej więcej tak:
Kod: Zaznacz cały
#mojagrafika1 {
transform-style: preserve-3d;
transform: translateZ(4px);
position: absolute;
}Parametr "position: absolute;" nie jest konieczny, ale na pewno będzie łatwiej "ustawić" położenie projektowanej grafiki, co oczywiście później można dopracować zmieniając parametr position na np. relative.
5. Zakładamy, że nasz plik index.php wygląda mniej więcej tak:
Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery.js"></script>
<script src="jlcg.js"></script>
<script src="grafika.js"></script>
</head>
<body>
<div id="mojagrafika1">
</div>
</body>
</html>Jak widać w ciele (body) strony został już utworzony tag <div> z identyfikatorem "mojagrafika1" - tożsamym z identyfikatorem "#mojagrafika1", który istnieje także w pliku style.css
6. Ostatni krok to jest utworzenie zmiennej javascript odpowiedzialnej za narysowanie jakiejś grafiki. Do tego celu użyjemy pliku grafika.js i w tymże pliku utworzymy zmienną w np. taki sposób (zawartość pliku grafika.js):
Kod: Zaznacz cały
// jakiś narożnik
var naroznik = new jlcg('#mojagrafika1');
naroznik.jlcg_angle_or_stoppoint = "bottom-left";
naroznik.jlcg_shape = "square";
naroznik.jlcg_width = "40.06%";
naroznik.jlcg_height = "30.02%";
naroznik.jlcg_pos_00_x = "50.11%";
naroznik.jlcg_pos_00_y = "30.34%";
naroznik.jlcg_corner_edge_type = "smooth";
naroznik.jlcg_transparent_bgnd = "true";
naroznik.jlcg_gradient_type = "gr-rad";
naroznik.jlcg_front_color = "rgba(0,0,20,1) 50%, rgba(0,0,255,1) 75%, rgba(0,0,20,1)";
naroznik.DrawCorner();
delete naroznik; // uwolnienie pamięci cache przeglądarki ze zbędnych danych gdy grafika jest już widoczna
// prostokąt
var prostokat = new jlcg('#mojagrafika1');
prostokat.jlcg_gradient_type = "gr-lin";
prostokat.jlcg_angle_or_stoppoint = "0deg";
prostokat.jlcg_front_color = "rgba(146,80,19,1) 0, rgba(255,219,185,1) 50%, rgba(146,80,19,1) 100%";
prostokat.jlcg_width = "40.53%";
prostokat.jlcg_height = "20.82%";
prostokat.jlcg_pos_00_x = "30.52%";
prostokat.jlcg_pos_00_y = "10.84%";
prostokat.DrawRectangle();
delete prostokat; // uwolnienie pamięci cache przeglądarki ze zbędnych danych gdy grafika jest już widoczna
Jeżeli wykonaliśmy wszystko poprawnie (lub ja nie popełniłem jakiegoś błędu tutaj w opisie) to po kliknięciu (odświeżeniu) pliku index.html powinien pokazać się mniej/więcej taki -nic szczególnie nie mówiący- obrazek strony:
Zdaję sobie sprawę, że nie napisałem wszystkiego, ale w zależności od zainteresowania tematem i szczegółowością pytań będę starał się odpowiadać na bieżąco, bo nie sposób od razu wszystko napisać idealnie.
W załączniku załączam minimalny projekt realizujący powyższy opis.
Wszystkie pliki biblioteki jak również nieskompresowany plik źródłowy dostępny jest na moim koncie git-hub:
https://github.com/jjlawniczak/jlcg
Zachęcam do testowania i proszę o podzielenie się swoimi spostrzeżeniami.
Pozdrawiam! j23