تصميم شعار الأندرويد بواسطة الـ css

الحمد لله والصلاة والسلام على رسول الله - صلى الله عليه وسلم -

السلام عليكم ورحمة الله وبركاته

اليوم بإذن الله سنتحدث عن كيفية إنشاء شعار نظام الـ Android بواسطة css فقط .

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

مثال مباشر على الرابط التالي

- أولاً لتحريك العناصر حول عنصر معين علينا جعل وضع العنصر الحاوي هو relative والعناصر الداخلية المراد تحريكها في الوضع absolute أو relative على حسب الحاجة إذا كنت تريد ان يكون وضع العنصر مطلق أو يتأثر بوضع العناصر الأخرى .

- من المعلوم أن جعل وضع العنصر absolute وضبط الجهات top left bottom right يتم من جهات المتصفح الأربعة ولكن وضع عنصر حاوي في الوضع relative وداخله عناصر في الوضع absolute سيتم إحتساب الأوضاع الأربعة من حدود العنصر الحاوي وليس حدود المتصفح , وبهذا تستطيع التحكم في الوضعيات كيفما تشاء .

1- إنشاء هيكلة HTML كالتالي :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head>
<body>
    <div id="android">
        <div class="body">
        
        </div>
    </div>
</body>
</html>
<!-- تم بحمد الله -->

والآن سنضع كود التنسيق لحاوي الشعار android وجسم الشعار body :

/*
* إزالة الهوامش والإزاحات الإفتراضية من جميع الوسوم
*/
*{padding:0;margin:0;}

/*
*    ضبط توسيط للعناصر
*/
body{text-align: center;}

/*
* حاوي الشعار الأساسي
*/
#android {
    margin: 50px auto;
}

/*
* جسم الشعار
*/
#android .body {
    margin: 100px;
    position: relative;
    display: inline-block;
    width: 130px;
    height: 100px;
    background-color: #A4C739;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

- من الواضح اننا جعلنا وضع جسم الشعار هو relative وسنضع باقي عناصر الشعار داخل الجسم بوضع absolute وباقي الخصائص لا أظنها تحتاج شرح - راجع أي مرجع للغة التنسيق CSS و CSS3 -

الآن سنقوم بإنشاء باقي أجزاء الشعار اليدان والرجلان والرأس وداخل الراس العيون وفوق الراس القرون

هيكلة HTML للشعار ككل ستكون بالشكل التالي :

<div id="android">
    <div class="body">
        <div class="head">
            <div class="rightEye"></div>
            <div class="leftEye"></div>
            <div class="rightHorn"></div>
            <div class="leftHorn"></div>
        </div>
        <div class="rightHand"></div>
        <div class="leftHand"></div>
        <div class="rightFoot"></div>
        <div class="leftFoot"></div>
    </div>
</div>

- نلاحظ وضع الأعين والقرون داخل الرأس بحيث يتم ضبطها بالنسبة لحدود الرأس وباقي الأجزاء سيتم ضبط وضعها بالنسبة للجسم body .

نأتي لتنسيق css الخاص بباقي الأجزاء :

/*
* رأس الشعار
*/
#android .head {
    position: absolute;
    top: -65px;
    left: 0;
    display: inline-block;
    width: 130px;
    height: 60px;
    background-color: #A4C739;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
}
/*
* العين اليمنى
*/
#android .rightEye{
    position: absolute;
    top: 25px;
    left: 30px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #FFF;
    border-radius: 50px;
}
/*
* العين اليسرى
*/
#android .leftEye{
    position: absolute;
    top: 25px;
    right: 30px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #FFF;
    border-radius: 50px;
}
/*
* القرن الأيمن
*/
#android .rightHorn {
    position: absolute;
    top: -20px;
    right: 15px;
    display: inline-block;
    width: 5px;
    height: 35px;
    background-color: #A4C739;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    transform: rotate(25deg);
}
/*
* القرن الأيسر
*/
#android .leftHorn {
    position: absolute;
    top: -20px;
    left: 15px;
    display: inline-block;
    width: 5px;
    height: 35px;
    background-color: #A4C739;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    transform: rotate(-25deg);
}
/*
* اليد اليمنى
*/
#android .rightHand {
    position: absolute;
    top: 0;
    right: -35px;
    display: inline-block;
    width: 30px;
    height: 80px;
    background-color: #A4C739;
    border-radius: 50px;
}
/*
* اليد اليسرى
*/
#android .leftHand {
    position: absolute;
    top: 0;
    left: -35px;
    display: inline-block;
    width: 30px;
    height: 80px;
    background-color: #A4C739;
    border-radius: 50px;
}
/*
* الرجل اليمنى
*/
#android .rightFoot {
    position: absolute;
    bottom: -50px;
    right: 25px;
    display: inline-block;
    width: 30px;
    height: 50px;
    background-color: #A4C739;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
/*
* الرجل اليسرى
*/
#android .leftFoot {
    position: absolute;
    bottom: -50px;
    left: 25px;
    display: inline-block;
    width: 30px;
    height: 50px;
    background-color: #A4C739;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

- يمكنك التحكم في وضعيات الأجزاء وأحجامها كيفما تشاء والألوان وخلافة .

- والآن سنقوم بوضع بعض الحركات عند المرور بالمؤشر على بعض أجزاء الشعار كالرأس اليدان والأقدام كالتالي :

/*
* حركة الرأس عند مرور الموشر عليها
*/
#android .head:hover {
    cursor: pointer;
    transform: rotate(10deg);
    top: -75px;
}
/*
* حركة اليد اليمنى عند مرور الموشر عليها
*/
#android .rightHand:hover {
    cursor: pointer;
    transform: rotate(-20deg);
    right: -40px;
    
}
/*
* حركة اليد اليسرى عند مرور الموشر عليها
*/
#android .leftHand:hover {
    cursor: pointer;
    transform: rotate( 20deg);
    left: -40px;
}
/*
* حركة القدم اليمنى عند مرور الموشر عليها
*/
#android .rightFoot:hover {
    cursor: pointer;
    bottom: -40px;
    
}
/*
* حركة القدم اليسرى عند مرور الموشر عليها
*/
#android .leftFoot:hover {
    cursor: pointer;
    bottom: -40px;
    
}

* ملاحظة : لم أراعي في الكود دعم المتصفحات القديمة حتى لا يتضخم الكود يرجى تعديل الكود إن أردت دعم نطاق عريض من إصدارات المتصفحات المختلفة .

رابط تنزيل التطبيق

AndroidLogo.zip

وإلى لقاء جديد وشعار جديد :)