درر العراق

احمد الفجراوي · 16/December/2013

بسم الله الرحمن الرحيم

وصلى الله على خيرته من خلقه محمد وآله الطيبين الطاهرين

السلام عليكم دررنا الغالين وضيوف الدرر الكرام

اليوم ان شاء الله سوف نتعلم

طريقة صنع شعار ( لوجو ) لـ الجيمايل

Gmail

بواسطة الـ css3 فقط

دون الاستعانة بشيء آخر

نبدأ على بركة الله

طبعا الشعار الاول سيكون بسيط وسهل التصميم جدا

وبدون لغو , اليكم الخطوات :

افتح محرر النصوص المفضل لديك

واكتب فيه الكود التالي

كود HTML:

<html> <head> <title>Gmail CSS Logo</title> <style type='text/css'> </style> </head> <body> <span class='gmail-logo'> <span class='gmail-box'> </span> </span> </body> </html>

ثم احفضه بصيغة
logo-gmail.html

اضف كود الستايل التالي بين <style></style>

كود:

.gmail-logo,  
.gmail-logo *,  
.gmail-logo *:before,  
.gmail-logo *:after {  
    margin:0;  
    padding:0;  
    background:transparent;  
    border:0;  
    outline:0;  
    display:block;  
    font:normalnormal 0/0 serif;  
    }

الكود التالي سيجعل خلفية الشعار ( اللوجو ) حمراء

كود:

.gmail-logo {  
    margin:110pxauto;  
    background:rgb(201, 44, 25);  
    width:600px;  
    height:400px;  
    border-top:4pxsolidrgb(201, 44, 25);  
    border-bottom:4pxsolidrgb(201, 44, 25);  
    border-radius:10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;  
    }

يجب وضعه في الستايل طبعاً

ثم نستمر , نقوم بعمل صندوق ابيض مع خلفية حمراء

كود:

.gmail-logo .gmail-box {  
    overflow:hidden;  
    float:left;  
    width:440px;  
    height:400px;  
    margin:0 0 0 80px;  
    background:white;  
    border-radius:5px;  
    -moz-border-radius:5px;  
    -webkit-border-radius:5px;  
    }

ولكي نقوم بصنع تأثير M لونه أحمر , سنصنع صندوق ذو حدود حمراء

كود:

.gmail-logo .gmail-box:before {  
    position:relative;  
    content:'';  
    z-index:1;  
    background:white;  
    float:left;  
    width:320px;  
    height:320px;  
    border:100pxsolidrgb(201, 44, 25);  
    margin:-310px 0 0 -40px;  
    border-radius:10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;  
    -moz-transform:rotate(45deg);  
    -webkit-transform:rotate(45deg);  
    -o-transform:rotate(45deg);  
    }

ثم نقوم باخفاء الجوانب الزائدة غير المرغوب فيها , وبذلك نكون حصلنا على تأثير حرف M تــام باللون الأحمر

كود:

.gmail-logo .gmail-box {  
    overflow:hidden;  
    }

والآن لنقم بوضع حدين نحيفين باللون الأحمر لكي نعطي شكل الظرف

كود:

.gmail-logo .gmail-box:after {  
    content:'';  
    float:left;  
    width:360px;  
    height:360px;  
    border:2pxsolidrgb(201, 44, 25);  
    margin:10px 0 0 40px;  
    -o-transform:rotate(45deg);  
    -webkit-transform:rotate(45deg);  
    -moz-transform:rotate(45deg);  
    }

أوشكنا على الانتهاء , لنقم باضافة ميلان للظرف الاحمر

كود:

.gmail-logo:after {  
    content:'';  
    position:relative;  
    z-index:2;  
    content:'';  
    float:left;  
    margin-top:-404px;  
    width:600px;  
    height:408px;  
    display:block;  
    background:  
        -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,   
        /* rgba(255, 255, 255, 0.3) 30%, */
        rgba(255, 255, 255, 0.1) 100%);  
    background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,   
        /* rgba(255, 255, 255, 0.2) 30%, */
        rgba(255, 255, 255, 0.1) 100%);  
    background:-webkit-gradient(  
        linear, lefttop, leftbottombottom, color-stop(0%,   
        rgba(255, 255, 255, 0.3)),   
        /* color-stop(30%, rgba(255, 255, 255, 0.2)), */
        color-stop(100%, rgba(255, 255, 255, 0.1)));  
    }

أخيرا وليس آخرا , لنقم باعطائه لون هوفر مختلف , سنقوم بوضع html DOCTYPE قبل <html>

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ونقوم بوضع كود الستايل التالي قبل <style/>

كود:

.gmail-logo:hover {  
    background:#313131;  
    border-color:#313131;  
    /* cursor:pointer; */
    }  
.gmail-logo:hover .gmail-box:before {  
    border-color:#313131;  
    }  
.gmail-logo:hover .gmail-box:after {  
    border-color:#313131;  
    border-bottom-color:#fff;  
    border-right-color:#fff;  
    }

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

وأي استفسار انا حاضر ع الخاص وبخدمة الطيبين

ملاحظة : للإمانة الموضوع مترجم من مصدر اجنبي لصالح منتديات درر العراق حصراً

ترجم ونقل ونشر في منتديات درر العراق حصرياً بواسطة alfajrawy