في الآونة الأخيرة ، كنت أعيد تصميم موقع المدونة الخاص بي وقررت استخدام أيقونة على غرار التقويم لعرض الوقت. كان الحل السابق بشكل عام لاستخدام صور الخلفية. بفضل CSS3 ، يمكننا الآن تنفيذ هذه الوظائف باستخدام CSS3. سأستخدم بعض الخصائص مثل الدرجات الخطية ونصف قطر الحدود وظل المربع لاستبدال تصميم Photoshop السابق.
مخطط مفهوم Photoshopيستخدم العديد من المصممين طريقة التصميم مباشرة على المتصفح ، لكنني ما زلت أفضل طريقة صنع مخططات مفهوم Photoshop أولاً. على الرغم من أنه يمكن تنفيذ العديد من التأثيرات مباشرة مع CSS الآن ، فإن طريقة تصميم التأثيرات باستخدام Photoshop أبسط بكثير من طريقة محاولة تعديل CSS باستمرار لتحقيق التأثير الذي تريده أخيرًا.
قم أولاً بإنشاء مستطيل مستدير وضبط نصف قطر الزاوية المستديرة إلى 10 بكسل. بعد ذلك ، سوف نستخدم خاصية حدود الحدود من CSS.
إضافة التدرج العمودي إلى المستطيل ، لون التدرج هو من #DAD8D8 إلى #FCFCFC.
تعيين 1 بكسل ، اللون هو #e3e3e3
وأخيراً ، أضف تأثير الظل لأسفل مع شفافية 20 ٪ ، ومسافة 0 بكسل وحجم 15 بكسل. سيتم تنفيذ هذه التأثيرات في CSS باستخدام خاصية Box-Shadow.
انسخ المستطيل الآن وإزالة الجزء العلوي. قم بتعديل التدرج ، وملء اللون من #790909 إلى #D40000 ، المستطيل الذي تم إنشاؤه حديثًا ، والذي سيضع معلومات الشهر.
اضبط الظل الداخلي لتمثيل الحدود العلوية ، اللون هو #A13838 ، وشفافية 100 ٪ ، ومسافة 3 بكسل وحجم 0 بكسل.
استخدم أداة خط Photoshop لتعيين تأثير الخط في النصف الأول من أيقونة التقويم. الخط هو helvetica واللون هو #9e9e9e.
أدخل معلومات الشهر في القسم الأحمر أدناه ، وقم بتعيين الخط على نطاق واسع واللون إلى الأبيض.
تم الانتهاء من نموذج Photoshop. في الماضي ، سنأخذ الصورة كخلفية ونكتب أرقام HTML عليها ، ولكن الآن يمكن تحقيق كل هذا مع CSS.
هيكل HTML<div class = date>
<p> 25 <span> قد </span> </p>
</div>
هذه المرة ، HTML Demo Icon بسيط للغاية. سنستخدم DIV مع "تاريخ" الفئة كحاوية ، ثم نستخدم علامة P لتمثيل رقم التاريخ. يتم تمثيل الأيام والشهور بأحجام مختلفة في تصميمنا ، لذلك سنستخدم <spl> علامات لعلاج العناصر المختلفة بشكل مختلف.
نمط CSS.تاريخ {
العرض: 130 بكسل ؛ الارتفاع: 160 بكسل ؛
الخلفية: #FCFCFC ؛
الخلفية: الدرجات الخطية (TOP ، #FCFCFC 0 ٪ ، #DAD8D8 100 ٪) ؛
الخلفية: -moz-linar-regient (TOP ، #FCFCFC 0 ٪ ، #DAD8D8 100 ٪) ؛
الخلفية: -webkit-linar-radient (TOP ، #FCFCFC 0 ٪ ، #dad8d8 100 ٪) ؛
}
يقوم نمط CSS أولاً بتعيين ارتفاع وعرض الحاوية بأكملها ، ويمكن تحقيق تأثير التدرج بسهولة من خلال التدرج CSS.
.تاريخ {
العرض: 130 بكسل ؛ الارتفاع: 160 بكسل ؛
الخلفية: #FCFCFC ؛
الخلفية: الدرجات الخطية (TOP ، #FCFCFC 0 ٪ ، #DAD8D8 100 ٪) ؛
الخلفية: -moz-linar-regient (TOP ، #FCFCFC 0 ٪ ، #DAD8D8 100 ٪) ؛
الخلفية: -webkit-linar-radient (TOP ، #FCFCFC 0 ٪ ، #dad8d8 100 ٪) ؛
الحدود: 1 بكسل Solid #D2D2D2 ؛
الحدود الحدودية: 10px ؛
-moz-border-Radius: 10px ؛
-webkit-border-Radius: 10px ؛
}
استخدم السمة الحدودية لتحقيق تأثير الحدود 1 بكسل في Photoshop ، ثم استخدم Radius الحدود لتحقيق تأثير الزاوية المستديرة. لا تنس أن تضيف البادئات -moz- و -webkit- لتمكين التوافق مع المتصفحات القديمة.
.تاريخ {
العرض: 130 بكسل ؛ الارتفاع: 160 بكسل ؛
الخلفية: #FCFCFC ؛
الخلفية: الدرجات الخطية (TOP ، #FCFCFC 0 ٪ ، #DAD8D8 100 ٪) ؛
الخلفية: -moz-linar-regient (TOP ، #FCFCFC 0 ٪ ، #DAD8D8 100 ٪) ؛
الخلفية: -webkit-linar-radient (TOP ، #FCFCFC 0 ٪ ، #dad8d8 100 ٪) ؛
الحدود: 1 بكسل Solid #D2D2D2 ؛
الحدود الحدودية: 10px ؛
-moz-border-Radius: 10px ؛
-webkit-border-Radius: 10px ؛
box-shadow: 0px 0px 15px rgba (0،0،0،0.1) ؛
-moz-box-shadow: 0px 0px 15px RGBA (0،0،0،0.1) ؛
-webkit-box-shadow: 0px 0px 15px RGBA (0،0،0،0.1) ؛
}
الجزء الأخير من الكود هو تحقيق تأثير الظل السفلي في تصميم Photoshop من خلال المربع. أضف 0px إزاحة أفقية ورأسية لزيادة غموض 15 بكسل. استخدم RGBA للتحكم في الشفافية. في تصميم Photoshop ، يتم استبدال 105 بـ 0.1 هنا.
.date p {
Font-Family: Helvetica ، Sans-Serif ؛
حجم الخط: 100px ؛ محاذاة النص: المركز ؛ اللون: #9e9e9e ؛
}
نستخدم علامة P لتحديد الأنماط لتحديد أنماط النص للتواريخ. يتم نسخ الخط ، وحجم النص ، ولون النص من Photoshop ، ويتم ضبط محاذاة النص على المركز. لكن النمط يؤثر أيضًا على نص الشهر ، وسنحدد نمط تسمية Span بشكل منفصل.
.date p span {
الخلفية: #D10000 ؛
الخلفية: Linear-Radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
الخلفية: -Moz-Linar-Radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
الخلفية: -webkit-linar-radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
}
يتم تحقيق تنفيذ الجزء الأحمر عن طريق تعيين السمة الخطي الدرجات لخلفية الفترة ، وتأتي القيمة الحمراء أيضًا من Photoshop.
.date p span {
الخلفية: #D10000 ؛
الخلفية: Linear-Radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
الخلفية: -Moz-Linar-Radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
الخلفية: -webkit-linar-radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
حجم الخط: 45 بكسل ؛ خط الرصيف: جريئة ؛ اللون: #ffff ؛ تحويل النص: الكبير.
العرض: كتلة ؛
}
قم بتعديل نمط النص لمطابقة التصميم ، وضبط الحجم على 45 بكسل ، وقم بتعيينه على الخط الغامق ، وتعيين اللون على اللون الأبيض ، واستخدم التحول النصفي لتنفيذ تحويل رأس المال. اضبط علامة Span على عنصر الكتلة بحيث يتطابق مع حجم الحاوية وتعيين خلفية حمراء.
.date p span {
الخلفية: #D10000 ؛
الخلفية: Linear-Radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
الخلفية: -Moz-Linar-Radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
الخلفية: -webkit-linar-radient (TOP ، #D10000 0 ٪ ، #7A0909 100 ٪) ؛
حجم الخط: 45 بكسل ؛ خط الرصيف: جريئة ؛ اللون: #ffff ؛ تحويل النص: الكبير.
العرض: كتلة ؛
أعلى الحدود: 3 بكسل Solid #A13838 ؛
الحدود الحدودية: 0 0 10px 10px ؛
-moz-border-Radius: 0 0 10px 10px ؛
-webkit-border-radius: 0 0 10px 10px ؛
الحشو: 6px 0 6px 0 ؛
}
الباقي هو إضافة حدود الرأس ، واستخدام نمط أعلى الحدود لتنفيذه ، واستخدام سمة الحدود الحدودية لتنفيذ الزوايا المستديرة في الجزء السفلي. يمكن أن تجعل سمة الحشوة الصغيرة أن نص الشهر يحتوي على بعض التباعد بين العناصر لأعلى ولأسفل والعناصر الأخرى.
توافق المتصفحعلى الرغم من أن الخصائص المحسنة لـ CSS يمكن أن تساعدنا في تحقيق تأثيرات التدرجات والظلال في Photoshop ، لا يزال يتعين علينا مواجهة المشكلات التي كان على مصممي الويب مواجهتها في الماضي ، وتوافق المتصفح.