إنشاء ويندوز 8 شعار فقط مع CSS و HTML

خلق الجديد ويندوز 8 شعار فقط باستخدام CSS و HTML. وقد أصبح هذا ممكنا من قبل قدرات CSS3.

A+ A-

كما قد تعلمون، أقرت Microsoft عملية تحديث رئيسية في شعار Windows. الشركة تقوم به بعيدا مع العلم بأربعة ألوان التي كانت جزءا من شعار ويندوز منذ إطلاق ويندوز إكس بي في عام 2001.

الشعار الجديد من ويندوز تشمل أربعة البلاط التي تم إنشاؤها باستخدام لون واحد متين. وهذا اللون الرسمي أن يكون الضوء الأزرق ولكن اللون يمكن أن تتغير تبعا لخيارات التخصيص المستخدم. وقد أعطيت البلاط قليلا من منظور وتوضع على الجانب الأيسر من النص "ويندوز 8"

نصب حديثا شعار Windows

كما أصبح شعار Windows بساطة ومصممي المواقع الإلكترونية قد حصلت على مزيد من السلطة من خلال-حتى CSS3، متحمس اسمه فاسيلي Zubach خلقت 8 شعار Windows فقط باستخدام HTML و CSS! يرجى ملاحظة أن القانون نافذة تعمل بشكل صحيح فقط في المتصفحات الدعم الكامل CSS3 ... وليس من المستغرب، وإنترنت إكسبلورر ليست واحدة منها. ولكن ينبغي العمل في المتصفحات الأخرى دون أي مشكلة (شريطة أن يكون لديك أحدث نسخة منها)

هنا هو الرمز الذي لا حيلة:

كود HTML

<div class="window"></div>
<div class="logo_text">Windows 8</div>

CSS لتصميم شعار ويندوز

    .window {
    position: relative;
    float: left;
    margin-left: 50px;
    width: 200px;
    height: 150px;
    background: #00adef;
    -webkit-transform: perspective(400px) rotateY(-25deg);
    -moz-transform: perspective(400px) rotateY(-25deg);
    -ms-transform: perspective(400px) rotateY(-25deg);
    -o-transform: perspective(400px) rotateY(-25deg);
    transform: perspective(400px) rotateY(-25deg);
    -webkit-animation: windows_animation 5s infinite;
    -moz-animation: windows_animation 5s infinite;
    -ms-animation: windows_animation 5s infinite;
    }
    .window::after, .window::before {
    content: '';
    background: #fff;
    height: 100%; width: 10px;
    left: 50%;
    margin-left:-5px;
    top:0;
    position: absolute;
    }
    .window::before {
    left: 0;
    top: 50%;
    margin-top: -5px;
    margin-left: 0;
    height: 10px;
    width: 100%;
    position: absolute;
    }
    .logo_text {
    color: #00adef;
    line-height: 150px;
    font-size: 130px;
    padding-left: 20px;
    float: left;
    }

CSS للرسوم المتحركة

    @-webkit-keyframes windows_animation {
    0%, 100% {
    -webkit-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -webkit-transform: perspective(400px) rotateY(-35deg);
    }
    }
    @-moz-keyframes windows_animation {
    0%, 100% {
    -moz-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -moz-transform: perspective(400px) rotateY(-35deg);
    }
    }
    @-ms-keyframes windows_animation {
    0%, 100% {
    -ms-transform: perspective(400px) rotateY(-25deg);
    }
    50% {
    -ms-transform: perspective(400px) rotateY(-35deg);
    }
    }

لعرض تجريبي لأحد كيف يبدو هذا الشعار CSS Windows، يمكنك زيارة موقع Visiliy ل. انها تنفيذ أنيق جدا من الشعار. وعلى الرغم من ساعد تبسيط شعار تنفيذ CSS ولكن CSS3 و HTML5 قادرون على خلق السحر كثيرا .

يرجى إضافة التعليقات الخاصة بك في هذا الشأن. شكرا لك على استخدام TechWelkin.

Ads

شارك

الأخيرة

أفضل البدائل أوبونتو للبحث عن إذا كنت لينكس العشاق

دعونا نبدأ عن طريق الحصول على دراية شيء. الأساسية ولكن قليل...

كيفية إضافة التوقيع في علبة بريد جوجل - إضافة التوقيع جوجل في Gmail

وكان صندوق البريد الوارد من قبل جوجل واحدة من أفضل الأمور ق...

أسبوعية أخبار تكنولوجيا المعلومات: نوكيا وغوغل ونينتندو

مرحبا بالجميع، انها الجمعة 3 مارس وتماما مثل دائما نعود مع ...

مشاريع بي التوت للمبتدئين - ماذا يمكن أن تفعل مع التوت بي

التوت بي هو عبارة عن سلسلة من الطاقة المنخفضة، وأجهزة الكمب...

أفضل VPN لالروبوت 2017 - كيفية استخدام VPN في الروبوت

لقد ولت الأيام التي كانت فيها الشبكات الخاصة الإفتراضية فقط...

تعليقات