Bacon – Çerçeve şekillerine göre makaleyi hizalama

Demo hakkındaki  resim biraz  garip ve sanırım  hiç ilgi çekici  bir yanı da ok gibi  görünüyor. Biraz karmaşık olduğundan dolayı  paylaşıp paylaşmama  konusunda  çelişkili  bir  durum içinde olsam da bazı  sitelerde  bu tip yazılar kullanabilmek için resim üzerinde  hazırlayıp kullandıklarını  bildiğim için paylaşmak istedim.

Şekline bakıldığında gereksiz  olarak ta  anlaşılabilir bu eklenti  ama  baya  bi  işe  yarar  tarafları var.  sitenizin bir köşesinde yazı yayınladığınız  zaman bu yazıyı  ya  sağa  ya sola yada ortaya doğru  hizalayabilirsiniz.  Css ve microsoft filtrelerinin sizlere  sunduğu limit bu kadar bir de  ul, ol ve li kullanarak  biraz daha içe doğru kaydırabilmeniz  mümkün yazıları.  Ama bir yazıyı yılan görünümünde   sarmal bir şekilde  kullanamıyordunuz elbette ta  ki David Hudson size  Bacon eklentisini hazırlayana kadar.

Bacon eklentisi yazılarınıza  istediğiniz şekli vermenizi  sağlayabilen bir  eklenti. X  ve Y  koordinatlarını belirlemekte  biraz  zorlanacaksınız  ama bu eklenti ile yazıya  şekil vermekte  limit kalmayacak sizzler  için.  Oval  bir  resmin yada  üçgen şeklinde  hazırlanmış bir  resmin  kenarına göre yazılarınızı  hizalayabilmeniz  mümkün bu eklenti ile.
Kullanım

• Head etiketleri arasına eklemeniz  gereken bölümler.

Js ve Css dosya adresleri : 

<link rel="stylesheet" type="text/css" href="bacon.jquery.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bacon.jquery.js"></script>

 JavaScript : 

Bu aşamada yazı sınıflarını  dikkatli inceleyerek her sınıf ın olduğu çerçeveye  ayrı ayrı koordinat  ayarı vermeniz gerekmekte

	<script type="text/javascript">
		$(document).ready(function() {
			$("#single_bezier_right").bacon({
				'type' : 'bezier',
				'c1' : { x : 10,       	y : 0  	},
				'c2' : { x : -115,    	y : 200 },
				'c3' : { x : -115,        	y : 400 },
				'c4' : { x : 10,        	y : 600 },
				'align'  : 'right'
			});

			$("#single_bezier_left").bacon({
				'type' : 'bezier',
				'c1' : { x : 10,        	y : 0  	},
				'c2' : { x : -115,      	y : 170 },
				'c3' : { x : 35,        	y : 340 },
				'c4' : { x : 15,        	y : 480 },
				'align'  : 'left'
			});

			$("#dual_bezier").bacon({
				type	:	'dualbezier',
				c1	:	{	x	:	0, 		y	:	0			},
				c2	:	{	x	:	80, 		y	:	400		},
				c3	:	{	x	:	-120, 	y	:	800		},
				c4	:	{	x	:	50, 		y	:	1250	},
				d1	:	{	x	:	120 	},
				d2	:	{	x	:	80		},
				d3	:	{	x	:	290 	},
				d4	:	{	x	:	50 		}
			});

			$("#single_line_right").bacon({
				'type' : 'line',
				'step'      : 5,
				'align'     : 'right'
			});

			$("#single_line_left").bacon({
				'type' : 'line',
				'step'      : 5,
				'align'     : 'left'
			});
		});
	</script>

 Css : 

	<style>
		body {
			font-family:sans-serif;
			background-color:#f1f1f1;
		}

		#wrapper {
			position:relative;
			width:960px;
			margin:0 auto;
			background-color:#ffffff;
			border: 1px solid #aaa;
		}

		#container {
			position:relative;
			width:698px;
			padding:10px;
			margin:0 auto;
		}
	</style>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Her  yazı  için belirlenen çerçevelerin içini  boş bıraktım. Kendinize göre yazı eklersiniz boş alanlara yada kendinize  göre farklı  sınıflar  belirlersiniz.

	<div id="wrapper">
		<div id="container">
			<h1>BACON!</h1>
			<h2>Single Bezier Right</h2>
			<div id="single_bezier_right" style="height:650px;">
			Çerçeve 1
			</div>
			<h2>Single Bezier Left</h2>
			<div id="single_bezier_left" style="height:710px;">
			Çerçeve 2
			</div>
			<h2>Dual Bezier</h2>
			<div id="dual_bezier" style="height:900px">
            Çerçeve 3
			</div>
			<h2>Single Line Right</h2>
			<div id="single_line_right" style="height:800px">
			Çerçeve 4
			</div>
			<h2>Single Line Left</h2>
			<div id="single_line_left" style="height:800px">
			Çerçeve 5
			</div>
		</div>
	</div>