كود قائمة مواضيع مميزة بتقنية css 2016

2016 , مميزة , مواضيع , بتقنية , قائمة

كود قائمة مواضيع مميزة بتقنية css 2016

السلام عليكم ورحمة الله وبركاته


كيف حال الجميع ؟!

اليوم حبيت اقدم شي بسيط مربعات اعلانية تتكون من 6 مربعات بتأثير الblur وإستخدمت حركات


معاينة الكود





استخدم كود HTML عند تغيير المسميات
واستخدم كود css لتغيير الصور
وتحديدا
.Menu #m1 h1
.Menu #m2 h1
.Menu #m3 h1
.Menu #m4 h1
.Menu #m5 h1
.Menu #m6 h1
هذي اكواد الصور مرتبة


في خانة الـ

 
background-image: url(../../Pictures/jkjkj2.png);

قم بتغيير رابط الصورة من هنا


وايضا لا تنسى تغير لون الخلفية ليتناسب مع لون الصورة
من الكود

 
.Menu #m1 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	float: left; 	overflow: hidden; 	background-color: #09F; }

والذي يعني الصورة الاولى حسب الرقم من هنا تغير لون الخلفية تبع المربع

 
background-color: #09F;

كود HTML

</div></a> <br /> <a href="www"><div id="m4"> <h2>موضوع فوتوشوب <br /> <b>يا كثر ما ابلعها واردد تساهيل </b> </h2>  <h1>  </h1> </div></a>  <a href="www"><div id="m5"> <h2>موضوع فوتوشوب <br /> <b>يا كثر ما ابلعها واردد تساهيل </b> </h2>  <h1>  </h1> </div></a> <a href="www"><div id="m6"> <h2>موضوع فوتوشوب <br /> <b>يا كثر ما ابلعها واردد تساهيل </b> </h2>  <h1>  </h1> </div></a> </div>

كـود CSS

<style type="text/css"> body { 	margin: 0px; 	height: 1300px; } .Menu { 	display: table; 	margin-top: 14px; 	margin-right: auto; 	margin-left: auto; 	height: 402px; 	width: 1002px; 	box-shadow: 1px 2px 18px #949494; 	background-color: #F3F3F3; }   .Menu #m1 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	float: left; 	overflow: hidden; 	background-color: #09F; }  .Menu #m1  h1 { 	height: 201px; 	width: 334px; 	margin: 0px; 	background-image: url(../../Pictures/jkjkj2.png); 	background-repeat: no-repeat; 	background-position: center; 	filter: blur(30px); 	-webkit-filter: blur(30px);  }  .Menu #m1  h1:hover { 	transition: filter 1s; 	-webkit-transition: filter 1s;      -moz-transition:filter 1s; 	filter: blur(0px); 	-webkit-filter: blur(0px); 	  } .Menu #m1  h1 { 	transition: filter 3s; 		-webkit-transition: filter 3s;    } .Menu #m1 h2  { 	font-family: "Arial Black", Gadget, sans-serif; 	font-size: 23px; 	font-weight: 100; 	color: #FFF; 	text-decoration: none; 	float: left; 	margin-left: 90px; 	clear: left; 	margin-top: 140px; 	opacity: 0.8; 	text-shadow: 1px 1px 6px #000000; 	position: fixed; 	z-index: 100; } .Menu #m1 h2 b  { 	font-family: Tahoma, Geneva, sans-serif; 	font-size: 16px; 	font-weight: normal; 	color: #000; 	text-decoration: none; 	text-shadow: none; 	float: left; 	margin-left: -13px; }  .Menu #m2 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	overflow: hidden; 	float: left; 	background-color: #FC0; }  .Menu #m2  h1 { 	height: 201px; 	width: 334px; 	margin: 0px; 	background-image: url(../../Pictures/jkjkj.png); 	background-repeat: no-repeat; 	background-position: center; 	filter: blur(30px); 		-webkit-filter: blur(30px);  }  .Menu #m2  h1:hover { 	transition: filter 1s; 	filter: blur(0px); 			-webkit-filter: blur(0px); 				-webkit-transition: filter 1s;   	  } .Menu #m2  h1 { 	transition: filter 3s; 	float: left; 		-webkit-transition: filter 3s;   } .Menu #m2 h2  { 	font-family: "Arial Black", Gadget, sans-serif; 	font-size: 23px; 	font-weight: 100; 	color: #FFF; 	text-decoration: none; 	float: left; 	margin-left: 90px; 	clear: left; 	margin-top: 140px; 	opacity: 0.8; 	text-shadow: 1px 1px 6px #000000; 	position: fixed; 	z-index: 100; } .Menu #m2 h2 b  { 	font-family: Tahoma, Geneva, sans-serif; 	font-size: 16px; 	font-weight: normal; 	color: #000; 	text-decoration: none; 	text-shadow: none; 	float: left; 	margin-left: -13px; } .Menu #m3 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	overflow: hidden; 	float: left; 	background-color: #74c65b; }  .Menu #m3  h1 { 	height: 201px; 	width: 334px; 	margin: 0px; 	background-image: url(../../Pictures/jkjkj23.png); 	background-repeat: no-repeat; 	background-position: center; 	filter: blur(30px); 	-webkit-filter: blur(30px); }  .Menu #m3  h1:hover { 	transition: filter 1s; 	filter: blur(0px); 		-webkit-transition: filter 1s;  		-webkit-filter: blur(0px);  }  .Menu #m3  h1 { 	transition: filter 3s; 	float: left; 		-webkit-transition: filter 3s;  	  } .Menu #m3 h2  { 	font-family: "Arial Black", Gadget, sans-serif; 	font-size: 23px; 	font-weight: 100; 	color: #000; 	text-decoration: none; 	float: left; 	margin-left: 90px; 	clear: left; 	margin-top: 140px; 	opacity: 0.8; 	text-shadow: 1px 1px 6px #000000; 	position: fixed; 	z-index: 100; } .Menu #m3 h2 b  { 	font-family: Tahoma, Geneva, sans-serif; 	font-size: 16px; 	font-weight: normal; 	color: #000; 	text-decoration: none; 	text-shadow: none; 	float: left; 	margin-left: -13px; } .Menu #m4 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	overflow: hidden; 	float: left; 	clear: left; 	background-color: #63C; }  .Menu #m4  h1 { 	height: 201px; 	width: 334px; 	margin: 0px; 	background-image: url(../../Pictures/jkjkj234.png); 	background-repeat: no-repeat; 	background-position: center; 	filter: blur(30px); 		-webkit-filter: blur(30px);  }  .Menu #m4  h1:hover { 	transition: filter 1s; 	filter: blur(0px); 			-webkit-filter: blur(0px); 				-webkit-transition: filter 1s;   	  } .Menu #m4  h1 { 	transition: filter 3s; 	float: left; 		-webkit-transition: filter 3s;   } .Menu #m4 h2  { 	font-family: "Arial Black", Gadget, sans-serif; 	font-size: 23px; 	font-weight: 100; 	color: #FF3; 	text-decoration: none; 	float: left; 	margin-left: 90px; 	clear: left; 	margin-top: 140px; 	opacity: 0.8; 	text-shadow: 1px 1px 6px #000000; 	position: fixed; 	z-index: 100; } .Menu #m4 h2 b  { 	font-family: Tahoma, Geneva, sans-serif; 	font-size: 16px; 	font-weight: normal; 	color: #FFF; 	text-decoration: none; 	text-shadow: none; 	float: left; 	margin-left: -13px; } .Menu #m5 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	overflow: hidden; 	float: left; 	background-color: #5a585e; }  .Menu #m5  h1 { 	height: 201px; 	width: 334px; 	margin: 0px; 	background-image: url(../../Pictures/jkjkj2346.png); 	background-repeat: no-repeat; 	background-position: center; 	filter: blur(30px); 		-webkit-filter: blur(30px);  }  .Menu #m5  h1:hover { 	transition: filter 1s; 	filter: blur(0px); 		-webkit-filter: blur(0px); 	-webkit-transition: filter 1s;  	  } .Menu #m5  h1 { 	transition: filter 3s; 	float: left; 		-webkit-transition: filter 3s;   } .Menu #m5 h2  { 	font-family: "Arial Black", Gadget, sans-serif; 	font-size: 23px; 	font-weight: 100; 	color: #000; 	text-decoration: none; 	float: left; 	margin-left: 90px; 	clear: left; 	margin-top: 140px; 	opacity: 0.8; 	text-shadow: 1px 1px 6px #000000; 	position: fixed; 	z-index: 100; } .Menu #m5 h2 b  { 	font-family: Tahoma, Geneva, sans-serif; 	font-size: 16px; 	font-weight: normal; 	color: #FFF; 	text-decoration: none; 	text-shadow: none; 	float: left; 	margin-left: -13px; } .Menu #m6 { 	height: 201px; 	width: 334px; 	background-repeat: no-repeat; 	overflow: hidden; 	float: left; 	background-color: #df3178; }  .Menu #m6  h1 { 	height: 201px; 	width: 334px; 	margin: 0px; 	background-image: url(../../Pictures/jkjkj2346s.png); 	background-repeat: no-repeat; 	background-position: center; 	filter: blur(30px); 	-webkit-filter: blur(30px); }  .Menu #m6  h1:hover { 	transition: filter 1s; 	filter: blur(0px); 		-webkit-filter: blur(0px); 	-webkit-transition: filter 1s;  	  } .Menu #m6  h1 { 	transition: filter 3s; 	float: left; 		-webkit-transition: filter 3s;   } .Menu #m6 h2  { 	font-family: "Arial Black", Gadget, sans-serif; 	font-size: 23px; 	font-weight: 100; 	color: #FF0; 	text-decoration: none; 	float: left; 	margin-left: 90px; 	clear: left; 	margin-top: 140px; 	opacity: 0.8; 	text-shadow: 1px 1px 6px #000000; 	position: fixed; 	z-index: 100; } .Menu #m6 h2 b  { 	font-family: Tahoma, Geneva, sans-serif; 	font-size: 16px; 	font-weight: normal; 	color: #FFF; 	text-decoration: none; 	text-shadow: none; 	float: left; 	margin-left: -13px; } </style>

المصدر: منتديات تراتيل شاعر - من قسم: تطوير المواقع والمنتديات ▪●

---

;,] rhzlm l,hqdu lld.m fjrkdm css 2016 lld.m l,hqdu fjrkdm

—
موضوع متعوب عليه )...
اهنئك ع إختياركك ياذوق

سلمت يداك على الطرح
يعطيك ربي العافيه
بـ إنتظارجديدك بكل شوق
دمت بود

كُلِ الثَنَآءِ لِ جميِلْ إِنتقائك....!
عُبقْ الوُردْ المُعتقْ بِالنَرجسِ لِروُحكْ.’

يعطيك ربي ألف عافيه..
بإنتظار جديدك بكل شوق.
لك مني جزيل الشكر والتقدير لاعدمناك...

يعطيك آلعافيه
وسلمت الأنآمـل المتألقه
على روعة جلبها وانتقائها الراقي
بإنتظار روائعك القادمه بشوووق

تسلم ايدك

يعتيك العافية

يعطيك الف عآفيه على الطرح الرائع..
لاحرمنا منك ..آبدآ..ولآمن ابدآعك..
بآنتظار جديدك المتميزورائع
دمتم بسعآدهـ

*
, ،
/،
طرح رآئع وراقي
تحية عطرة ل روحك الجميلة
شكراً لك من القلب على هذآ العطاء

تسسسلم الايـآدي
الله يعطيك الف عافيه يـآرب
لروحك الجوري
وودي