Jak donosi serwis CSS3.info, John Daggett pracownik Mozilli udostępnił build wersji przeglądarki Firefox 3.1 z obsługą @font-face. Jeśli ktoś nie wie obsługa font-face pozwala na pisanie dowolną czcionką na stronie bez konieczności stosowania grafik, czy rozwiązań typu sIFR.

Aktualnie dostępne są buildy na Windowsa i Mac, użytkownicy Linuxa muszą jeszcze poczekać. John Daggett dołączył również własny komentarz co działa a co jeszcze szfankuje. Świetny artykuł czym jest i jak używać @font-face znajduje się na stronie A List Apart.

Całość jest bardzo prosta i sprowadza się do zaimportowania czcionki w następujący sposób:

@font-face {
  font-family: "Corbel";
  src: url(corbel.ttf) format("truetype");
}

Jak widać podajemy nazwę czcionki, którą będziemy się posógiwać w arkuszu, następnie podajemy link do czcionki, oraz określamy jej typ/format.

Następnie pozostaje już tylko użyć czcionki w znany wszystkim sposób:

p { font-family: "Corbel", sans-serif }

Jeśli ktoś pokusi sie o sciągnięcie builda z obsługą @font-face może obejrzeć moje demko.

Google jak zwykle popisał się ciekawym obrazkiem okolicznościowym, oczywiście jak zawsze grafika wpleciona w logo giganta. Tym razem grafika z okazji pierwszego dnia szkoły…

Szczerze jestem szczęśliwy, że mnie ten obrazek już nie dotyczy i mam jeszcze miesiąc wakacji, który pewnie minie jak z bicza strzelił, jednak lepsze to niż nic!

Powodzenia dla wszystkich uczniaków… i pamiętajcie nie siedzcie za dużo przed komputerem!

Dnia 30 sierpnia 2008 roku miało miejsce zakończenie VI Grand Prix Myśliborza w Tenisie Mężczyzn, całość zakończyła by się tydzień wcześniej, jednak pogoda nie dopisała i ostatnie z cyklu 8 spotkań zostało przełożone.

Ostatnie z 8 spotkań jak to najczęściej bywa wyłoniło zwycięzcę całego Grand Prix którym został ponownie pan Jerzy Warachowski. Na zakończenie po odebraniu nagród z jego ust można było usłyszeć:

Zdobyciem tej statuetki kończę grę w tenisa na punkty [...]

Co prawda pan Jerzy w taki lub podobny sposób od 3 lat zapewnia że w następne wakacje nie zobaczymy go na turniejach z cyklu Grand Prix (w roli zawodnika oczywiście), jednak nikt nie chce w to wierzyć aby był on w stanie zrezygnować z tej wspaniałej rywalizacji jaka ma miejsce na kortach OSIR’u.

Cała ceremonia zakończenia odbyła się w obecności władz Ośrodka Sportu i Rekreacji oraz zastępcy Burmistrza, który to zapowiedział, iż w przyszłym roku turnieje z cyklu Grand Prix prawdopodobnie będą odbywać się na większej ilości kortów (aktualnie są dwa). Oby tylko na zamiarach rozbudowy się nie skończyło (puk, puk, puk).

Koniecznie trzeba dodać, że tenis w Myśliborzu rozwija się dosyć dynamicznie, gra coraz więcej osób (może stąd zamiary władz o dobudowaniu kortów), jeszcze 2-3 lata temu na turniejach pojawiało się nie więcej niż 10 osób, teraz liczba osób dochodzi do 20.

Tenis i Ja

W tegorocznym Grand Prix pojawiłem się na każdym z 8 turnieji i trzeba powiedzieć, że trzymałem niezwykle równą formię. Siedem razy zająłem 4 i raz 3 miejsce. W ogólnej klasyfikacji również uplasowałem się na 4 miejscu. Ogólnie grało mi się dobrze, nie jest to już ta gra co kiedyś (brak regularnej gry), jednak ciągle udaje mi się czerpać przyjemność z uprawiania tego sportu.

Wyniki

Pierwsza piątka Grand Prix Myśliborza w Tenisie 2008

1. Jerzy Warachowski
2. Wiesław Pikosz
3. Mariusz Drzażdżewski
4. Krzysztof Wolniak
5. Zbigniew Cielecki

Co dalej

Nie jest to koniec tenisowych wrażeń w tym roku, mają się odbyć jeszcze dwa turnieje jedno dniowe “O Puchar Dyrektora” i “O Puchar Burmistrza”. Z tego co udało mi sie dowiedzieć pierwszy z nich ma się odbyć 14 września.

Na koniec

A na koniec oczywiście zdjęcie mojej pułki z tenisowymi zdobyczami…

Od lewej strony patrząc:

• VII miejsce 2003 rok (I GP)
• V miejsce 2004 rok (II GP)
• II miejsce 2006 (O Puchar Dyrektora)
• II miejsce 2006 (IV GP)
• IV miejsce 2007 (V GP)
• IV miejsce 2008 (VI GP)

Kliknij zdjęcie żeby powiększyć :)

W artykule tym postaram się w jak najbardziej przystępny sposób przedstawić aspekty właściwości background-position. Omówię różne sposoby sterowania pozycją tła oraz przedstawię różnice pomiędzy nimi. Prototyp wartości dla właściwości background-position jest dosyć skomplikowany dlatego wpis ten ma charakter wspólnej lekcji w której pokazuję Ci co masz zrobić i omawiam jak to działa.

Trochę teorii

Wartości dla właściwości background-position mogą być określane na 3 sposoby:

• słowa kluczowe
• wartości procentowe
• wartości liczbowe

Pozycję tła możemy ustalać dla elementów blokowych lub zastępowanych, domyślna wartością dla właściwości background-position jest: 0% 0%.

Przykłady, przykłady, przykłady!

W przykładach będę używał akapitu z tekstem:

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lobortis gravida velit. Nunc feugiat. Maecenas commodo varius libero. Donec tellus tellus, pharetra nec, egestas a, elementum ac, ante. Curabitur auctor urna sed risus. Mauris nec orci. Nulla pharetra pellentesque libero. Suspendisse sodales augue in massa interdum lobortis. Cras purus. Vivamus ipsum elit, convallis vel, dictum ut, egestas at, nisi. Vestibulum auctor. Fusce eleifend consectetuer libero. Morbi non libero eget lacus rhoncus lobortis. Mauris ut quam. Mauris cursus nunc ut quam. Suspendisse potenti. Aenean ipsum sapien, fringilla a, sodales nec, lacinia a, sapien. Cras interdum malesuada leo. Quisque ultrices, ante at ornare gravida, lacus nibh sodales enim, eget fermentum pede felis et sapien.

oraz prostych styli dla niego:

p {
   /* style czysto estetyczne */
   font: 0.8em Verdana, Arial, sans-serif;
   padding: 15px; border: 1px dashed red;
   width: 500px; margin: 0 auto;
   text-align: justify;
 
   /* Style najważniejsze dla wpisu */
   background-image: url(shape.png);/* Obrazek tła */
   background-repeat: no-repeat; 	  /* tło bez powtarzania */
   background-position: 0% 0%;       /* tym będziemy manipulować */
}

Jako tło dla akapitu będę używał dwóch obrazków:

oraz

Proponuje pobrać (pobierz!) przykładowe pliki i razem ze mną wprowadzać zmiany aby zaobserwować jak wpływają one na pozycję tła. Wpis ma charakter lekcji w której pokazuję na przykładach jak co działa.

Słowa kluczowe

Na początek zapoznajmy się z ustawianiem pozycji tła przy pomocy słów kluczowych. Dostępne słowa kluczowe to:

• center
• top
• bottom
• right
• left

Zazwyczaj występują one w parach, na przykład:

background-position: top left;

Nie jest wymogiem aby słowa kluczowe występowały parami. W przypadku wystąpienia tylko jednego słowa kluczowego uznawane jest, że drugim słowem kluczowym jest center.

W związku z tym, że na rynku przeglądarek ciągle jest różnie w przypadku podawania dwóch słów kluczowych ważnym jest aby najpierw podawać pozycję w poziomie a jako drugie słowo kluczowe pozycję w pionie. Dlatego należy pisać left top, a nie top left. Warto o tym pamiętać!

Proponuję Ci zmieniać wartości dla właściwości background-position (w pobranym przez Ciebie wcześniej pliku html, który umieściłem w archiwum do pobrania na początku artykułu) elementu p na takie jak pokazałem na listingu poniżej i obserwować jak zmienia się pozycja tła.

background-position: left top;
background-position: center top;
background-position: top;
background-position: right top;
background-position: left center;
background-position: left;
background-position: center center;
background-position: center;
background-position: right center;
background-position: right;
background-position: left bottom;
background-position: center bottom;
background-position: bottom;
background-position: right bottom;

Są to wszystkie możliwe pozycje tła jakie można ustawić przy użyciu słów kluczowych. Należy zauważyć, że często jedno słowo kluczowe daje taki sam efekt jak dwa.
Słowa kluczowe pozwalają w szybki sposób rozmieści tło po narożnikach i środkach (poziom, pion) wybranego elementu.

Należy również zauważyć, że tło jest umieszczane (a przynajmniej powinno być) od wewnętrznej krawędzi obramowania, czyli nie występuje pod obramowaniem.

Wartości procentowe

Wartości procentowe działają podobnie do słów kluczowych jednak pozwalają bardziej precyzyjnie wybrać gdzie ma znajdować się tło. W przypadku wartości procentowych pierwsza z nich określa położenie w poziomie druga w pionie, np.:

background-position: 20% 100%;

Co spowoduje umieszczenia tła obrazku na dole akapitu i w 1/4 jego szerokości, patrząc od strony lewej do prawej.
W przypadku podania tylko jednej wartości np.:

background-position: 20%;

20% zostanie przypisane do wartości poziomej a pionowa zawsze będzie przyjmować wartość 50%.
Czyli zapisy:

background-position: 20%;
background-position: 33%;
background-position: 77%;
background-position: 100%;

są równoważne z:

background-position: 20% 50%;
background-position: 33% 50%;
background-position: 77% 50%;
background-position: 100% 50%;

Należy zauważyć, że w przypadku ustawienia 100% 100% prawy dolny róg obrazka tła zostanie umieszczony w prawym dolnym rogu elementu, w naszym wypadku w prawym dolnym rogu akapitu.
Analogicznie przy wartościach 0% 0% lewy górny róg obrazka tła zostanie umieszczony w lewym górnym rogu akapitu.

Jako ćwiczenie proponuję Ci dobranie takich wartości procentowych, które będą odpowiadały słowom kluczowym z początku artykułu.

Wartości długości

Dla przykładów z wartościami długości proponuję zmienić obrazek tła na drugi o nazwie prostokaty.png:

p {
   /* wcześniejszy kod */
   background-image: url(prostokaty.png);
   /* dalszy kod*/
}

Jeśli chodzi o wartości długości należy wspomnieć o kilku sprawach:

1. Podane długości interpretowane są jako przesunięcie w stosunku do lewego górnego rogu elementu (w naszym wypadku do lewego górnego rogu akapitu)
2. Przesuwany jest górny lewy róg obrazka tła
3. Od CSS 2.1 można łączyć wartości procentowe z wartościami długości
4. Wartości długości mogą być ujemne
5. Najpierw podajemy wartość poziomą następnie wartość pionową

Ad. 4 W wartościach procentowych wartości ujemne także są dozwolone jednak nie ma pewności, że wszystkie przeglądarki obsługują je poprawnie, zazwyczaj ustawienie ujemnych wartości procentowych jest dosyć nieprzewidywalne (zachęcam do eksperymentowania!).

Przy ustaleniu pozycji tła, przy użyciu wartości długości ważna jest znajomość rozmiarów tła obrazka, choć to zależy od tego co chcemy uzyskać.

Załóżmy że chcemy aby obrazek znajdował się przy prawej krawędzi i 20 pikseli od górnej krawędzi akapitu. Najłatwiej byłoby napisać:

background-position: 100% 20px;

Jednak jeśli chcielibyśmy użyć tylko wartości długości musimy zebrać następujące informacje:

• Szerokość akapitu: 500px
• Szerokość dopełnień: 2x 15px
• Szerokość obramowań: 2x 6px

Co w sumie daje 542 piksele. Jest to całkowita szerokość pudełka w tak zwanym modelu pudełkowym, o którym postaram się napisać w osobnym artykule.
Wymiary tła obrazka to 200×100 pikseli. Tak więc jeśli odejmiemy od całkowitej szerokości akapitu (542) szerokość tła obrazka (200) otrzymamy wartość 342 która pozwoli nam umieścić tło przy prawej krawędzi akapitu. Sprawdź sam!

background-position: 342px 20px;

Dla utrwalenia rozpatrzmy jeszcze takie przykłady:

background-position: 123px 12px;

Takie ustawienie spowoduje, że lewy górny róg obrazka będzie odsunięty o 123 piksele w prawo i 12 pikseli w dół od lewego górnego narożnika akapitu.

background-position: 50px 1234px;

Taki zapis spowoduje że lewy górny róg obrazka będzie odsunięty o 50 pikseli w prawo i 1234 pikseli w dół od lewego górnego narożnika akapitu. Nasz akapit zawiera niewiele tekstu, a przynajmniej nie tyle aby jego wysokość osiągnęła 1234px dlatego też obrazek tła będzie niewidoczny.

Wartości ujemne

Na początek ustawmy wartość background-position na 0px 0px, aby ustawić tło obrazka w lewym górnym narożniku akapitu.

Załóżmy, że chcemy aby w lewym górnym rogu był widoczny tylko prostokąt z numerem 4. Jak się zapewne domyślasz musimy wypchnąć pozostałe 3 prostokąty o numerach 1, 2, 3 poza akapit (w lewo i do góry) aby to zrobić musimy użyć wartości ujemnych. Potrzebne nam będą również rozmiary małych prostokątów. Każdy z prostokątów ma rozmiary 100×50 pikseli, tak więc aby widoczny był tylko czwarty prostokąt musimy lewy górny narożnik tła obrazka przesunąć względem lewego górnego rogu akapitu o 100 pikseli w lewo i 50 pikseli do góry.
Domyślasz się już jak będą wyglądać wartości dla naszego tła? Jeśli nie przeanalizuj jeszcze raz wszystko to co napisałem odnośnie wartości długości, ważne jest abyś to zrozumiał. Mam jednak nadzieję, że zrozumiałeś po pierwszym przeczytaniu i jak pewnie wiesz deklaracja będzie wyglądała następująco:

background-position: -100px -50px;

Podsumowanie

Mam nadzieję, że wyjaśniłem Ci choć w pewnym stopniu jak możesz sterować położeniem obrazka w tle. W artykule Menu w CSS - lista, obrazek i background position wykorzystałem ujemne wartości dla pozycji tła aby uzyskać efekt podmiany tła po najechaniu na odnośnik. Zapraszam do lektury!

W poniższym artykule zaprezentuję jak za pomocą nieuporządkowanej listy i jednego obrazka stworzyć całkiem przyjemnie wyglądające i ładnie działające poziome menu na naszą stronę.

A tak mniej więcej (w zależności od wybranej czcionki) będzie prezentować się nasze menu:

Na początku była lista

Całość zaczynamy od stworzenia ładnego semantycznego kodu xHTML czyli od listy nieuporządkowanej:

<div id="menu">
<ul>
	<li><a href="1.html">Jeden</a></li>
	<li><a href="2.html">Dwa</a></li>
	<li><a href="3.html">Trzy</a></li>
</ul>
</div>

Mamy ładną, trzy elementowi nieuporządkowaną listę otoczoną kontenerem (div) z identyfikatorem o nazwie menu, aby było łatwiej się do niej odwoływać.

Położyć listę

Naszym celem jest utworzyć menu poziome, więc elementy listy muszą być ułożone jeden za drugim a nie jak jest to domyślnie jeden pod drugim. Możemy do tego celu wykorzystać właściwość float dla elementów listy, czyli dla li. Nadamy im wartość left, spowoduje to że każdy element listy będzie opływany przez inne elementy, jak ja to nazywam lista się położy. Dodatkowo usuniemy wypunktowanie listy oraz dodamy klika elementów stylistycznych dla elementu div#menu, tak aktualnie prezentuje się nasz kod CSS:

#menu {
   font-size: 14px;
   font-family: fantasy;
}
 
#menu ul {
   list-style-type: none;
   padding: 0; margin: 0;
}
 
#menu li {
   float: left;
   padding: 0; margin: 0;
}

Omówmy zaprezentowany kod. Dla elementu o identyfikatorze menu, czyli naszego kontenera listy ustawiamy czcionkę o rozmiarze 14px oraz krój czcionki na rodzinę fantasy - zabieg ten jest czysto akademicki - nie polecam stosowania czcionek z rodziny fantasy, na co dzień we własnych projektach.

Dalej poprzez selektor potomka (#menu ul) odwołujemy się do naszej listy. Likwidujemy wszelkie odstępy (dopełnienia i marginesy) oraz usuwamy wypunktowanie listy. Dalej ponownie wykorzystujemy selektor potomka (#menu li) aby odwołać się do elementów listy, usuwamy z nich wszelkie odstępy oraz nakazujemy aby elementy te dały się opływać poprzez nadanie właściwości float wartości left. Oto efekt naszej dotychczasowej pracy.

Podstawiamy grafikę

W moim przykładzie wykorzystam taką oto grafikę:

Każdy element naszego menu będzie miał takie oto tło. Wygląda ono dosyć nietypowo i związane jest ze sposobem zachowania się naszego menu. Już teraz mogę powiedzieć, że po najechaniu kursorem na menu bordowe tło przycisku będzie zastępowane żółtym, uzyskamy to poprzez przesunięcie pozycji tła. Jeśli nie bardzo rozumiesz, za chwilę wszystko stanie się jasne.

Modyfikujemy wygląd odnośników

Naszą grafikę będziemy umieszczać jako tło elementu a czyli odnośnika. Aby cały obszar obrazka był aktywny i dał się klikać musimy wprowadzić kilka modyfikacji dla elementu a. Element musi stać się elementem blokowym, musimy określić wymiar tego elementu w naszym wypadku będzie on miał szerokość obrazka oraz połowę wysokości obrazka. Dodajmy więc trochę kodu CSS:

#menu li a:link, #menu li a:visited {
   display: block;
   width: 168px; /* szerokosc grafiki */
   height: 36px; /* polowa wysokosci obrazka z grafika */
   line-height: 36px;
   background: transparent url(bg.png) no-repeat;
   color: #fff;
   text-align: center;
   text-decoration: none;
}

Powyższy kod opisuje wygląd odnośnika w menu, w stanie normalnym (pseudoklasa link), oraz odwiedzonym (pseudoklasa visited).

Od góry zaczynając najpierw sprawiamy, że odnośniki stają się elementami blokowymi. Następnie ustalamy szerokość i wysokość. Właściwość line-height powoduje wycentrowanie napisu na zakładce w pionie. Dalej ustawiamy naszą grafikę jako tło przycisku. Reszta zabiegów jest prosta. Nadajemy biały kolor dla tekstu, środkujemy tekst oraz usuwamy podkreślenie.

Odnośniki po najechaniu

Dodajmy jeszcze kod CSS odpowiedzialny za wygląd odnośników po najechaniu i kliknięciu:

#menu li a:hover, #menu li a:active {
   color: #000;
   background-position: 0 -36px;
}

Kod ten odpowiada za wygląd odnośnika po najechaniu (pseudoklasa hover) na niego kursorem myszy oraz w momencie kliknięcia (moment kliknięcia i trzymania przycisku myszy, pseudoklasa active) linku.

Kod ten oddziałuje tylko na dwie właściwości elementu odnośnika. Zmienia kolor z białego na czarny, oraz zmienia pozycję tła naszej grafiki. Jak odbywa się przesunięcie tła oraz jak to działa opisuję w osobnym artykule. Link do niego znajdziesz także na końcu tego wpisu. Teraz nacieszmy oko naszym menu :)

Nie wygląda ono jeszcze jak to z rysunku na początku artykułu, ale już niedaleko mu do tego. Teraz właśnie zajmiemy się tymi wszystkimi szczegółami.

Dopieszczamy całość

Nasze menu praktycznie już działa, widoczny jest obrazek jako tło, da się klikać, po najechaniu następuje podmiana koloru tła… jednak prezentuje się ono mało ciekawie. Wszystkie elementy menu są ściśnięte, napisy na przyciskach prezentują się nieciekawie no i przydało by się coś od dołu. Do roboty!

Podkreślenie pod przyciskami

Aby dodać ładne żółte podkreślenie pod całym menu wykorzystamy właściwość border. Aktualizujemy listę właściwości dla selektora #menu:

#menu {
	font-size: 14px;
	font-family: fantasy;
	border-bottom: solid 4px #E9AA01;
	overflow: hidden;
}

Samo dodanie dolnego obramowania nie przyniesie skutku ponieważ elementy listy są wytrącone z normalnego obiegu dokumentu. W celu “przywrócenia” normalnego zachowania nadajemy jeszcze właściwości overflow wartość hidden.

Teraz już obramowanie o grubości 4 pikseli wyświetla się w odpowiednim miejscu.

Odstępy w menu

Zajmijmy się teraz odstępami pomiędzy elementami menu. Zrealizujemy to poprzez dodanie lewego marginesu o grubości jednego piksela. Aktualizujemy listę wartości dla selektora #menu li zmieniając wartość właściwości margin:

#menu li {
	float: left;
	padding: 0; margin: 0 0 0 1px;
}

Jest jednak mała wada tego zabiegu, lewy margines dodał się do każdego elementu listy czyli również do pierwszego.

Możemy to jednak łatwo naprawić. Wykorzystamy do tego celu pseudoklasę first-child. Kod CSS:

#menu ul li:first-child {
	margin-left: 0;
}

I usuwamy lewy margines. Pseudoklasa first-child określa pierwsze dziecko, w naszym wypadku wybieramy pierwsze element typu li które jest potomkiem ul itd.

Wystylizujmy jeszcze pierwszą literę tekstu każdego odnośnika. Uzyskamy to przy pomocy pseudoelementu first-letter.

#menu li a:first-letter {
	font-size: 150%;
	font-weight: bold;
}

Dla pierwszej litery elementu a, który znajduje się w elemencie li powiększamy czcionkę i wytłuszczamy. Zobaczmy efekt naszej pracy.

Wyśrodkowanie

Całość prezentuje się bardzo poprawnie, byłoby jednak lepiej gdyby zakładki menu były wyśrodkowane względem podkreślenia. Aby to wykonać musimy dokonać dwóch rzeczy. Zmodyfikować właściwość margin dla selektora #menu ul oraz określić szerokość dla tego elementu.

#menu ul {
	width: 506px;
	list-style-type: none;
	margin: 0 auto; padding: 0;
}

Dodanie automatycznego marginesu dla prawej i lewej strony powoduje że element będzie wyśrodkowany. Szerokość musimy określić aby nadane marginesy poprawnie zadziałały.

Zapewne zastanawiasz się skąd się wzięła szerokość 506 pikseli. Już mówię: 3x 168 + 2x 1px = 506. Trzy przyciski o szerokości 168px i dwa marginesy po 1 piksel. Jak pamiętasz jeden piksel dla pierwszego elementu zlikwidowaliśmy dlatego nie trzy a dwa marginesy.

Na koniec ograniczmy jeszcze szerokość naszego podkreślenia, wykonujemy to w identyczny sposób jak dla elementu listy z tym że teraz właściwości margin: 0 auto; oraz szerokość nadajemy dla elementu #menu:

#menu {
	font-size: 14px;
	font-family: fantasy;
	border-bottom: solid 4px #E9AA01;
	overflow: hidden;
	margin: 0 auto;
	width: 770px;
}

Szerokość ustawiłem na 770 pikseli. A oto końcowy efekt naszej pracy.

Podsumowanie

W całkiem prosty sposób uzyskaliśmy ciekawe menu. Należy zwrócić uwagę jak prosty jest kod HTML. Menu wyświetla się poprawnie we wszystkich nowych przeglądarkach. Wiem że na dzień dzisiejszy IE6 ciągle jest w użyciu i nie poradzi sobie z przeźroczystością png, czy zaawansowanymi selektorami. Jednak przeglądarka ta już ma swoje lata i jeśli nie muszę nie biorę jej pod uwagę.

Jako wadę menu można wymienić to, że przy zwiększaniu ilości zakładek musimy edytować szerokość listy, jednak tylko wtedy kiedy chcemy mieć idealnie wyśrodkowane menu. Na koniec link do wpisu, w którym omawiam jak działa background-position.

Ten wpis jest pierwszym jaki ukazał się na tym blogu dowiesz się z niego o czym zamierzam pisać oraz poznasz moje hobby (czyli wpis z kategorii lajf). Zapraszam do lektury.

Blog ten jest częścią mojej strony domowej a raczej jej rozwinięciem. Będę tu poruszał zazwyczaj tematykę IT związaną z technologiami internetowymi, szczególnie programowaniem.

Znajdziesz tutaj mój drogi Czytelniku wiele porad jak i tutoriali związanych z tworzeniem stron WWW ale i nie tylko. Nie ograniczam się do programowania via WEB dlatego mogą znaleźć się tutaj posty również nieco odstające od głównej tematyki, czyli technologi internetowych.

Drugą częścią bloga są wpisy z tak zwanej kategorii “lajf” czyli zagadnienia bliższe mojej osoby, np zdany egzamin na uczelni czy tak jak druga część tego posta…

Mam nadzieję, że znajdziesz tutaj wiele przydatnych informacji. Enjoy :-)

Tenis

Jako że zaczynają się wakacje (nie tylko dzieci mają wakacje, studenci na szczęście też) w mojej małej miejscowości rozpoczynają się turnieje tenisa (ziemnego). Oczywiście nie wspominał bym o tym gdybym nie interesował się tym sportem. Interesował…? ja go kocham! Tenis jest najlepszym sportem, nic go nie przebije. Wiem, że pewnie jesteś fanem piłki nożnej lub jakiegoś innego sportu i pewnie kursor twojej myszki zmierza w stronę przycisku [x]. NIE RÓB TEGO! Uff, dzięki że zostałeś/zostałaś.

Jako że tenis jest moim ulubionym sportem oczywiście kiedy tylko mogę GRAM! Tak jak wspomniałem w mojej małej mieścinie Myśliborzu rozpoczynają się rozgrywki z cyklu Grand Prix. Zawody są organizowane przede wszystkim po to aby można było się spotkać i pograć. Nagród w postaci milionów dolarów nie ma co oczekiwać. Choć nie powiedziane, że nie ma ich wcale. SĄ! Na koniec zawsze kilka pierwszych miejsc otrzymuje puchary i statuetki a trzy pierwsze miejsca nagradzane są radiami, śpiworami itp. nagrodami.

Na koniec tego trochę przydługiego wpisu przedstawię plan gier na lato 2008 oraz moje dotychczasowe zdobycze.

Moje dotychczasowe zdobycze

VI Grand Prix Myśliborza w Tenisie ziemnym

Lipiec: 5, 12, 19, 26
Sierpień: 2, 9, 16, 23

Wszystkie turnieje planowane są na godzinę 10.00 i odbywają się oczywiście na kortach OSiR’u.

Wszystkich fanów tenisa serdecznie zapraszam!