E-Onlinem.Tr.Gg | Hizmette Sınır Tanımayan Plartform

This demo shows the integration of a tiny jQuery slider with the jQuery Fancybox Plugin and the Cloud Zoom Plugin. You can navigate through the thumbnails and see a zoomed version when you hover over them. When clicked, the full image is shown using the Fancybox Plugin.

css tasarımlar

DEMO İÇİN RESMİN ÜZERİNE TIKLAYINIZ

TASARIM ÜZERİ KODU

TASARIM ALTI KODU CSS BÖLÜMÜ KODU

h1#title{display: none;}  h2#title span {display: none;}  div.header{display: none;}  li.nav_element{list-style-type: none;}  li.nav_element{display: none;}      *{ 	margin:0; 	padding:0; }  body{ 	font-family:Arial, Helvetica, sans-serif; 	font-size:12px; 	color:#666; 	background:#FFF url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/header_loop.gif) repeat-x 0 0; 	padding-top:17px; }  .clear{ 	clear:both; }  .leftf{ 	float:left; }	  .right{ 	float:right; } 	 a{ 	text-decoration:none; }  a img, img{ 	border:none; }  h1, h1 a{ 	font-size:22px; 	font-weight:normal; 	color:#009cff; 	text-decoration:none; }  .head_mid h1{ 	padding-left:10px; }	  .mainlogo{ 	text-indent:-99999px; 	overflow:hidden; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/logo.gif) no-repeat left center; 	display:block; 	height:125px; 	width:300px; }  h2, h2 a{ 	font-size:16px; 	font-weight:normal; 	color:#009cff; 	text-decoration:none; }  #header{ 	width:974px; 	clear:both; 	margin:0 auto; 	height:294px; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/title_mid.gif) repeat-x 0 0; 	overflow:hidden; }  #header h1{ 	float:left; }  #header ul.navi{ 	float:right; 	padding-top:84px; 	padding-left:1px; 	padding-right:20px; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/ul_hack.gif) no-repeat left bottom; }  #header ul.navi li{ 	float:left; 	list-style:none;  	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/navi_basic.gif) no-repeat 0 0; 	width:95px; 	height:46px; 	text-align:center; 	overflow:hidden; }  #header ul.navi li.current_page_item{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/navi_hili.gif) no-repeat 0 0; }  #header ul.navi li a{ 	text-decoration:none; 	color:#818181; 	width:95px; 	height:31px; 	display:block; 	float:left; 	padding-top:15px; }  #header ul.navi li a:hover{ 	font-weight:bold; }  .head_left{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/title_left.gif) no-repeat 0 0; 	width:8px; 	height:294px; 	float:left; 	display:block; }  .linkcat h2{ 	display:none; }  #menu .df_menu_cont .linkcat { 	height:auto; }  .head_mid{ 	float:left; 	width:958px; }  .head_right{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/title_right.gif) no-repeat 0 0; 	width:8px; 	height:294px; 	float:left; 	display:block; }	  .contwrap{ 	width:974px; 	margin:0 auto; 	height:1%; 	overflow:hidden; }  .left{ 	width:710px; 	float:left; 	padding:18px; 	overflow:hidden; 	padding:18px 0; }  .left a{ 	color:#009CFF; }  .left a:hover{ 	border-bottom:1px dotted #009CFF; }  #menu{ 	width:245px; 	float:right; 	margin:15px 0; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/side_loop.gif) repeat-y 0 0; }  .menutop{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/side_top.gif) no-repeat 0 0; 	height:17px; 	display:block; 	clear:both; }  .df_menu_head{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/sideul.gif) no-repeat right center; 	width:218px; 	height:26px; 	text-align:center; 	display:block; 	clear:both; 	padding-top:10px; 	padding-left:14px; 	cursor:pointer; 	margin:10px 0; 	font-weight:bold; }  #menu .header_highlight{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/sideul_hili.gif) no-repeat right center; 	color:#FFF; 	display:block; }  .df_menu_cont{ 	display:none; 	height:1%; 	overflow:hidden; 	 }  .df_menu_cont ul{ 	padding:0 1px; }  #searchform{ 	padding-left:14px; }  #searchform #s{ 	padding:5px; 	color:#666; 	border:1px solid #CCC; 	width:205px; 	text-align:center; 	background:#EFEFEF; }  #searchform #s:hover, #searchform #s:focus{ 	background:#FFF; 	border:1px solid #999; }   .df_menu_cont li{ 	padding:0 14px; 	list-style:none; 	height:36px; 	background:#f5f5f5; }  .df_menu_cont li a{ 	display:block; 	padding:10px 5px; 	border-bottom:1px solid #CCC; 	text-decoration:none; 	color:#555; }  .df_menu_cont li a:hover{ 	border-bottom:1px solid #999; 	color:#222; }  .menubot{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/side_bot.gif) no-repeat 0 0; 	height:18px; 	display:block; 	clear:both; }  .footer{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/footer_loop.gif) repeat-x 0 0; 	height:30px; 	text-align:center; 	padding-top:13px; 	color:#AAA; }  .footer a{ 	text-decoration:none; 	color:#0099FF; }  .sorrydialog{ 	text-align:center; }  #snippets{ 	clear:both; }  .persnippet{ 	float:left; 	width:251px; 	overflow:hidden; 	padding:15px 32px 0 32px; }  .snip_top{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/snips_top.gif) no-repeat 0 0; 	height:11px; 	width:251px; 	display:block; 	overflow:hidden; }  .snip_mid{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/snips_mid.gif) repeat-y 0 0; 	display:block; 	height:1%; 	overflow:hidden; }  .snip_mid h2{ 	color:#FFF; 	text-align:center; 	font-size:12px; 	font-weight:bold; 	clear:both; }  .snip_mid ul{ 	padding:0 10px; }  .snip_mid li{ 	list-style:none; 	display:block; }  .snip_mid li a{ 	color:#999; 	text-decoration:none; 	height:25px; 	display:block; 	padding:8px 5px 0 5px; 	overflow:hidden; 	border-bottom:1px solid #595959; }  .snip_mid li a:hover{ 	background:#3f3f3f; 	color:#EEE; }	  .snip_bot{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/snips_bot.gif) no-repeat 0 0; 	height:10px; 	display:block; 	overflow:hidden; }  .social{ 	width:66px; 	height:90px; 	display:block; 	float:left; 	text-indent:-99999px; 	overflow:hidden; 	padding:5px 8px 5px 8px; }  .social.rss{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/social_rss.jpg) no-repeat bottom center; }  .social.tech{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/social_tech.jpg) no-repeat bottom center; }  .social.digg{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/social_digg.jpg) no-repeat bottom center; }  .left .post{ 	margin-bottom:10px; 	padding:20px 15px; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/postfooter.gif) no-repeat left bottom; }  .left .entry-meta{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/comment_top_focus.gif) repeat 0 0; 	padding:15px; 	border:1px solid #CCC; 	font-size:11px; 	margin:10px 0; }  .left .posttop{ 	overflow:hidden; }  input#submit{ 	border:1px solid #AAA; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/whitebutton.gif) repeat-x left bottom; 	color:#555; 	width:312px; 	padding:5px 10px; 	cursor:pointer; }  input#submit:hover{ 	border:1px solid #555; }  .left .posttitle{ 	float:left; }	  .left .indexomment{ 	float:right; 	font-size:11px; }   #commentform #author,#commentform #email,#commentform #url,#commentform textarea, #code { 	background:#FAFAFA; 	width:300px; 	padding:5px; 	border:1px solid #999; 	font-family:Arial, Helvetica, sans-serif; 	font-size:12px;	 	color:#666; }  #commentform{ 	padding:10px 0; }  #commentform p{ 	padding:5px 0; 	width:400px; 	margin:0 auto; }  #commentform #author:focus,#commentform #email:focus,#commentform #url:focus,#commentform textarea:focus,#commentform #author:hover,#commentform #email:hover,#commentform #url:hover,#commentform textarea:hover, #code:hover, #code:focus { 	background:#FFF; 	border:1px solid #444; 	 }  .commentlist li{ 	list-style:none; 	padding:15px; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/whitebutton.gif) repeat-x left bottom; 	border-bottom:1px solid #CCC; 	height:1%; 	overflow:hidden; }  .commentlist .commentmetadata{ 	float:right; 	 }  .commentlist cite, .commentlist cite a{ 	font-weight:bold; 	color:#FF6600; }  .commentlist p{ 	padding:5px 20px; }  .left .date{ 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/date.gif) no-repeat 0 0; 	width:83px; 	height:27px; 	float:left; 	padding-top:6px; 	font-weight:bold; 	padding-right:15px; }  .left .date div.month{ 	float:left; 	padding-left:8px; 	text-align:center; 	width:50px }  .left .date div.day{ 	float:left; 	padding-left:8px; 	color:#FFF;	 }  .left .storycontent{ 	padding:15px 0; }  .left .storycontent p{ 	padding:5px 0; 	line-height:18px; }  .left .storycontent ul, .left .storycontent ol{ 	padding-left:15px; }  .left .storycontent li{ 	list-style:none; 	background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/lis.gif) no-repeat left 10px; 	padding:5px 20px; }  .left .storycontent li p{ 	padding:0; }  .storycontent blockquote{ 	background:#FAFAFA; 	padding:5px 5px 5px 15px; 	border-left: 3px solid #CCC; 	margin-left:15px; }

KODLAR YAKINDA EKLENECEK

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol

Portfolio Slider Demo

Mini Slider with jQuery

E-Onlinem.Tr.Gg | Hizmette Sınır Tanımayan Plartform |

css tasarımlar