كود قائمة مواضيع مميزة بتقنية 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