اليوم معى درس جميل وبسيط جدا , تصميم صندوق إشعارات مرتد بإستخدام JQuery & CSS3 تستخدمة فى أى غرض كمثلاً تظهر لزوار موقعك رسالة تنبية أو تحذير عند الضغط على زر معين وبشكل رائع وجذاب
تابع معى الشرح وقم بالتطبيق وبعدها قرر أين ستستخدمه ..

سوف نستخدم فى هذه الدرس HTML & CSS3 & JQuery

الخطوة الأولى : HTML

[cc lang="html"]

[/cc]
أنشئت div بإسم container وسوف يحتوى على صندوق الإشعارات وأيضاً الزر المسؤل عن إظهار الصندوق عند الضغط عليه بالإضافة إلى زر إضافى إستخدمته فى العودة لصفحة الدرس اثناء وجودك فى صفحة المثال على التطبيق , ويمكنك إستخدامة فى أى شئ تريده ” كما يمكنك حذفة ” ثم قمت بإنشاء div أخر بداخل container بإسم box وهو الصندوق المرتد وبداخله الصورة وعنوان الرسالة والرسالة ” فقرة ” ثم اضفت الزر الخاص بالعودة لصفحة الدرس ..

الخطوة الثانية : تنسيق الصفحة بالــ CSS3

[cc lang="css"]

*{
/* تصفير المحاذة الافتراضية للمتصفح وخصائص جسم الصفحة */
margin:0;
padding:0;
}

body{
font-size:14px;
color:#fcfcfc;
font-family:Arial, Helvetica, sans-serif;
background-image: url(images/bg.jpg);
direction: rtl;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 10%;
}

/* بداية صندوق الرسالة */
#container {
height:300px;
position:relative;
width:640px;
margin-top: 142px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
padding-top: 100px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
}
#box{
height:115px;
margin-top:-10px;
width:400px;
color:#494848;
text-shadow: #666 1px 1px 0 white;
font-family:’Myriad Pro’,Arial,Helvetica,sans-serif;
background-image: url(images/box-bg.png);
padding: 20px;
}
#box img{
float: left;
}

#box h1{
font-size:18px;
display:block;
padding: 5px;
float: right;
color: #FFF;
}
#box p{
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #0F0;
direction: rtl;
float: right;
}

#box,
#container, #container .back,
a.button{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#container .back {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
background-image: url(images/back-bg.png);
text-align: center;
display: block;
padding: 10px;
text-decoration: none;
width: 200px;
margin-right: auto;
margin-left: auto;
}
#container .back:hover {
color: #FC0;
background-image: url(images/btn-bg-hover.png);
}
/* زر إضغط هنا */

a.button{
color:white;
letter-spacing:-2px;
padding:20px;
display:block;
text-shadow:1px 1px 0 #145982;
font-family:’Myriad Pro’, Arial, Helvetica, sans-serif;
font-size:36px;
font-weight:bold;
text-align:center;
width:350px;
margin:60px auto;
background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
background-image: url(images/btn-bg.png);
text-decoration: none;
}

a.button:hover{
text-decoration:none;
background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
background-image: url(images/btn-bg-hover.png);
color: #FC0;
}
/* نهاية صندوق الرسالة */
[/cc]

وهكذا تم تنسيق الصفحة وتنسيق الصندوق كما بالمثال , ويمكنك تنسيق الصفحة بالطريقه التى تروق لك ..

الخطوة الأخيرة : إستدعاء مكتبة JQuery وملفات التطبيق برأس الصفحة

وهى ملفات الجافاسكربت المسؤلة عن إحفاء وإظهار الصندوق بطريقة مرتدة , نستدعى الملفات قبل نهاية وسم الهيد </head>

[cc lang="html"]




[/cc]

وهكذا إنتهى درسنا لليوم وأعذرونى إن كانت طريقتى فى الشرح ليست جيده وأوعدكم بتطوير إسلوبى فى الشرح ..

أتمنى رؤية تطبيقاتكم ..