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

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

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

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

معاينة الكود

https://www.traidnt.net/vb/images/im...22432813-1.gif

استخدم كود 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>