في هذه التدوينه سوف أتحدث عن كيفية عمل تطبيق متحرك وديناميكي باستخدام تأثيرات css3 والتي كان في الماضي يتم الحصول علي هذا التأثير من خلال جمع العديد من الصور والجافا سكريبت والعديد من ال divs .

ولكن قبل أن نبدأ لابد أن نفهم جيدا أن المظهر المصمم بديناميكيه عاليه وبشكل جميل وجذاب من خلال وجود تأثيرات نصيه وتدرجات في الألوان هو أهم عامل في بناء الموقع الإلكتروني وللحصول علي هذا التصميم الجذاب لابد أن نمر بسلبسه من الخدع لزياده الكود الخاص بنا وأيضا الصور.

الخطوة الأولي: الحروف المستديره

كل واحد منا قد سمع عنها وسوف يكون كلامنا مكررا إذا تكلمنا عنها ولكن في هذا الموضوع سوف ألقي الضوء علي الفرق في أن تقوم بعملها باستخدام الصور وcss3 والمزايا والعيوب .

ان صنع حرف مستدير قد يكون سهلا للغايه اذا استخدمنا تطبيق جرافيك ولكن في الفوتوشوب نجد بعض الصعوبات:

الدقة:بالرغم من أنك تستطيع عمل قطر الحرف المستدير ومعظمنا يقلل من بعض البيكسل حول القطر ليصبح أكثر دقه

التعديل: وهذه من اكبر المشكلات عند صنع صوره بإطار خارجي مستدير فإذا رسمت قطر لحرف مستدير علي صوره مثلا 10 سم وأردت لسبب ما زياده هذا القطر الي 20 سم فانه لا سبيل لعمل هذا إلا ان تقوم برسم الشكل مرة أخري من جديد

التعبئة والإطار: ان عمل تدريج داخلي واطار داخل صورة لهو مهمه كبيره فعليك أن تقوم بتقسيم الصوره الي شرائح وتعبئة كل شريح بلون مدرج وعليك ان تقوم بالتحكم في الحجم والأرتفاع ليعطي التأثير المناسب.

تأثير دمج الأحرف: فلا سبيل في الفوتوشوب لعمل هذا سوا ان تقوم بدمج الشكلين معا وتشريح كل واحد علي حدي لعمل الحرف المستدير

والأن مع كود css3:

بكل سهوله وسلاسه ما عليك سوي أن تقوم بإضافة هذا الكود والذي تستطيع من خلاله ان تتحكم كليه في كل الأشياء السابق ذكرها بدون أيه عوائق او صعوبات

[html] /*Rounded Corner Boxes*/
.box{
background-image:-moz-linear-gradient(top, #FAD502, #E89502);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}

.fourcorners{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

.topleft{
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-khtml-border-radius-topleft: 20px;
border-top-left-radius: 20px;
}

.bottomleft{
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-khtml-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
}

.topright{
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius-topright: 20px;
border-top-right-radius: 20px;
}

.bottomright{
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}

.asymmetrical1{
-webkit-border-top-left-radius: 160px;
-khtml-border-radius-topleft: 160px;
-moz-border-radius-topleft: 160px;
border-top-left-radius: 160px;

-webkit-border-top-right-radius: 20px;
-khtml-border-radius-topright: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;

-webkit-border-bottom-left-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 0px;
-khtml-border-radius-bottomright: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}

.asymmetrical2{
-webkit-border-top-left-radius: 0px;
-khtml-border-radius-topleft: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;

-webkit-border-top-right-radius: 90px;
-khtml-border-radius-topright: 90px;
-moz-border-radius-topright: 90px;
border-top-right-radius: 90px;

-webkit-border-bottom-left-radius: 0px;
-khtml-border-radius-bottomleft: 0px;
-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 90px;
-khtml-border-radius-bottomright: 90px;
-moz-border-radius-bottomright: 90px;
border-bottom-right-radius: 90px;
}

.circle{
width:170px;
height:170px;

padding:15px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:12px;
font-weight:bold;
float:left;

background-image:-moz-linear-gradient(top, #FAD502, #E89502);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));

-webkit-border-top-left-radius: 100px;
-khtml-border-radius-topleft: 100px;
-moz-border-radius-topleft: 100px;
border-top-left-radius: 100px;

-webkit-border-top-right-radius: 100px;
-khtml-border-radius-topright: 100px;
-moz-border-radius-topright: 100px;
border-top-right-radius: 100px;

-webkit-border-bottom-left-radius: 100px;
-khtml-border-radius-bottomleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 100px;
-khtml-border-radius-bottomright: 100px;
-moz-border-radius-bottomright: 100px;
border-bottom-right-radius: 100px;
}
[/html]

لمشاهده المثال إضغط هنا