تصميم هيئة جهاز Mac Plus باستخدام CSS


Entesar ElBanna

سنُأحاول في هذا المنشور الإشادة بجهاز حاسوب Mac Plus الجميل من خلال إنشائه باستخدام CSS.

عن تصميم الجهاز

دعنا نبني (تقريبًا) جهاز حاسوب. ليس فقط أي حاسوب قديم، ولكن حاسوبًا كان بالنسبة للكثير منا مقدمة في عالم Apple. كانت بداية إطلالة جهاز Macintosh Plus (الاسم المختصرMr. T) لأول مرة في عام 1986 بحزم 1 ميغابايت من ذاكرة الوصول العشوائي ومعالج بسرعة 8 ميجاهرتز؛ وبصرف النظر عن كل هذه القوة، فقد كان تصميمه لطيفًا للغاية، مما جعله أكثر متعة في الاستخدام.

mac.jpg

في هذا المشروع، سننشئ نموذجًا ثلاثة الأبعاد 3D لجهاز Macintosh Plus وعرضه في بيئة ثلاثية الأبعاد. وسنجعله يتحرك على الشاشة باستخدام حركات الإطار المفتاحي CSS Keyframe animation، لإظهار التأثير ثلاثي الأبعاد بشكل أفضل.

لماذا نستخدم CSS؟

لكون CSS هي الطريقة القياسية لتصميم محتوى صفحة الويب؛ يُعالج كل شيء من خطوط وألوان ومواضع عناصر وصور خلفيات بواسطة CSS، وهي تقنية أساسية لإنشاء صفحات الويب الحديثة. هي ليس فقط مخصصة لبناء المحتوى ثنائي الأبعاد، بل باستخدام إنتقالات CSS ثلاثية الأبعاد والمواضع، يمكنك الدخول بِ CSS إلى الأعماق.

ينتج ملفات ذات أحجام أصغر من أحجام ملفات الصور عند إنشاء مشاهد باستخدام CSS؛ ففي هذا المثال، يُضغط CSS على 4 كيلوبايت فقط و HTML أقل من 1 كيلوبايت. بينما ستكون الصورة المكافِئة لنفس التنسيق بحجم 100 كيلو بايت أو أكثر.

العرض التوضيحي والشِّيفرة المصدرية

اطلع على تصميم CSS Mac Plus ويمكنك تحميل الشيفرة المصدرية الكاملة من هنا، ويمكنك عرض ملف CSS الكامل على GitHub..

البادئات

قمنا بحذف أي بادئات CSS من شيفرة المثال لتسهيل القراءة. عند العمل على ذلك بنفسك، تأكد من تضمين بادئات للمتصفحات إن لزم، مثل webkit و moz و ms و o.

إعداد المرحلة الأولى

عند إنشاء رسوم ثلاثية الأبعاد باستخدام HTML، نحتاج إلى المشهد الذي سنقوم ببنائه. سنبدأ بعنصر الحاوية:

<div class="stage"></div>

هذا عنصر div بسيط بالصنف stage يعمل عمل الحاوية للكائن ثلاثي الأبعاد الخاص بنا، ولتثبيتها كحاوية ثلاثية الأبعاد، قمنا بتعيين بعض خاصياتCSS، الخاصية و perspective perspective-origin. الخاصية perspective تشبه نقطة التلاشي للمشهد، وكلما صغرت القيمة، تكون نقطة تلاشي أقصر وأكثر تأثيرًا. توضح هذه الصورة كيف يؤدي تغيير قيمة هذه الخاصية إلى تغيير شكل المشهد:

01-perspective.png

جربها بنفسك

إن كنت ترغب في البدء، فابحث عن ملف screen.css في المسار examples/01-Perspectiv في ملفات المشروع. ستتمكن من تحديث قيمة الخاصية perspective ومعرفة تأثيرها من خلال فتح ملف index.html من نفس المجلد في متصفحك. الخاصية perspective-origin تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، يتيح لك تغيير قيمة هذه الخاصية، أن تنظر إلى المشهد من الأعلى أو من الأسفل أو من الجانب. في هذا المثال قمنا بضبط قيمتها على 1600 pixel، وشيفرة CSS تبدو كالتالي:

.stage {
  perspective: 1600px;
  perspective-origin: 50% 100px;
}

يحتوي مجلد stylesheets في ملف المشروع المضغوط على قواعد CSS الكاملة لإعداد الخصائص الأخرى المختلفة للمشهد، بما في ذلك الخلفية والعرض والارتفاع.

تصميم الهيكل

سنستخدم بعض عناصر HTML لإنشاء الجهاز، بدلًا من محاولة تضمين كل التفاصيل النهائية، سنركز على تفاصيل المظهر الخارجي للجزء الأكبر.

الهيكل الرئيسي للجهاز هو مربع صندوق مائل إلى الخلف قليلًا بزاوية ويجلس على قاعدة مسطحة. هذا يعني صنع صندوقين، أحدهما يميل قليلًا ويجلس على صندوق مسطح. لإنشاء هذا التأثير، سنستخدم الخاصية transform (الانتقال) في CSS.

إذا كنت ترغب في الإطلاع على شيفرة HTML الكاملة، فيمكنك العثور عليه في ملفات المشروع داخل ملف index.html.

الانتقالات

الخاصية transform في CSS تسمح بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا. يمكننا الاستفادة من ذلك لإنشاء مشهدنا.

يمكن أن تبدو الخاصية transform كالتالي:

.example {
  transform: rotateY(45deg) translateZ(-100px);
}

يمكنك بناء الانتقال (التحويل) عن طريق سلسلة من الجمل. في هذا المثال، دُوِّر العنصر بمقدار 45 درجة حول محور Y، ثم أزحه بمقدار 100 pixel للخلف على طول محور Z.

يجب أن يبدو الشكل شيء مثل هذا:

02-Transforms.png

يوجد مثال على تحويلات CSS في مجلد examples/02-Transforms ضمن ملفات المشروع، هناك عنصرين متَموضعين في المثال ويمكنك تغيير موضعهما من خلال تعديل محتوى الملف 02-Transforms/css/screen.css.

الخاصية transform-origin

عند تدوير العناصر حول المكان، تجدر الإشارة إلى أن التحويلات لها أصل يمكن تعيينه. قيمة هذه الخاصية عبارة عن نقطة يشار إليها بضبط قيم المحاور X و Y و Z، وهذا هو الافتراضي لها:

.default-origin {
  transform-origin: 50% 50% 0;
}

قد احتفظنا بالوضع الافتراضي في مثالنا، لكن الأمر يستحق أن ننوه لوجود الخاصية.

إنشاء الصناديق

يمكننا استخدام بعض التحويلات لإعداد الجسم الرئيسي للجهاز. ويمكن أن تكون شيفرة HTML كالتالي:

<div class="stage">
  <div class="positioning animated">
    <div class="mac">
      <figure class="back"></figure>
      <figure class="left"></figure>
      <figure class="right"></figure>
      <figure class="top"></figure>
      <figure class="base-front"></figure>
      <figure class="base-left"></figure>
      <figure class="base-right"></figure>
      <figure class="base-back"></figure>
      <figure class="front"></figure>
      <figure class="shadow"></figure>
    </div>
  </div>
</div>

في هذه المرحلة، يوجد حاوية سنستخدمها لوضع الجهاز في الصفحة. داخلها سيكون جهاز mac نفسه. يتكون الصندوقان من عناصر <figure> ، تمثل هذه العناصر الجوانب العلوية والأمامية والخلفية للمربعين.

هناك أيضًا عنصر figure لتمثيل الظل. يمكنك العثور على هذا المثال في المجلد examples/03-Boxes.

ستبدو النتيجة كالتالي:

04-Boxes.png

تُحوَّل كل من المربعات إلى مكانها باستخدام خاصية تحويل CSS، ويتم استخدام تدرجات CSS لإضافة عمق إلى المشهد.

شِيفرة CSS تشبه التالي:

.front {
  height: 11.5em;
  width: 9.6em;
  background: #e0e0e0;
  transform: rotateX(5deg) translateZ(5.43em);
}
.back {
  height: 11.5em;
  width: 9.6em;
  background: linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
  transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
}
.top {
  height: 10.95em;
  width: 9.6em;
  background-color: #ebf0dc;
  background: linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
  transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
}
.left {
  height: 11.5em;
  width: 10.9em;
  background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
  transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
}
.right {
  height: 11.5em;
  width: 10.9em;
  background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
  transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
}
.base-front {
  height: 2.1em;
  width: 9.6em;
  background: #c2c2c2;
  transform: translateY(10.7em) translateZ(5em);
}
.base-back {
  height: 2.1em;
  width: 9.6em;
  background: #b3b3b3;
  transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
}
.base-left {
  height: 2.1em;
  width: 10em;
  background: #b3b3b3;
  transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
}
.base-right {
  height: 2.1em;
  width: 10em;
  background: #b3b3b3;
  transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
}
.shadow {
  width: 10em;
  height: 11em;
  background: transparent;
  transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
  box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4);
}

تم إعطاء كل عناصر figure عرضًا وارتفاعًا، بالإضافة إلى تدرج أو لون خلفية CSS ثم تتَموضع باستخدام خاصية transform (التحويل). مثلًا، يتم تدوير الجانب الأيسر بمقدار 90 درجة قبل نقله إلى الخلف بنصف عرض الجهاز.

يُنقل عنصر figure الأمامي للأمام، على طول المحور Z بنصف طول الجهاز ويُدوَّر الظهر 180 درجة قبل نقله مرة أخرى.

بالنسبة لأجزاء المربع العلوي، يُدوّر كل عنصر من عناصر figure بمقدار 5 درجات حول المحور X. هذا يعني أن الجزء الأساسي من Macintosh Plus مائل إلى الخلف.

أخيرًا، يستخدم عنصر figure الخاص بالظل الخاصية Box-shadow لإنشاء ظل من إطار العنصر يجعله يبدو كما لو كان الصندوق يجلس على سطح مستوٍ.

الحَوَاف

إحدى ميزات هذا الحاسوب هي الحواف المنحدرة حول المقدمة، تساعد هذه الحواف على تخفيف الزوايا الصلبة في المربع وجعله يبدو أقل تشبُّهًا بالصندوق.

لتحقيق ذلك ندرج بعض العناصر الإضافية لعنصر figure الأمامي، مثل:

<figure class="front">
  <span class="bezel-top"></span>
  <span class="bezel-left"></span>
  <span class="bezel-right"></span>
  <span class="bezel-bottom"></span>
</figure>

تمثل كل عنصر من عناصر داخل عنصر figure الأمامي أحد هذه الحواف، مع إضافة بعض الأنماط، ستبدو كما يلي:

04b-Bezels.png

يمكنك العثور على هذا المثال في المجلد examples/04-Bezels.

شِيفرة CSS التالية تستخدم حيلة بخاصية border-width (عرض الحدود) لإنشاء حواف منحدرة.

.front .bezel-top {
  border-top: 0.75em solid #f2f2f2;
  border-right: 0.5em solid transparent;
  border-left: 0.5em solid transparent;
  width: 8.6em;
}
.front .bezel-left {
  border-top: 0.5em solid #d9d9d9;
  border-right: 0.75em solid transparent;
  border-left: 0.75em solid transparent;
  width: 10em;
  transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
}
.front .bezel-right {
  border-top: 0.5em solid #d4d4d4;
  border-right: 0.75em solid transparent;
  border-left: 0.75em solid transparent;
  width: 10em;
  transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
}
.front .bezel-bottom {
  border-top: 0.75em solid #cccccc;
  border-right: 0.5em solid transparent;
  border-left: 0.5em solid transparent;
  width: 8.65em;
  transform: rotateZ(180deg) translateY(-10.76em);
}

كل حافة لها ثلاثة حدود، بالنسبة للحافة العلوية، وضعنا حدًا ملونًا في الجزء العلوي، ثم وضعنا حدين شفافين على الجانبين الأيسر والأيمن. في CSS، عندما يلتقي حد مع حدود بلون آخر، يكون الخط الذي يتقابلون فيه قطريًا. هذا يعني أن الحدود الشفافة تُنتِج حوافًا قطرية للحدود الملونة.

يتم تطبيق هذه التقنية على كل الحواف، مما يؤدي إلى ظهور الحواف منحدرةً.

تُطبق التحويلات على الحواف أيضًا لجعلها تتناوب وتتموضع في جانب عنصر figure الأمامي.

المزيد من التفاصيل

مع وجود المربعات الرئيسية لِنمط حاسوبنا، يمكننا إضافة العديد من التفاصيل التي تجعله يبدو وكأنه جهاز Macintosh Plus، مثل الشاشة والرمز ومحرك الأقراص.

يحتوي عنصر figure الأمامي لِ HTML على التالي:

<figure class="front">
  <span class="bezel-top"></span>
  <span class="bezel-left"></span>
  <span class="bezel-right"></span>
  <span class="bezel-bottom"></span>
  <figure class="screen-container">
    <span class="screen">
      <p>hello, Dave</p>
      <span class="sheen"></span>
    </span>
  </figure>
  <figure class="logo">
    <span class="image"></span>
    <span class="text">Macintosh Plus</span>
  </figure>
  <figure class="floppy"></figure>
</figure>

يمكنك العثور على هذا المثال في المجلد examples/05-Completed.

الشاشة

تتكون الشاشة من عدة عناصر، بما في ذلك الحاوية وما يغطيها من الطبقة المضيئة.

لذلك تستخدم CSS قيمة gradients (التدرجات اللونية) لجعل الإضاءة تبدو داخلية في الجزء الأمامي من الحاسوب، بينما يستخدم عنصر اللمعان span تدرجًا شبه شفاف لإعطاء الشاشة بعض الإشراق.

الشعار

يتكون الشعار من جزأين، صورة وبعض النصوص، يحتوي امتداد الصورة على صورة خلفية لشعار Apple القديم الملون، ويتم وضع النص بجانبه. يمكن العثور على شِيفرة CSS لهذا في الملفات المصدرية.

لإنشاء الشكل الصحيح، يتم إضافة خط مضمن. تستخدم CSS لهذا القاعدة ‎@font-face (واجهة الخط). هناك العديد من الطرق للقيام بذلك، لكن ربما من الأسهل استخدام خدمة مثل خدمة Font Squirrel’s @font-face generator لإنشاء شِيفرة CSS التالية:

@font-face {
  font-family: "apple_garamondregular";
  src: url("../fonts/apple_garamond-webfont.eot");
  src: url("../fonts/apple_garamond-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apple_garamond-webfont.woff") format("woff"), url("../fonts/apple_garamond-webfont.ttf") format("truetype"), url("../fonts/apple_garamond-webfont.svg#apple_garamondregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

يساعدنا Font Squirrel عن طريق إنشاء الملفات المختلفة (eot ، woff ، إلخ) التي يمكن وضعها بعد ذلك في المشروع واستدعائها داخل قاعدة font-face@ في شيفرة CSS كما هو موضح.

والنتيجة هي الخط الذي يطابق الأصلي كثيرًا.

القرص المرن

محرك الأقراص المرنة (Floppy drive) هو عنصر أحادي، ويستخدم حدود CSS لجعله يبدو كما لو كان مضبوطًا في الواجهة. تبدو شيفرة CSS التي تحدث التأثير كما يلي:

.floppy {
  height: 0.2em;
  width: 2.8em;
  transform: translate3d(4.8em, 8.9em, 0);
  background: #555555;
  border-top: 0.1em solid #cccccc;
  border-right: 0.3em solid #e6e6e6;
  border-bottom: 0.1em solid #f2f2f2;
  border-left: 0.3em solid #e6e6e6;
  border-radius: 0.25em;
}

محرك الأقراص المرنة لديه لون خلفية رمادية، وأربعة حدود، الحدود العليا هي الأغمق، حيث تكون الحدود السفلية أكثر إشراقًا لجعلها تبدو مُضاءة من الأعلى. أخيرًا، نقوم بتدوير أركان الإطار قليلًا من خلال الخاصية border-radius.

دمج القطع معًا

عند دمج جميع القطع معًا سيكون الشكل الناتج كالتالي

05-Completed.png

إضافة الحركات

على الرغم من أن مظهر الحاسوب جيد جدًا، إلا أنه يمكننا إظهار أنه كائن ثلاثي الأبعاد حقيقةً عن طريق تحريكه. للقيام بذلك، سوف نستفيد من حركات الإطار المفتاحي CSS keyframe.

هناك نوعان من الحركات في CSS هما: transition (تأثيرات الإنتقال)، يتم فيها تحريك العناصر في الصفحة من نمط أو موضع إلى آخر، و keyframes (الإطارات المفتاحية)، التي تمثل سلسلة أكثر تعقيدًا من خطوات التحريك.

يمكن وصف سلسلة من الإطارات المفتاحية على أنها سلسلة من النسب المئوية، وتصف شيفرة CSS كل خطوة. يمكن أن يبدو شكلها كالتالي:

@keyframes back-and-forth {
  0% {
    transform: rotateY(40deg);
  }
  40%, 50% {
    transform: rotateY(-40deg);
  }
  90%, 100% {
    transform: rotateY(40deg);
  }
}

في المثال السابق، تُسمى الحركة "back-and-forth" ، وتتكون من ثلاث خطوات، تبدأ بالدوران بزاوية 40 درجة، ثم عند نسبة 40٪ ، يتم تدويرها إلى 40 درجة بالإتجاه المعاكس، تبقى في هذه الدورة حتى النسبة 50٪ ، ثم تعود إلى الموضع الأصلي عند النسبة 90 ٪.

يقوم المتصفح تلقائيًا بسد عجز انقطاع التسلسل، عن طريق تنشيط الخصائص، ووقتها سيتم تشغيل زاوية الدوران.

تطبيق الحركات

لتطبيق هذه الحركة بواسطة CSS نستخدم الخاصية animation وهي تبدو كالتالي:

animation: back-and-forth 14s ease-in-out infinite;

تُدمَج عدة أشياء بسطر واحد هنا. تشير الشيفرة السابقة إلى أن اسم الحركة هو "back-and-forth"، ومُدتها 14 ثانية، وتكرر لانهائيًا، وسرعة تغييرها هو القيمة المحجوزة ease-in-out أي ستبدأ الحركة ببطء، ثم تتسارع، ثم ستنتهي ببطء.

بتطبيق هذه الحركة على الحاوية ذات الصنف "positioning"، ينتج التالي:

ماذا تعلمنا؟

بإنشاء كائن ثلاثي الأبعاد باستخدام CSS وتحريكه، غطَّينا بعض التقنيات وقمنا بضبط الخاصيتين perspective و perspective-origin، واستفدنا من الخاصية transform لتدوير العناصر وتحريكها وتحديد موضعها، وأضفنا تدرجات من خلال نوع البيانات <gradient> لإعطاء تأثير ثلاثي أبعاد أكثر واقعيةً، واستخدمنا بعض حيل CSS الحدودية لإعطاء شعور بالعمق، وأخيرًا استخدمنا إطارات مفتاحية وحركات CSS لإعطاء حياة للمشهد.

توافقية المتصفح

لا يمكن لجميع المتصفحات التعامل مع التحويلات (CSS transforms) سيصارع Internet Explorer في ذلك، ولكن هناك أمل في أن يصل الدعم إلى الإصدار11 منه. جميع الاصدارات الحديثة من Chrome وSafari وFirefox ستنجح في التعامل مع الإنتقالات.

توفر مكتبة Modernizr مجموعة من أدوات JavaScript للكشف عن إمكانيات المتصفح ويمكن استخدامها لإظهار محتوى بديل في الحالات التي يتعذر فيها على المتصفح دعم خاصيات CSS معينة. في شيفرة مثالنا، ستجد أننا استفدنا من Modernizr للكشف عن وجود تحوُّلات ثلاثية الأبعاد، في الحالات التي لا وجود لها، تُعرض صورة بدلاً من ذلك.

التقدُم للأمام

رغم أن هذا المثال قد لا يبدو شيئًا تستخدمه في مواقع الويب العادية، لكن يمكنك تطبيق التقنيات على جميع أنواع السيناريوهات.

مثلًا، يمكن استخدام تحويلات CSS لإضافة العمق إلى انتقالات الصفحة، والعروض المتكررة (carousels)، والشعارات والأزرار، على سبيل المثال لا الحصر. يمكن استخدام حركات CSS لإضافة المزيد من الانتقالات والبراعة في التحويلات، ويمكن لتدرُجات CSS إضافة عمق للصفحات دون الحاجة إلى استخدام الصور.

ترجمة -وبتصرف- للمقال Mac Plus CSS من موقع cssanimation





تفاعل الأعضاء


لا توجد أيّة تعليقات بعد



يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن