فكرة وجود إعلانات في موقعك هي فكرة جميلة
لكن السؤال الآن , هل تلك الأعلانات سـ تضيف جمالية لشكل موقعك أم أنها ستقلل من الجمالية
في هذا الدرس مفصل سنجعل أي إعلان يبدو بشكل جميل و سيجعل عدد النقرات ترتفع أكثر و أكثر
هل أنت مستعد ؟
حسناً لنبدأ
نريد أن نتعلم كيف نعرض الإعلان بهذة الطريقة

مرر الماوس على صورة جوجل GOOGLE اقصى اليسار


اعرض إعلاناتك بطريقة رائعة CSS3

و الدرس مفصل جداً جداً سهل

أولاً لنبدأ بكود code الـ HTML

أولاً نضيف العنصر الأول ليكون الخلفية اللونية و نضيف بداخلة العنصر الثاني ليكون صورة الاعلان

تابع معي

HTML
رمز Code:
<div class=&quot;ads-background&quot;> <!--العنصر الأول (الخلفية)--> <div class=&quot;ads-image&quot;> <!--العنصر الثاني (صورة الأعلان)--> <!--صورة الاعلان مع رابط التوجية--> <a href=&quot;#&quot;><img src=&quot;http://www.mtwwr.com/wp-content/uploads/2014/06/google-ads.png&quot; /></a> <!--إنتهاء صورة الاعلان مع رابط التوجية--> </div> <!--إنتهاء العنصر الثاني--> </div> <!--إنتهاء العنصر الاول-->

قمت بالتعليق داخل الكود code لتوضيح بداية العنصر و إنتهاءة
حسناً الآن قمنا بكتابة كود code الـ HTML
نأتي الآن للأهم و هي CSS بمستواها الثالث
كما هو واضح بالمثال في اعلى التدوينة
المطلوب للعنصر الاول هو جعل خلفية الاعلان باللون الأحمر و جعل حدودها منحنية و عند مرور الماوس تصبح الحدود بالشكل الطبيعي و غير منحنية + ظلال داخلية + تباطؤ زمني لعودة الحدود عند مرور الماوس
المطلوب للعنصر الثاني هو جعل للصورة حد بحجم 3 بيكسل شفاف مع ظلال خارجية خفيفة

أرأيت مدى السهولة

الآن لنبدأ بـ CSS3


CSS

رمز Code:
.ads-background{ /* توسيع المساحة الداخلية */ padding: 9px 9px 15px 15px; /* العرض و الطول */ width: 125px; height: 125px; /* لون الخلفية */ background: #f84f6c; /* إنحناء الحد الأيمن السفلي */ border-bottom-right-radius: 75px; /* إنحناء الحد الأيسر الأعلى */ border-top-left-radius: 75px; /* الظلال الداخلية للمتصفحات الحديثة */ box-shadow: inset 0 0 8px 0 rgba(0,0,0,0.83); /* التباطؤ الزمني لمتصفحات كروم و سفاري - الاصدارات القديمة */ -webkit-transition: all .2s linear; /* التباطؤ الزمني لمتصفحات فايرفوكس */ -moz-transition: all .2s linear; /* التباطؤ الزمني لمتصفحات أوبرا */ -o-transition: all .2s linear; } .ads-background:hover { /* عودة إنحناء الحد الأيمن السفلي */ border-bottom-right-radius: 0; /* عودة إنحناء الحد الأيسر الأعلى */ border-top-left-radius: 0; /* التباطؤ الزمني لمتصفحات كروم و سفاري - الاصدارات القديمة */ -webkit-transition: all .2s linear; /* التباطؤ الزمني لمتصفحات فايرفوكس */ -moz-transition: all .2s linear; /* التباطؤ الزمني لمتصفحات أوبرا */ -o-transition: all .2s linear; } .ads-image{ /* الحدود الشفافة حول الصورة */ border:3px solid transparent; /* الظلال الخارجية لمتصفحات كروم و سفاري - الاصدارات القديمة */ -webkit-box-shadow:0 0 8px rgba(0,0,0,0.3); /* الظلال الخارجية لمتصفحات فايرفوكس */ -moz-box-shadow:0 0 8px rgba(0,0,0,0.3); /* الظلال الخارجية لمتصفحات أوبرا */ -o-box-shadow:0 0 8px rgba(0,0,0,0.3); /* الظلال الخارجية للمتصفحات الحديثة */ box-shadow:0 0 8px rgba(0,0,0,0.3); /* العرض و الطول */ width: 125px; height: 125px; }
معاينة مباشرة

اعرض إعلاناتك بطريقة رائعة CSS3


الموضوع الاصلي من




مدونة blog مطور | اعرض إعلاناتك بطريقة رائعة CSS3





©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©