كود: كيفية إنشاء slide up بواسطة الِ CSS3
في هذه التدوينة إن شاء الله سأشرح لكم كيفية إنشاء silde up بواسطة السي إس إس 3
بالطبع هذه التقنية ليست مدعومة من المتصفح الغبي إكسبلورر (^_^) ههه
مثال للslide up
كود: كيفية إنشاء slide up بواسطة الِ CSS3
لاحظوا جيدا عند مرور الماوس على المستطيل سيظهر لنا مستطيل أخر بشكل جميل و بشكل ديناميكي.
مثل هذه التقنيات كانت توجد فقط بإستعمال الjQuery لكن الأن نستطيع عملها فقط من خلال الcsss .
لنبدأ على بركة الله...
أولا ننشئ ملف HTML و نسميه index
نكتب الأكواد الخاصة بالملف HTML
<
كود بلغة HTML:
html> <head> <title> Silde up Tuts by Anass Qyouya</title> </head> <body> </body> </html>
نقوم بالحفظ و نعاين ——-> لاشيء يظهر (عادي لووول)
</div>
تساؤل …
س: السلايد أب عبارة عن ماذا؟
ج: عندما نضغط عليه يأخدنا الى صفحة أخرى يعني أن silde up عبارة عن رابط.
جيد جداََ
حسناََ… داخل body نقوم بوضع section و نعطيها class
تم داخل الsection سنضع الرابط
كود بلغة HTML:
<div id="wrap"> <h2> Silde Up Tuts </h2> <section class="slide-up-boxes"> <a href="http://anassq.eb2a.com/"> موقع أنس كيويا </a> </section> </div>
</div>
نعاين الأن …… سنرى التالي
… ليس بشيء مفاجىء
نقوم بكتابة أوسمة الإستايل قبل وسم ختم الهيد
كود بلغة HTML:
<style> هنا سنكتب الإستايلات الخاصة بالsilde up </style> </head>
سنبدأ بالرابط
داخل وسمي style سنكتب التالي
كود بلغة HTML:
.slide-up-boxes a{ display:block; background: #fafafa; height:65px; width:234px; margin:0 0 20px 0; border:1px solid #ededed; }
* لون الخلفية
** عرض و إرتفاع المستطيل
*** المسافة بين المربع و مايوجد أسفله
**** الإطار
لنعاين النتيجة…
كما تشاهدون هناك محتويين في مربع واحد .. طيب كيف ؟
سنقوم بوضع العنوان “موقع أنس كيويا” داخل وسم h5
و مباشرة أسفل العنوان سنضيف div بدون أي class أو id و هذا ال div سيحتوي على المحتوى الثاني
كود بلغة HTML:
<a href="http://anassq.eb2a.com/"> <h5> موقع أنس كيويا</h5> <div> موقع مفربي شامل شخصي، ترفيهي، تطويري </div> </a>
</div>
معاينة ….
سوف نعطي لل h5 عرض و إرتفاع slide-up-boxes بالإضافة الى بعض الجماليات
إذاََ سنضيف في منطقة الإستايل الكود التالي :
كود بلغة HTML:
.slide-up-boxes h5{ font-size:14px; font-weight:bold; height:65px !important; text-align:center; line-height:65px; margin:0; } و أيضاََ لا نريد أن يضهر المحتوى الثاني لذا سنضيف هذه الخاصية الى slide-up-boxes a. overflow:hidden;
معاينة الناتج ….
و أيضا نضيف بعض الخصائص لل div (المحتوى الثاني)
كود بلغة HTML:
.slide-up-boxes div{ height:65px; padding:10px; font-size: 12px; color:#fff; font-weight: bold; text-align:right; line-height:1.2; }
نحن الأن نريد عند مرور الماوس على الرابط يظهر لنا المحتوى الثاني
إذا سنكتب الكود التالي في منطقة الستايل
كود بلغة HTML:
.slide-up-boxes a:hover h5{ margin-top:-65px;}
لاحظ الأن عند مرور الماوس يضهر المحتوى الثاني
تمام … الأن ندخل الى الcss3 سنستعمل transition يعني الإنتقال
سنضيف هذا الكود
كود بلغة HTML:
-moz-transition: margin-top 0.2s linear; -webkit-transition: margin-top 0.2s linear; -o-transition: margin-top 0.2s linear;
</div>
ماذا يعني؟؟
يعني أن يقوم بعملية الإنتقال بسلاسة من margin-top:0px; الى margin-top:-65px;
شاهد المعاينة ….
الأن سنقوم بتدوير المحتوى الثاني قليلا و لأجل ذلك سنحتاج الى transform
نضيف الكود التالي الى خصائص div
كود بلغة HTML:
-moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -webkit-transform: rotate(-8deg)
قد تلاحظون أنه لازال هناك جزء من المحتوى الثاني ظاهراََ
</div>
لذلك سنجعلها شفافة.. نضيف الكود التالى الى خصائص الdiv
كود بلغة HTML:
opacity:0;
و نضيف الكود التالى الى الاستايل لكي يجعل الdiv غير شفاف عند مرور الماوس
كود بلغة HTML:
.slide-up-boxes a:hover div{ opacity:1; }
ثم نضيف بعض الcss3 لكي يكون التأثير جميلا
سنضيف الى .slide-up-boxes a:hover div
-
كود بلغة HTML:
moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); و الى .slide-up-boxes div -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear;
طيب … فلنقم بنسخ و لصق الرابط عدة مرات
كود بلغة HTML:
<a href="http://anassq.eb2a.com/"> <h5> موقع أنس كيويا</h5> <div> موقع مفربي شامل شخصي، ترفيهي، تطويري </div> </a> <a href="http://anassq.eb2a.com/"> <h5> موقع أنس كيويا</h5> <div> موقع مفربي شامل شخصي، ترفيهي، تطويري </div> </a>
</div>
للمعاينة …
و الأن سنقوم بعمل بعض الإستيلات الخاصة بالمحتوى الثاني
نضيف الكود
التالي الى منطقة
الإستايل
كود بلغة HTML:
.slide-up-boxes a:nth-child(1) div { background: #C10000 url(img1.png) 95% 50% no-repeat; padding-right: 60px;} .slide-up-boxes a:nth-child(2) div { background: #FFC800 url(img2.png) 95% 50% no-repeat; padding-right: 60px;} .slide-up-boxes a:nth-child(3) div { background: #0087AD url(img3.png) 95% 50% no-repeat; padding-right: 60px;}
nth-child : نقوم عن طريقها بتحديد أي جزء نريد القيام بتطبيق الإستايل يعني رقم1 يدل على ال رابط الأول و رقم 2 يدل على الرابط الثاني و رقم 3 يدل على الرابط الثالث و هكذا دواليك … 4 …5 …6 …
* لون الخلفية
** رابط الصورة المتواجدة في الخلفية
*** إحداثيات الصورة (يمكنك تغييرها بما يناسبك)
**** المسافة الداخلية بين الإطار و النص من جهة اليمين
للمعاينة …. بعد مرور الماوس
حسناََ ستلاحظون أن هناك فرق … لأنني قمت بإضافة بعض الإستيلات للرابط مثل لون خط و نوع الخط و حجمه و أيضاََ إزالة السطر أسفل الروابط
أضف الى .slide-up-boxes div الخصائص التالية:
كود بلغة HTML:
color:#fff; font-family:tahoma; font-size:12px; font-weight: bold; و أضف الى .slide-up-boxes h5 الخصائص التالية font-family:tahoma; font-weight:bold;
وأضف الكود
التالى الى الإستايل
كود بلغة HTML:
#wrap{ direction: rtl; margin:auto; width:300px;} #wrap a{ text-decoration: none;}
وهكذا نكون قد وصلنا الى نهاية الدرس
و في الأخير أمل أن يعجبكم الدرس و أن تستفيدو منه
أه نسيت هذا ملف index الذي كنت
أعمل عليه لشرح الدرس
لتحميله من
هنا