شرح طريقة عمل مستعرض صور رائع بالـ css3
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط¹ظ…ظ„ ظ…ط³طھط¹ط±ط¶ طµظˆط± ط±ط§ط¦ط¹ ط¨ط§ظ„ظ€ css3
http://www.mtwer.com/ar/wp-content/u...3267264592.png
|| - حياكم الله أعضاء وزوار معهد مطور ,, ومرحبا دائما بكم في هذا الصرح المجاني free التطويري ..
|| - نأمل دائما ان نكون عند حسن الظن عند جميع المطورين .. والمحبين للعالم التطويري ..
ونأمل دائما بتقديم أفضل الخدمات في هذا الركن وحصريا على معهد مطور ..
http://www.mtwer.com/ar/wp-content/uploads/DS.png
اخوانى الكرام موعدنا اليوم مع
التطبيق الاول : وهو شرح طريقة لعمل مستعرص للصور رائع جدا بال css3 فقط
http://s19.postimage.org/pjfldczrn/0...4_05_18_29.jpg
http://www.mtwer.com/ar/wp-content/uploads/DS.png
مثال على تطبيقنا لليوم
من هنا
ويمكنكم تحمل ملفات التطبيق من المرفقات
http://www.mtwer.com/ar/wp-content/uploads/DS.png
ولنبدأ الشرح طريقة باسم الله الرحمن الرحيم
اولا: تركيب installة html الاساسية
index.html
رمز Code:
التطبيق الاول
فى هذا الجزء استدعينا ملفات css3 للتنسيق والعرض التى سنعمل عليها
رمز Code:
اسهم التمرير لليمين ولليسار
ملاحظة عند اضافة صور جديد يجب اضافتها لاسهم التمرير ايضا
رمز Code:
وهذا جزء خاص بالصور التى سيتم عرضها وهى موجودة بمجلد images
رمز Code:
![""]("images/0.jpg")
![""]("images/1.jpg")
![""]("images/2.jpg")
![""]("images/3.jpg")
![""]("images/4.jpg")
![""]("images/5.jpg")
وان شاء الله يكون هذا الكود code سهل جدا للجميع
http://www.mtwer.com/ar/wp-content/uploads/DS.png
ثانيا : ملف 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
http://www.mtwer.com/ar/wp-content/uploads/DS.png
اخواننا الكرام هنا ينتهى تطبيقنا الاول معتمدا على css3 واكوادها فقط
صانعا مستعرصا للصور جديد وقابل للاستخدام فى المواقع والمدونات
وباكواد بسيطة جدا
شكرا لكم وانتظرونا فى معهد الحصريات : مطور
الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif Script Image.zip (355.3 كيلوبايت, عدد مرات المشاهدة 27 مرة) [/TR]
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
