• 0

كيف أصمّم زر باستخدام css؟

اقوم باستخدام بعض الأزرار في موقعي تم تصميمها باستخدام Photoshop  ، احد الزملاء قام بالتعليق على الموقع واخبرني انه يمكن استخدام ال css لتصميم نفس الشكل الخاص بالأزرار وخاصة الشكل الخاص باستدارة الحواف فكيف يمكن تحقيق ذلك  ؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

نعم بإمكانك تصميم الأزار والشاشات وكل عناصر التحكم والعرض فى الصفحات بإستخدام CSS

أنصحك بقراءه المزيد عن الـ CSS وهو محتوى متوفر بكثره علي الإنترنت

ومتوفر هنا أيضاً علي أكاديميه حسوب http://academy.hsoub.com/code/css/

ولتصميم الأزار كمثال يمكننا تطبيقه كالتالي (للتوضيح)

فلنفترض أن لدينا زر " تسجيل الدخول" بهذا التكويد 

<input type="submit" class="niceStyle" name="submit" value="تسجيل الدخول" id="submit" />

ونريد تطبيق التكويد عليه لإعطائه شكل معين 

.niceStyle
{
-- خاص بتعديل لون الزر الخلفى
    background-color: #E90;
 -- خاص بإستداره الحواف
    border-radius:6px;
-- لون الكتابه داخل الزر 
    color: White;
-- حجم الخط
    font-size: 20px;
-- حجم ولون ونوع الحواف
    border:solid 1px green;
}


-- خاص بالتأثير الخاص بوقوف الفأره علي الزر
.niceStyle : hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

ويوجد الكثير من الدورس علي الإنترنت خاصه بكيفيه تحويل تصميم الفوتوشوب إلى تصميمات CSS خاصه بالويب

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

نعم بإمكانك تصميم الأزار والشاشات وكل عناصر التحكم والعرض فى الصفحات بإستخدام CSS

أنصحك بقراءه المزيد عن الـ CSS وهو محتوى متوفر بكثره علي الإنترنت

ومتوفر هنا أيضاً علي أكاديميه حسوب http://academy.hsoub.com/code/css/

ولتصميم الأزار كمثال يمكننا تطبيقه كالتالي (للتوضيح)

فلنفترض أن لدينا زر " تسجيل الدخول" بهذا التكويد 

<input type="submit" class="niceStyle" name="submit" value="تسجيل الدخول" id="submit" />

ونريد تطبيق التكويد عليه لإعطائه شكل معين 

.niceStyle
{
-- خاص بتعديل لون الزر الخلفى
    background-color: #E90;
 -- خاص بإستداره الحواف
    border-radius:6px;
-- لون الكتابه داخل الزر 
    color: White;
-- حجم الخط
    font-size: 20px;
-- حجم ولون ونوع الحواف
    border:solid 1px green;
}


-- خاص بالتأثير الخاص بوقوف الفأره علي الزر
.niceStyle : hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

ويوجد الكثير من الدورس علي الإنترنت خاصه بكيفيه تحويل تصميم الفوتوشوب إلى تصميمات CSS خاصه بالويب

 

كفيت ووفيت أخي الغالي

ملاحظة بسيطة إذا سمحت بخصوص السطر الآتي:

.niceStyle : hover {

يلزم لصق الكلمتين بالنقطتين الرأسيتين لكي يعمل بشكل سليم كالآتي:

.niceStyle:hover {

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن