cyrex.hu

Tutorial: jQuery carousel

cyrex — Mon, 07 May 2012 18:43:57 +0000

Még régebben készítettem ezt a kódot egy hasonló tutorial alapján. Néhány dolgot átírtam, kibővítettem benne. Mivel úgysem lesz időm mostanában videót csinálni, feltöltöm a forráskódot. Teleírtam kommentekkel ami segíti a kód megértését.

A “körhinta” működése azon alapszik, hogy az utolsó elemet mindig bemásoljuk az első elem elé. Ez az elem ilyenkor nem látszik az overflow: hidden miatt, viszont az “előző” gombra kattintva láthatóvá válik. A módszert követve mindig lesz egy elem az éppen látható elem előtt, tehát a “körhinta” végtelenített lesz.

Ha az egeret a kép fölé mozgatjuk akkor az animáció megáll és mindaddig nem indul tovább amíg el nem mozgunk róla.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Carousel</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/carousel.js"></script>
	<link rel="stylesheet" href="style.css"/>
	<script type="text/javascript">
		$(document).ready(function() {
			carousel();
		});
	</script>
</head>
<body>
 
	<div id="carousel">
		<div id="tabs-wrapper">
			
			<div id="next"></div>
			<div id="prev"></div>
			<div id="tabs">
				<div class="tab"><img src="pics/1.jpg" title="elso"/></div>
				<div class="tab"><img src="pics/2.jpg" title="masodik"/></div>
				<div class="tab"><img src="pics/3.jpg" title="harmadik"/></div>
				<div class="tab"><img src="pics/4.jpg" title="negyedik"/></div>
				<div class="tab"><img src="pics/5.jpg" title="otodik"/></div>
				<div class="tab"><img src="pics/6.jpg" title="hatodik"/></div>
				<div class="tab"><img src="pics/7.jpg" title="hetedik"/></div>
				<div class="tab"><img src="pics/8.jpg" title="nyolcadik"/></div>
			</div>
			
			<div class="clear"></div>
			
			<div class="title"></div>
		</div>
	</div>
 
</body>
</html>

CSS forráskód

* { padding: 0; margin: 0; outline: 0; border: 0 }
body { background: url('pics/bg-body.png') repeat-x top left #fff }
div.clear { clear:both }
 
div#carousel {
	width: 600px;
	margin: 50px auto;
	background: #fff;
	box-shadow: 0px 0px 20px #b4b4b4;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ddd
}
div#tabs-wrapper {
	width: 600px;
	height: 300px;
	overflow: hidden
}
div#tabs { position: relative }
div#tabs .tab {
	width: 600px;
	height: 300px;
	float: left
}
div#tabs-wrapper .title {
	color: #fff;
	padding: 20px;
	position: relative;
	top: -53px;
	font-family: verdana;
	font-size: 11px;
	background-color: rgba(0, 0, 0, 0.8);
	/* IE miatt kell */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
}
 
div#next,
div#prev {
	width: 30px;
	height: 30px;
	background-image: url('pics/nav.png');
	position: absolute;
	z-index: 2;
	margin-top: 140px;
	cursor: pointer;
}
div#next { margin-left: 640px }
div#next:hover { background-position: -30px 0; }
div#prev {
	background-position: 0 -30px;
	margin-left: -70px
}
div#prev:hover { background-position: -30px -30px }

jQuery forráskód

function carousel() {
 
	// sebesség
	var speed = 3000;
	// időzítő
	var timer = setInterval("rotate()", speed);
	// tabok száma
	var tabs_number = $(".tab").length;
	// tab szélessége
	var tab_width = $(".tab").outerWidth();
	// eltolás
	var offset = tab_width * (-1);
	// összes tab szélessége
	var total_width = $("#tabs").width = tab_width * tabs_number;
	// első tab
	var first_tab = $(".tab:first");
	// első tab képe
	var first_img = $(".tab:first img");
	// utolsó tab
	var last_tab = $(".tab:last");
 
	// beállítjuk a konténer szélességét
	$("#tabs").css({"width" : total_width});
 
	// bemásoljuk az utolsó elemet az első elé, arra az esetre, ha az előző gombra kattint
	last_tab.insertBefore(first_tab);
 
	// az előző lépés miatt egyel csúsztatunk balra
	$("#tabs").css({"left" : offset});
 
	// aktívra állítjuk az első tab-ot
	first_tab.addClass("active");
 
	// kiírjuk az első kép title attribútumát
	$(".title").text(first_img.attr("title"));
 
 
	// következő gomb
	$("#next").click(function() {
		// megkeressük az aktív tabot
		var active_tab = $(".active");
		// etávolítjuk róla a classt
		active_tab.removeClass("active");
		// a következő tabra tesszük a classt
		active_tab.next().addClass("active");
 
		// a left értéket csökkentjük a tab szélességével
		// a parseInt elemzi a stringet és egész számmal tér vissza
		// ha nem számmal kezdődik akkor NaN-al tér vissza (not a number)
		var left_indent = parseInt($("#tabs").css("left")) - tab_width;
 
		// csak akkor hajtjuk végre az animációt, ha éppen nem fut másik animáció
		// a számot módosítva tudjuk befolyásolni az animáció sebességét
		$("#tabs:not(:animated)").animate({"left" : left_indent},500,function () {
				// az elsőt berakjuk az utolsó mögé
				$("#tabs div:first").insertAfter($("#tabs div:last"));
				$("#tabs").css({"left" : offset});
		});
		$(".title").text($(".active img").attr("title"));
	});
 
 
	// előző gomb
	// ugyanaz a módszer, csak visszafelé
	$("#prev").click(function() {
		var active_tab = $(".active");
		active_tab.removeClass("active");
		active_tab.prev().addClass("active");
		var left_indent = parseInt($("#tabs").css("left")) + tab_width;
		$("#tabs:not(:animated)").animate({"left" : left_indent}, 500,function(){
			$(".tab:last").insertBefore($(".tab:first"));
			$("#tabs").css({"left" : offset});
		});
		$(".title").text($("img").attr("title"));
	});
 
 
	// ha fölémzgunk az egérrel, megáll
	$("#tabs").hover(
		function() {
			// a clearInterval() metódus törli a setInterval() által beállított időzítőt
			clearInterval(timer);
		},
		function() {
			// a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként
			timer = setInterval("rotate()", speed);
		}
	);
 
};
 
 
// a rotate() függvény összesen annyit csinál, hogy "rákattint" a következő linkre
function rotate() {
	$("#next").click();
}

Tutorial: betűtípusok a weben

cyrex — Fri, 17 Feb 2012 22:58:55 +0000

Alapvetően kétféle betűtípust különböztetünk meg a weben: webstandard és nem webstandard betűtípusok. Webstandard betűtípusok pl. az Arial, Verdana, Courier, amik jó eséllyel mindenféle böngésző alatt meg fognak jelenni. Kiválóan összegyűjtött lista olvasható az alábbi linkre kattintva.

Nem támogatom különösebben a speciális betűtípusok használatát weboldalakon, ha mindenáron használni akarjuk, akkor is inkább csak címsorokhoz, menühöz ajánlanám. Használjunk olyan betűtípust ami alapból támogatja a magyar ékezetes karaktereket. Ha pont egy olyanba futottunk bele amiből ezek hiányoznak, akkor ezeket megrajzolhatjuk utólag is font készlet készítő szoftver segítségével.

Ha azt szeretnénk, hogy nem webstandard betűtípusunk minden böngészőben megjelenjen, használjuk a fontsquirrel.com font-face generátorát. Ha nem létszükséglet a régebbi böngészők és az Internet Explorer támogatása, akkor használjuk a szabványos CSS megoldást:

@font-face {
	font-family: választott-név;
	src: url('fájlnév.otf');
}
h1 {
	font-family: választott-név;
}

Tutorial: Photoshop tippek

cyrex — Sat, 11 Feb 2012 20:00:50 +0000

Az alábbi videókban két olyan problémára keressük a választ amivel a kezdők gyakran találkoznak.

1. körvonal, azaz kitöltés nélküli alakzat rajzolása

2. pontozott vonal készítése

Első maratonom

cyrex — Thu, 13 Oct 2011 11:13:59 +0000

Mindig is érdekelt milyen lehet lefutni egy maratont ezért idén belevágtam a felkészülésbe, és október 2-án sikeresen teljesítettem a 42km-es távot 4 óra 23 perc alatt. Előtte próbáltam keresni olyan írásokat amelyek segítenek a felkészülésben, de szinte mindenhol ugyanazt a sablon edzésmódszert találtam. Megpróbálom összefoglalni mi az ami működött nekem ezekből és mi az ami nem.

Mikor vágjak bele?

Januárban kezdtem el komolyabban futni, azonban 10km-t már előtte is le tudtam futni. Áprilisban lefutottam a Vivicittá félmaratont, ez volt az első alkalom, hogy 20km-nél nagyobb távot teljesítettem. Az időm 1óra 57 perc volt, ami gyengének számít, viszont egyáltalán nem éreztem magamat fáradtnak. Ekkor kezdett el motoszkálni a gondolat a fejemben, hogy menne több is

Ezután neveztem a K&H félmaratonra egyéniben, amit sérülés miatt ki kellett hagynom. 1 hónapig egyáltalán nem tudtam edzeni, így nagyjából június közepén kezdtem el komolyabban az alapozást. Ekkor kezdtem el betonon futni, korábban kizárólag futópadon edzettem. A szeptemberi Nike félmaratont már 1 óra 45 percen belül futottam.

A maratonra csak azután adtam le a nevezésem, hogy egy edzésem alkalmával lefutottam 30km-t. Sokan mondják, hogy ez az a táv amit, ha teljesítesz, akkor nem fog gondot okozni 42km sem. Az ilyen állításokra nem érdemes alapozni, mert 30 után még van 12km, ahol rengetegen feladják. Mindenképpen javaslok egy 35km-es edzést legalább 2 héttel a maraton előtt.

Hogyan edzek?

A hosszútávnál a legnagyobb hangsúly az állóképességen van. Számomra érthetetlenek a sablon edzéstervek amik minden napra ütemeznek egy-egy edzést. Én heti 1-2x futottam, viszont minden alkalommal legalább 20km-t, de inkább többet. Rendszeresen futottam emelkedőn, ez többnyire úgy nézett ki, hogy felfutottam a Gellért tértől a Citadelláig ügyelve arra, hogy tartsam a 6 perces kilométereket. Az emelkedőt semmiképpen se hagyd ki az edzésedből. A maratonon 38km után érkeztünk a Nyugati Pályaudvari felüljáróhoz, ahol nagyon sokan már gyalog alig bírtak felmenni a fáradtságtól, és ezt a szakaszt a legtöbb budapesti futás érinti, úgyhogy célszerű rá készülni. Nem kell túlzásba vinni, 3 hetente elég egy emelkedős edzés, akkor viszont mindent bele!

Szintén javaslom a fartlek típusú edzéseket, amikor egy-egy szakaszt keményen meghúzol. Sétát viszont soha ne iktass be, mert a maratonon sem fogsz (remélhetőleg) sétálni.

Mivel a futás elég monoton mozgásforma, célszerű egyéb sportágakat is beiktatni a felkészülés során. Én rendszeresen kerékpároztam és görkoriztam a nyáron.

Ha össze akarnám foglalni az edzésmódszeremet, akkor valahogy így nézett ki:
- heti 1-2 alkalommal 20-25km futás
- heti 1-2 alkalommal 20km görkori vagy 40km kerékpár
- maraton előtt két héttel 30km-es futás
- maraton előtti héten végig pihenő

Ha szükségesnek érzed vezess edzésnaplót.

Tempó

A maraton lefutásához értelemszerűen olyan tempót válassz amit kényelmesen tudsz tartani órákon keresztül. A beszélgetős tempó erre kiválóan alkalmas. Ez az a tempó ami mellett még nem kapkodod a levegőt és tudsz közben beszélgetni. Nekem ez 6 perces kilométereket jelent, illetve erre még rájött mindig pár másodperc a frissítőpontoknál. Ezzel a tempóval nem voltam rosszul, nem estem össze a célban, végig élvezetes volt a táv, ami sokkal fontosabb, mint az, hogy javíts pár percet az idődön.

Frissítőpontok

Ekkora távnál kiemelkedően fontos a rendszeres szénhidrát és folyadékpótlás. Vigyél magaddal szilárd táplálékot (müzli, banán, esetleg energiazselé, szőlőcukor) és folyadékot. Utóbbiból elegendő pár deci, mert a maratoni távnál legalább 15 frissítőállomás szokott lenni, ahol mindig van lehetőséged enni-inni. Viszonyításképpen én betoltam 7 müzlit, legalább 3 banánt, némi szőlőcukrot, kb. 2 liter vizet és bő 1 liter izotóniás italt, igaz nagyon meleg volt.

A frissítőpontoknál állj meg! A műanyag pohárból nem tudsz inni futás közben. Állj meg arra a néhány másodpercre amíg legurítod azt a pár deci folyadékot. Ennyi megállás még nem fog kibillenteni a ritmusból, viszont nem fogod magadra önteni, sem félrenyelni.

Jó, ha tudod, hogy a maratonokon lehetőséged van saját frissítőcsomag leadására amit a rajtszámoddal felcímkézve fogsz megtalálni az általad megjelölt frissítőállomáson.

Mentális felkészülés

Sosem értettem a “fejben dől el minden” féle kijelentéseket. Ha nem edzettél eleget, az agyad nem futja le helyetted. Nyilván szükség van elszántságra és kitartásra egy maraton lefutásához, de ezek a dolgok meg kell, hogy legyenek benned, ha már le tudsz futni egy félmaratont. Koncentrálj inkább az edzésre, az agyalást hagyd meg azoknak akik 25km-nél félholt állapotban feladják. Az igazi löketet az adja az agyadnak amikor látod, hogy egyre többen feladják, de te még mindig futsz.

Pihenés

Legalább olyan fontos része a felkészülésnek a pihenés, mint az edzés. A szervezetednek szüksége van időre, hogy regenerálódjon, ezért írtam korábban is, hogy ne fuss egymást követő napokon. Főleg akkor ne, ha előző nap 20km-t vagy még ennél is többet futottál. Ilyenkor szükség van 1-3 nap pihenőre. A maraton vasárnap volt, előtte kedden futottam utoljára egy tempós 12km-es kört. Ezután már csak pihentem, pénteken és szombaton igyekeztem legalább 10-10 órát aludni. Vedd figyelembe, hogy amatőr sportoló vagy, aki napközben dolgozik, a futás pedig a hobbija. Semmi értelme túledzeni magad, azzal csak rontasz a fizikai állapotodon és előbb-utóbb sérüléshez fog vezetni. Pihenj eleget!

Kütyük

Ezer féle műszert lehet már kapni amit futóknak fejlesztettek ki. Lehet mérni a lépéseket, a távot, a pulzust, stb. Nem vagyok híve az ilyesmiknek. Pontosan tudnod kell azt a tempót amivel 6 perc 1km vagy amivel 5perc 1km. Ezt a legkönnyebben futópadon tanulhatod meg, ahol pontos értékeket látsz végig az edzésed során. A szervezett futásoknál ki van jelölve minden kilométer, így az órádon tudod ellenőrizni, hogy megfelelő tempóban futsz e. Célszerű olyan órát használni amin van stopper, és tud legalább 42 részidőt tárolni, illetve 43-at, mert ugye a 42km után még hátra van 195 méter

Ruházat

Az első és legfontosabb a cipő. Futócipőt nem kapsz akármelyik sportboltban, mindenképpen szaküzletben vásárolj ahol pontosan megmondják, hogy milyen cipő passzol a talpad formájához. Tudom ajánlani a Nyúlcipőt illetve a Spuri futószaküzletet. Vedd figyelembe, hogy egy jó futócipő ára 20-25ezer Ft-nál kezdődik. A hervisben árult 10ezer Ft-os cipők alkalmatlanok hosszútávfutásra.

Nike Air Span 6 volt az első komolyabb cipőm. Ezután vettem az Adidas-t ami sajnos nem váltotta be a hozzá fűzött reményeket, majd ismét váltottam Nike Air Span-re, ami ekkor már a 8-as szériánál tartott. Ne fuss 1.000-1.500km-nél többet egy cipőben, mert romlik a csillapítása és jobban igénybe fogja venni a térdedet.

Ezen kívül szükséged lesz még futózoknira, futómezre és valamilyen nadrágra. Ezekből nagy választékot találsz a Decathlonban, én is ott vettem mindent. A zokni, mez, gatya bőven megvolt egy tízesből. Nem árt, ha veszel még egy övet kulacsokkal amiben magaddal tudsz vinni folyadékot az edzéseken illetve a maratonon.

Tutorial: lángoló dobókockák

cyrex — Fri, 05 Aug 2011 07:48:20 +0000

Sajna a YouTube visszaminősítette a fiókomat, megint nem tudok 15 percnél hosszabb videót feltölteni, úgyhogy kénytelen voltam két darabra szedni, mint a régi szép időkben

A képet innen tudod letölteni. Ne tévesszen meg a mérete, csak össze van nyomva

A lángokat sajnos nem publikálhatom külön, mert fizetős kép, de az SXC-n találtok hasonló képeket: http://www.sxc.hu/browse.phtml?f=search&w=1&txt=flames

Bringatúra: Budapest – Jászfényszaru

cyrex — Sun, 05 Jun 2011 19:40:04 +0000

Az alábbi 140km-es túra alapötletét ezen az oldalon találtam. Ha lesz időm megcsinálom a módosított útvonalat, addig is marad az írásos beszámoló

Az első dolog ami nem tetszett az útvonalban az az, hogy a Régi Fóti utat választja kifelé a városból. Ezt az útvonalat tapasztalt kerékpárosoknak sem ajánlanám. Még országútis koromban volt szerencsém párszor arra tekerni. A keskeny kormány ellenére is gyakran volt olyan érzésem, hogy alig pár centire húznak el a visszapillantók a könyököm mellett. Ha jól tudom nem egy bringást csaptak már el ezen a szakaszon, illetve Stohl Buci is ezt az utat választotta drogos énje önmegvalósításához.

Biztonságosabb és kellemesebb, ha Dunakeszi irányából közelítjük meg Fótot végig a repülőtér melletti elzárt bringaúton. Ahol a bringaút véget ér a körforgalomnál forduljunk jobbra a második kijáraton Fót irányába. Hamarosan újabb körforgalom következik, ahol ezt a szép kis templomot fogjuk látni. Tartsuk az irányt, hamarosan beérünk Fótra.

Ne térjünk le az útról, menjünk egészen amíg el nem érjük a STOP táblát, szemben a benzinkúttal, ahol forduljunk jobbra. Tekerjünk egészen addig amíg el nem jutunk a lámpás kereszteződéshez és forduljunk jobbra. Hamarosan elérjük a legendásan szép Fóti nagytemplomot, csapjunk el balra Mogyoród felé. Innentől nagyon sokáig megegyezik az útvonal a fent említett útvonallal.

Némi emelkedő után elérjük Mogyoródot. Az merült fel bennem útközben, hogy Mogyoród valami ismeretlen nyelven emelkedőt jelenthet, mert nem túl intenzíven, de végig emelkedik az út Mivel jó idő volt és vasárnap, elképesztő dugó volt az aquapark miatt. Több kilométeres autósor volt a szembejövő sávban, úgyhogy kellemes szmogos levegőben tekertem el a szadai elágazásig. A dugó még innen is folytatódott jó 1km-en keresztül, de aztán végre eltűntek az autók az útról és lehetett nyugodtan bringázni. Szada után Gödöllő következik, itt megálltam pihenni meg tankolni egy rövid időre.

A következő állomás Valkó. Innentől gyakorlatilag semmi forgalommal nem találkoztam. Az út minősége elég változó, a tekerhetőtől a tükörsima aszfaltig mindenféle burkolattal találkoztam. Gázos rész nem volt, virsligumival is simán teljesíthető a túra.

Valkó után Vácszentlászlón találjuk magunkat.

Ez a település nagyon tetszett, több képet is készítettem, az egyiket az emlékműről.

Illetve a községházát is lekaptam. Addig sem kellett tekerni

A faluból kiérve abszolút forgalommentes, tök jó állapotú út vezet Zsámbokra. Itt már találkoztam országútis fazonokkal is, akik szokás szerint állva hagytak a 30-as tempóm ellenére

Két oldalon termőterületek, érdemes bámészkodni, ha már mással úgysem tudsz foglalkozni menet közben

Na végre megérkeztünk Zsámbokra. Itt megint variáltam egyet az útvonalon.

Az eredeti útvonal megy vissza Dány felé én viszont Jászfényszaru felé vettem az irányt. Ekkor valahol 60-65km környékén járhattam, úgyhogy egyre gyakoribbak voltak a fotózással magyarázott alibi megállások

Időnként meglepően jó minőségű utakkal találkoztam. Öröm volt rajta tekerni.

Két folyón keresztül visz az út, előbb a Galga.

Majd a Zagyva.

Zagyválás után máris bent vagyunk Jászfényszarun.

Tudom, hogy elcsépelt téma, de Pesti gyerek lévén sajnos ritkán látok gólyát

Egy két képet kattintgattam az éppen akkor tartott fogathajtó versenyen is.

Aztán sajnos elkezdett esni az eső, úgyhogy lassan megfogant a góhóm projekt a fejemben. Itt egyébként pont 70km-nél állt az órám Újpest központjától számolva.

Jászfényszarut elhagyva Dány felé vettem az irányt, ezzel ismét visszatérve az eredeti útvonalhoz. Itt már kaptam rendesen az esőt a nyakamba, de azért megálltam a Dányi tónál is csinálni egy képet.

Hatalmas szerencsém volt, mert sikerült kitekernem a felhők alól. Ezt a képet hátrafordulva készítettem, ezek a felhők elkísértek egészen Pécelig, de szerencsére nem értek utol, úgyhogy sikerült szárazon megúsznom. Ennek egyébként kimondottan örültem, mert a rövid eső + szembeszél kombó annyira kivette az erőmet, hogy a következő félórám csak arról szólt, hogy átkönyörögjem magamat a holtponton. Annak ellenére, hogy alig van szintkülönbség a túrában, végig benne van egy laza hullámvasút feeling hosszú elnyújtott alattomos emelkedőkkel ami úgy ki tudja fárasztani az embert, hogy észre sem veszi. Olyasmi, mint amikor úgy égsz le, hogy észre sem veszed, mert felhős az ég és nem érzed, hogy éget a nap. Aztán később veszed észre magadon, hogy rákvörös vagy

Higgyetek nekem. Szénhidrát feltöltésre nincs jobb, mint a tejberizs. Ezt a szerény adagot belapátoltam és simán kihúztam a maradék 60km-t további üzemanyag pótlás nélkül

Egy pár képet még készítettem hazafelé a hátam mögött közeledő viharról. Nagyon szép látvány volt, persze, ha elért volna, nem nyilatkoznék ilyen elismerően róla

Volt még Isaszeg meg Pécel, de ezeken már úgy hajtottam át, hogy nem néztem se jobbra se balra. A túra hossza nagyban függ attól, hogy Budapest mely részéről indulsz és hova érkezel. Én Újpest központjától startoltam és oda is értem vissza. Ez induláskor előnyt jelentett, mert pillanatok alatt Dunakeszin voltam, hazafelé azonban bő 20km-t kellett még ráhúznom városon belül. Nekem így kerek 140km-re jött ki a túra 23-as átlagsebességgel. Kiemelkedő maximális sebesség nem volt, van egy-két lejtő ahol lehet neki engedni, de sebességrekord felállításához még mindig Dobogókő a legjobb választás

Békás 100 kerékpáros teljesítménytúra

cyrex — Sun, 29 May 2011 16:18:04 +0000

Nem vagyok különösebben oda a teljesítménytúrákért, de a Békás valahogy belopta magát a szívembe az évek során. Országúti túráról van egyébként szó, mely a Békásmegyeri Vándor Kerékpáros Klub szervezésében kerül megrendezésre három választható távval: 30, 63 és 104km.

A 63-asról azt érdemes tudni, hogy jó darabig Békás 50 néven szerepelt a kiírásban. Amikor először tekertem, meg voltam lepődve, hogy 50km-nél járok, és még Szentendrénél sem tartok, nemhogy Békásmegyernél. Beérkezés után megkérdeztem a szervezőket, hogy vajon én néztem el az útvonalat, vagy ők mérték le rosszul a távot? Nem én voltam az első aki ezt a kérdést feltette, úgyhogy azóta módosították a kiírásban 63km-re Általában a közepes távon tekertem korábban, illetve egyszer valamilyen okból kifolyólag a 30-asra neveztem, úgyhogy már csak a 100-as emléklap hiányzott a gyűjteményemből. De a mai nappal ezt is pótoltam

Minden évben május 21-én van a túra, de most valamiért eltolták egy héttel a srácok. Úgy látszik előre tudták, hogy a születésnapomon rossz idő lesz, úgyhogy jó döntést hoztak

7 órakor keltem, hogy időben odaérjek. Az első meglepetés a kapuban ért tornádó szerű szél formájában. Az rögtön látszott, hogy a zenehallgatás, mint olyan, valószínűleg felejtős lesz a mai napon

A nevezés illetve a rajt a Békásmegyeri McDonald’s-nál található. Nincs pontos indulás, 8:30-tól folyamatosan lehet startolni. A 100-as táv szintideje 6 óra. Némi bemelegítés és 8km tekerés után megérkeztem a helyszínre. Az órát elfelejtettem nullázni, úgyhogy nálam ez a táv is beleszámít az eredménybe

A 30 és 63-as táv a bringaúton indul, mi pedig a HÉV-et keresztezve elindultunk Pomáz felé. A túra egyébként pontosan úgy kezdődik ahogyan egy tavaly augusztusi postban írtam, csak a csobánkai elágazásnál nem egyenesen kell továbbmenni, hanem balra Csobánka felé. Ebből az irányból még sosem tekertem fel, de már hallottam legendákat a csobánkai emelkedőkről, úgyhogy most végre személyesen is bemutatkoztunk egymásnak Nem mondanám, hogy nagyon vészes, 7-8km/h-val nagyjából végig tudtam tekerni. A lényeg, hogy megállni nem szabad, mert többet nem tudsz elindulni Utána hullámvasút következik egy-két komolyabb lejtővel, ahol kellemesen lehet engedni 60-as tempóval lefelé, országútival akár többel is. Közben érdemes nézelődni, mert nagyon szép a táj. Ezen a szakaszon sikerült beérnem egy kisebb csoportot akikkel érdekes kerülőúton vettük az irányt Pilisszántó felé. Együtt mentünk egészen első ellenőrzőpontig, utána a hosszú és alattomos emelkedők szétszakították a társaságot. Az ellenőrzőpontnál tudatták velem, hogy, ha szintidőn belül akarom hozni a távot, akkor húzzak bele, mert 8:30-as indulással már rég nem itt kéne tartanom Lehet mégsem fotózással kellett volna töltenem az időt, hanem inkább a tekerésre koncentrálni, úgyhogy innentől kezdve egyszer sem álltam meg, végig a nyeregből készítettem a képeket

Innentől folyamatosan emelkedik az út, úgyhogy a káromkodásokat célszerű erre a szakaszra tartalékolni Pilisszentkeresztnél még kapunk egy lazulós lejtőt aminek egyetlen célja, hogy utána még többet és még meredekebben kelljen majd visszamászni. Ezeken a szakaszokon szoktam végiggondolni, hogy mi a francot keresek én itt, mikor sokkal kellemesebben is eltölthetném az időt ahelyett, hogy kínlódok felfelé az emelkedőn

A szintrajzon is látszik, hogy az első 30km elég keményen emelkedik.

A leghúzósabb emelkedőkön is igyekeztem a 8-10km/h-t tartani, és persze lógó orral néztem a mellettem lazán eltekerő országútis sporttársakat. Ilyenkor mindig eszembe jut, hogy miért is adtam el a Merida Road-ot… A következő ellenőrzőpont Két-bükkfa-nyeregnél található, ami egyben az emelkedő végét is jelenti. Ezután igazi örömbringa következik, jó 10km-es kanyargós lejtő, mely kitart majdnem egészen Esztergomig. A kanyarokban vigyázni kell, mert a szembejövők hajlamosak lecsapni a kanyart az amúgy is szűk úton, illetve előfordulnak motorosok is ezen a szakaszon. Különösebb rátekerés nélkül sikerült 66km/h sebességet elérnem, ennél feljebb nem mertem menni, mert az út minősége megfelel a magyar sztenderdeknek, bőven tele van kátyúval.

Az erdőből kiérve pár km után Esztergomban találjuk magunkat ahol még érezzük picit a lejtőzés örömeit, meg látjuk a bazilikát és örülünk magunknak, hogy végre nincs több emelkedő. Van viszont helyette további 70km amit még le kell tekerni végig a Duna parton. Habár szép tájakon vezet az út, mégis azt kell mondjam, hogy ez a szakasz iszonyatosan monoton és unalmas. Mivel az átlagom valahol a röhejes és a siralmas között lézengett, innentől kicsit összekaptam magam és igyekeztem az átlagsebességet 35 közelében tartani egészen a célig. A szembe szél az végig megvolt, de ez egy olyan tény, ami együtt jár a kerékpározással, úgyhogy meg sem említem többször

Esztergomtól úgy 30km tekerés után elérjük Lepencét, itt van a harmadik ellenőrzőpont, ez megegyezik a 63km-es táv ellenőrzőpontjával. Innentől együtt halad a két táv. Itt már csak pecsételtem és indultam is tovább, nem akartam húzni az időt. Ismét megpróbálkoztam a zenehallgatással, ez valamelyest megtörte a dolog monotonitását és szép lassan de biztosan fogytak a kilométerek. Szentendrénél muszáj voltam megállni enni, nem akartam az utolsó 10km-en lefordulni a bringáról. Próbaképpen vittem magammal egy adag tejberizst ami elég jó szénhidrátforrásnak bizonyult így a vége felé Azt nem mondom, hogy sportolóknak ideális a felszívódása miatt, de a tápértéke az tutira rendben van

Végül sikerült beérnem szintidőn belül, de a szervezők bruttó időt mérnek amibe beleszámít az az idő is amit az ember zabálással, fotózással, pecsételéssel és egyéb dolgokkal tölt el Nekem a nettó időben benne van az oda + visszajutás ideje is, ami összesen 16km. A végeredményem úgy nézett ki, hogy összesen 122km-t tekertem 5óra 26 perc alatt 22.4-es átlaggal. A maximális sebesség 66.2km/h.

Mivel a McDonald’s neve alatt fut a rendezvény, a célban kapsz kupont amiért adnak egy sajtburgert meg egy kis kólát. Kellemes meglepetésként ért, hogy a 100km-es távon két kupont is adtak, úgyhogy duplán sikerült bezabálnom az egészséges kajából A nevezés egyébként 1000 Ft erre a távra, ami nagyon karcsúnak mondható figyelembe véve, hogy az ellenőrzőpontokon is van lehetőség enni-inni.

Összegezve egy nagyon jó kis túra volt, kellemes társasággal. Mindenkinek ajánlom, hogy egyszer jöjjön el, a 30km-es táv végig forgalomtól elzárt kerékpárúton halad, ahol egészen kis gyerekekkel is láttam indulni bringásokat annak idején. A túra ideje alatt a meki mellett kerékpáros akadálypályán is lehet próbálkozni

Bővebb infó és képek a rendezvényről a BVKK oldalán.

Tutorial: absztrakt minta Photoshopban

cyrex — Sat, 14 May 2011 14:24:36 +0000

Egy kis nyár eleji lazulós videó, valami ehhez hasonló eredménnyel. A megvalósításhoz szükség lesz Illustratorra is.

Tutorial: HTML + CSS + jQuery menü

cyrex — Fri, 13 May 2011 09:25:39 +0000

Na már megint egy menü. Ez nem tiszta CSS, kell hozzá pár sor jQuery, de valamivel talán használhatóbb, mint a legutóbbi variáció.

HTML + jQuery forráskód


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css menu</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
	<script type="text/javascript">

		$(document).ready(function(){
 
			$("ul#menu li:last-child").css("margin-right",0);
 
			$("ul#menu div").click(
				function(){
 
					$(this).parent().find("div").css("background-image","url(arrow_up.png)");
					$(this).parent().find("ul").slideDown("slow");
 
					$(this).parent().hover(
						function(){},
						function(){
							$(this).parent().find("ul").slideUp('slow');
							$(this).parent().find("div").css("background-image","url(arrow_down.png)");
						}
					);
 
				}
			);
		});

	</script>
</head>
<body>
 
<div id="container">
 
	<ul id="menu">
		<li>
			<div>lorem ipsum</div>
			<ul>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
			</ul>
		</li>
		<li><a href="">viverra</a></li>
		<li><a href="">vestibulum</a></li>
		<li>
			<div>dolor sit</div>
			<ul>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
			</ul>
		</li>
		<li><a href="">faucibus</a></li>
	</ul>
 
	<div style="clear:both"></div>
 
	<div id="content">
		<h1>Lorem ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem eros, mollis sed bibendum et, tempus a augue. Nullam tempor, purus eu vulputate lacinia, ante nibh lobortis massa, non hendrerit ligula enim ut nulla. Etiam laoreet lacinia nibh et iaculis. In ac urna massa, non cursus ante. Sed vel magna elit. Nulla consequat turpis a arcu ullamcorper posuere. Nunc accumsan interdum pellentesque. Phasellus at neque elit, et sodales neque. Aenean dapibus sodales blandit. Ut pharetra, nibh vitae rutrum posuere, mauris purus volutpat neque, sit amet dictum purus augue nec ipsum. Etiam ac tortor urna. In hac habitasse platea dictumst. Pellentesque ut tellus placerat velit commodo gravida.</p>
		<p>Suspendisse vitae tellus non nulla malesuada ultricies eget sit amet nunc. Curabitur ultricies orci rutrum ipsum pretium ac suscipit turpis mattis. Donec et gravida diam. Suspendisse vitae lacus quis purus ullamcorper fringilla. Etiam porttitor neque magna. Maecenas et ligula lorem, a laoreet dolor. Duis sollicitudin pulvinar ligula, eget imperdiet nisl varius vel. Nulla facilisi. Vestibulum orci felis, semper nec sodales eget, molestie vel lorem. Integer tincidunt, est non fermentum dignissim, neque magna vehicula sapien, eget blandit ante nibh eu lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam justo magna, molestie et scelerisque quis, convallis in diam. Nam diam enim, sagittis venenatis tempus vel, imperdiet in mauris. Suspendisse viverra tortor ac tellus molestie placerat. Aliquam ligula lacus, viverra quis pretium at, dignissim vel leo. Integer tristique massa ut magna eleifend eget laoreet tellus rutrum.</p>
	</div>
 
</div>
 
</body>
</html>

CSS forráskód

* {
	padding: 0;
	margin: 0;
}
body {
	background: #999;
	font-family: arial,tahoma,verdana;
	font-size: 11px;
	margin-top: 30px;
}
div#container {
	width: 740px;
	margin: 0 auto;
}
div#content {
	background: #898989;
	color: #fff;
	padding: 20px;
	margin-top: 1px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: 2px 2px 2px #787878;
}
div#content h1 {
	font-family: georgia;
	font-size: 30px;
	margin: 0 0 20px 0;
	padding: 0;
}
div#content p {
	text-align: justify;
	line-height: 18px;
	margin: 0 0 10px 0;
}
 
 
 
ul#menu a,
ul#menu div {
	padding: 10px 20px;
	display: block;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	font-weight: bold;
}
ul#menu div {
	cursor: pointer;
	background: url('arrow_down.png') no-repeat 95% 50%;
}
ul#menu li {
	list-style: none;
	float: left;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	background: #7d1783;
	background: -moz-linear-gradient(top, #a821b0 0%, #7d1783 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#a821b0), to(#7d1783));
	margin-right: 1px;
	width: 140px;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
ul#menu li:hover {
	background: #650c6a;
}
ul#menu li ul {
	display: none;
	position: absolute;
	border-top: 1px solid transparent;
}
ul#menu ul li {
	float: none;
	text-transform: lowercase;
	margin: 0;
	background: url('arrow_right.png') no-repeat #3f3f3f 5% 50%;
	font-size: 11px;
	border-radius: 0;
	box-shadow: none;
}
ul#menu ul li:hover {
	background: url('arrow_right.png') no-repeat #000 5% 50%;
}
ul#menu ul li a {
	padding: 10px;
}

Tutorial: függőleges középre igazítás block típusú elemeknél

cyrex — Sun, 27 Mar 2011 19:35:42 +0000

Habár rengeteg anyag született már a témában, a mai napig sok helyen látom a kérdést, hogy miért nem működik a vertical-align beállítás fix méretű DIV-ek esetében. A válasz egyszerű: azért, mert a DIV block típusú elem és nem úgy viselkedik, mint a táblázat cellái, ahol ugye az őskorban a valign=”middle” beállítást használtuk erre a célra.

Léteznek azonban közelítő megoldások, ebből próbáltam meg párat összeszedni, de nekem az a saját véleményem, hogy a függőleges középre igazítást inkább célszerű elkerülni block típusú elemeknél.