آختناقآت صمآء
11-02-2017, 04:30 AM
السلام عليكم ورحمة الله وبركاته
كيف حال الجميع ؟!
اليوم حبيت اقدم شي بسيط مربعات اعلانية تتكون من 6 مربعات بتأثير الblur وإستخدمت حركات
معاينة الكود
https://www.traidnt.net/vb/images/imgcache/2016/03/264c2fe82be33-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>
كيف حال الجميع ؟!
اليوم حبيت اقدم شي بسيط مربعات اعلانية تتكون من 6 مربعات بتأثير الblur وإستخدمت حركات
معاينة الكود
https://www.traidnt.net/vb/images/imgcache/2016/03/264c2fe82be33-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>