الثلاثاء، 7 يوليو 2015

مخلص ضوينا

جوجل تريد نشر Material Design على الويب

مخلص ضوينا بتاريخ عدد التعليقات : 0

جوجل تريد نشر Material Design على الويب
بعد نجاح واجهة Material Design على نظام أندرويد قررت شركة جوجل المرور إلى مرحلة أخرى حيث أشارت إلى رغبتها في تعزيز استخدام هذه الواجهة بالنسبة للمواقع الإلكترونية على الويب و ذلك عن طريق توفير أداة خاصة للمطورين.

جوجل قامت بنشر أداة جديدة خاصة بمطوري الويب تسمح لهم بإنشاء مواقع إلكترونية بالواجهة الشهيرة Material Design و التي ظهرت بشكل واسع مع ظهور نظام جوجل أندرويد 5.0 Lollipop، إطار العمل الجديد الذي ستوفره جوجل للمطورين سيحمل إسم "Material Design Lite".

و بالتالي فإن جميع العناصر الرسومية الموجودة في واجهة نظام أندرويد 5.0 Lollipop ستصبح متوفرة كذلك في المواقع الإلكترونية التي ستستخدم الواجهة الجديد و ذلك في سبيل التوافق في العرض بين هذه المواقع على نظام أندرويد، و من أجل القيام بذلك تقترح جوجل على المطورين تحميل إطار العمل البرمجي Material Design Lite.


جوجل تريد نشر Material Design على الويب
تقييمات المشاركة : جوجل تريد نشر Material Design على الويب 9 على 10 مرتكز على 10 ratings. 9 تقييمات القراء.

مواضيع قد تهمك

0 تعليق

اتبع التعليمات لاضافة تعليق
  • يرجى ترك تعليق على الموضوع. سيتم حذف التعليقات التي تتضمن روابط مباشرة، والإعلانات، أو ما شابه ذلك.
  • لإضافة كود ضعه في : هنا الكود
  • لإضافة كود طويل ضعه في : هنا الكود
  • لإضافة اقتباس ضعه في : اكتب هنا
  • لإضافة صورة ضعها في : رابط الصورة هنا
  • لإضافة فيديو استعمل : [iframe] هنا رابط تضمين الفيديو [/iframe]
  • * قبل ادخال كود عليك بتحويله أولا
  • شكرا لك

Youtube Channel Image
مدونة الغزال اشترك في القناة لمشاهدة المزيد من مقاطع الفيديو
Subscribe
/* CSS Multiple Whatsapp Chat */ body{font-family:tajawal;direction:rtl;text-align:right} a:link{text-decoration:none;} a:visited{text-decoration:none;} a:hover{text-decoration:none;} #whatsapp-chat{font-family:tajawal;position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)} a.blantershow-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)} a.blantershow-chat i{transform:scale(1.2);margin:0 0 0 10px}.header-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;padding:20px} .header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0} .info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:right;margin:0 0 0 10px} .info-avatar:before{content:'\f232';z-index:1; font-fmily:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;right:30px} a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s} a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888} #get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none} .blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd} textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none} a#send-it{color:#555;width:40px;margin:-5px 5px 0 0;font-weight:700;padding:8px;background:#eee;border-radius:10px} .first-msg{background:#f5f5f5;padding:30px;text-align:center} .first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block} .start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;left:15px;color:#fff;font-size:30px} @keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}} @media screen and (max-width:480px){#whatsapp-chat{width:auto;right:5%;left:5%;font-size:80%}} .hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1} .show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}