|| - حياكم الله أعضاء وزوار معهد مطور ,, ومرحبا دائما بكم في هذا الصرح المجاني free التطويري ..
|| - نأمل دائما ان نكون عند حسن الظن عند جميع المطورين .. والمحبين للعالم التطويري ..
ونأمل دائما بتقديم أفضل الخدمات في هذا الركن وحصريا على معهد مطور ..
اخوانى الكرام موعدنا اليوم مع
التطبيق الاول : وهو شرح طريقة لعمل مستعرص للصور رائع جدا بال css3 فقط
مثال على تطبيقنا لليوم
من هنا
ويمكنكم تحمل ملفات التطبيق من المرفقات
ولنبدأ الشرح طريقة باسم الله الرحمن الرحيم
اولا: تركيب installة html الاساسية
index.html
رمز Code:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>التطبيق الاول </title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/slideshow.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <h2>AHMED SWAILM</h2> <a href="http://www.mtwer.com/vb" class="stuts"><span>mtwer.com</span></a> </header> <div class="container" id="container"> <!-- caps, non-existent items --> <span id="slide1" class="cap"></span> <span id="slide2" class="cap"></span> <span id="slide3" class="cap"></span> <span id="slide4" class="cap"></span> <span id="slide5" class="cap"></span> <ul class="slider"> <!-- left arrow --> <li class="lArrow"> <a href="#slide5" class="a5"></a> <a href="#slide4" class="a4"></a> <a href="#slide3" class="a3"></a> <a href="#slide2" class="a2"></a> <a href="#slide1" class="a1"></a> </li> <!-- slides --> <li class="slides"> <img src="images/0.jpg" alt="" class="g0" /> <img src="images/1.jpg" alt="" class="g1" /> <img src="images/2.jpg" alt="" class="g2" /> <img src="images/3.jpg" alt="" class="g3" /> <img src="images/4.jpg" alt="" class="g4" /> <img src="images/5.jpg" alt="" class="g5" /> </li> <!-- right arrow --> <li class="rArrow"> <a href="#slide5" class="a5"></a> <a href="#slide4" class="a4"></a> <a href="#slide3" class="a3"></a> <a href="#slide2" class="a2"></a> <a href="#slide1" class="a1"></a> </li> <!-- tracker --> <li class="track"> <a href="#slide1" class="tr1"></a> <a href="#slide2" class="tr2"></a> <a href="#slide3" class="tr3"></a> <a href="#slide4" class="tr4"></a> <a href="#slide5" class="tr5"></a> </li> </ul> </div> </body> </html>
فى هذا الجزء استدعينا ملفات css3 للتنسيق والعرض التى سنعمل عليها
رمز Code:
<link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/slideshow.css" rel="stylesheet" type="text/css" />
اسهم التمرير لليمين ولليسار
ملاحظة عند اضافة صور جديد يجب اضافتها لاسهم التمرير ايضا
رمز Code:
<!-- left arrow --> <li class="lArrow"> <a href="#slide5" class="a5"></a> <a href="#slide4" class="a4"></a> <a href="#slide3" class="a3"></a> <a href="#slide2" class="a2"></a> <a href="#slide1" class="a1"></a> </li> <!-- right arrow --> <li class="rArrow"> <a href="#slide5" class="a5"></a> <a href="#slide4" class="a4"></a> <a href="#slide3" class="a3"></a> <a href="#slide2" class="a2"></a> <a href="#slide1" class="a1"></a> </li>
وهذا جزء خاص بالصور التى سيتم عرضها وهى موجودة بمجلد images
رمز Code:
<li class="slides"> <img src="images/0.jpg" alt="" class="g0" /> <img src="images/1.jpg" alt="" class="g1" /> <img src="images/2.jpg" alt="" class="g2" /> <img src="images/3.jpg" alt="" class="g3" /> <img src="images/4.jpg" alt="" class="g4" /> <img src="images/5.jpg" alt="" class="g5" /> </li>
وان شاء الله يكون هذا الكود code سهل جدا للجميع
ثانيا : ملف css3
css/slideshow.css
رمز Code:
span.cap { display:none; } ul.slider { margin:0 auto; height:455px; list-style:none; position:relative; width:706px; } ul.slider li { float:left; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } ul.slider li.slides { border:1px solid #888; height:453px; overflow:hidden; position:relative; width:604px; z-index:10; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } ul.slider li.slides img { display:block; left:50%; opacity:0; position:absolute; top:0; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } ul.slider li.slides img.g1, ul.slider li.slides img.g2, ul.slider li.slides img.g3, ul.slider li.slides img.g4, ul.slider li.slides img.g5 { margin-left:-302px } ul.slider li.lArrow, ul.slider li.rArrow { background-color:#bbb; border:2px solid #888; height:451px; position:relative; width:48px; z-index:5; } ul.slider li.lArrow { border-radius:100px 0 0 100px; border-width:2px 0 2px 2px; } ul.slider li.rArrow { border-radius:0 100px 100px 0; border-width:2px 2px 2px 0; } ul.slider li.lArrow a, ul.slider li.rArrow a { display:block; height:100%; left:0; position:absolute; top:0; width:50px; } ul.slider li.lArrow:hover { background-color:#eee; left:2px; } ul.slider li.rArrow:hover { background-color:#eee; left:-2px; } ul.slider li.track { background-color:rgba(255,255,255,0.3); clear:left; height:25px; margin-left:51px; margin-top:-25px; position:relative; text-align:center; width:604px; z-index:20; } ul.slider li.track a { background-color:#fff; display:inline-block; height:15px; margin:5px; width:10px; border-radius:5px; -moz-box-shadow:2px 1px 1px #000000; -ms-box-shadow:2px 1px 1px #000000; -webkit-box-shadow:2px 1px 1px #000000); -o-box-shadow:2px 1px 1px #000000; box-shadow:2px 1px 1px #000000; } ul.slider li.track a:hover { background-color:#0f0; } span#slide1:target ~ ul.slider li.slides .g1, span#slide2:target ~ ul.slider li.slides .g2, span#slide3:target ~ ul.slider li.slides .g3, span#slide4:target ~ ul.slider li.slides .g4, span#slide5:target ~ ul.slider li.slides .g5 { opacity:1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } ul.slider li.slides .g0 { margin-left:-302px; opacity:1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } span#slide1:target ~ ul.slider li.slides .g0, span#slide2:target ~ ul.slider li.slides .g0, span#slide3:target ~ ul.slider li.slides .g0, span#slide4:target ~ ul.slider li.slides .g0, span#slide5:target ~ ul.slider li.slides .g0 { opacity:0; -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } span#slide1:target ~ ul.slider li.track .tr1, span#slide2:target ~ ul.slider li.track .tr2, span#slide3:target ~ ul.slider li.track .tr3, span#slide4:target ~ ul.slider li.track .tr4, span#slide5:target ~ ul.slider li.track .tr5 { background-color:#f00; } span#slide1:target ~ ul.slider li.lArrow a, span#slide1:target ~ ul.slider li.rArrow a {z-index:10} span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100} span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100} span#slide2:target ~ ul.slider li.lArrow a, span#slide2:target ~ ul.slider li.rArrow a {z-index:10} span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100} span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100} span#slide3:target ~ ul.slider li.lArrow a, span#slide3:target ~ ul.slider li.rArrow a {z-index:10} span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100} span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100} span#slide4:target ~ ul.slider li.lArrow a, span#slide4:target ~ ul.slider li.rArrow a {z-index:10} span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100} span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100} span#slide5:target ~ ul.slider li.lArrow a, span#slide5:target ~ ul.slider li.rArrow a {z-index:10} span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100} span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}
نلاحظ نحن فى هذا الجزء
رمز Code:
ul.slider { margin:0 auto; height:455px; list-style:none; position:relative; width:706px; }
حددنا ارتفاع العرض =445
وكذلك عرضه =706
وموضعة = relative
وتلى ذلك وضع معايير الحركة واتجاهاتها
وضبط خلفية العارص ونوعها
ولعل هذا الكود code بسيط جدا ولا يحتاج لمزيد من الشرح طريقة
وانا حاضر لاى سؤال او استفسار وأتمنى وضع الأسئلة والإستفسارات من هنا
مطور Mtwer
اخواننا الكرام هنا ينتهى تطبيقنا الاول معتمدا على css3 واكوادها فقط
صانعا مستعرصا للصور جديد وقابل للاستخدام فى المواقع والمدونات
وباكواد بسيطة جدا
شكرا لكم وانتظرونا فى معهد الحصريات : مطور
ط´ط±ط* ط¹ظ…ظ„ ظ…ط³طھط¹ط±ط¶ طµظˆط± ط±ط§ط¦ط¹ ط¨ط§ظ„ظ€ css3
Script Image.zip (355.3 كيلوبايت, عدد مرات المشاهدة 27 مرة) [/TR]
رد مع اقتباس
