مؤخرا تحدثت عن كيفية إنشاء أشكال مختلفة بـ CSS .  واليوم سنتحدث عن استخدام تدرجات CSS لإنشاء أجسام كروية.

التصميم الفلات

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

بدلا من ذلك سأجرب الطريقة الثانية، والاستفادة من تدرجات”gradients” CSS لإضافة التظليل وإنشاء تأثير ثلاثي الأبعاد في عنصر واحد.

 الشكل الأساسي

قبل إضافة التفاصيل ، سنقوم بإنشاء شكل الدائرة المبدئي.نبدا ب HTML :

<figure class="circle"></figure>

نستخدم هنا عنصر figure ، ولكن يمكن استخدام أي عنصر. Figure هو عنصر يستخدم في HTML5 لتمثيل صورة أو مخطط بياني والذي يكون جزء من المحتوي الذي يمكن إزالته دون التأثير علي معني المحتوي. لإنشاء دائرة من عنصر figure, سأقوم بتحديد عرض وطول و border radius 50% .

.circle {
 display: block;
 background: black;
 border-radius: 50%;
 height: 300px;
 width: 300px;
 margin: 0;
}

هكذا ستظهر الدائرة

الآن لدينا دائرة أساسية ، يمكننا البدأ بتشكيلها “style” .

تظليل 101

يمكننا القيام بذلك باستخدام CSS التالي:

.circle {
 display: block;
 background: black;
 border-radius: 50%;
 height: 300px;
 width: 300px;
 margin: 0;
 background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}

يجب أن تحصل على شيء مثل هذا:

التدرجات الشعاعية (Radial gradients)

الظلال وثلاثي الأبعاد 3D اعتمادا علي نوع النظليل الذي تقوم بتطبيقة علي السطح، يمكنك إنشاء أجسام كروية مختلفة في المظهر. للـ HTML سنستخدم عنصرين:

<section class=”stage”>
 <figure class=”ball”><span class=”shadow”></span></figure>
</section>

عنصر “ball” تم اعطائه “span” والتي سنستخدمها لإنشاء الظل. تطبيق بعض الأنماط ووضع الظل لظبط المشهد.

.stage {
 width: 300px;
 height: 300px;
 perspective: 1200px;
 perspective-origin: 50% 50%;
}
.ball .shadow {
 position: absolute;
 width: 100%;
 height: 100%;
 background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
 transform: rotateX(90deg) translateZ(-150px);
 z-index: -1;
}

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

التظليل المتعدد(Multiple shaders)

.ball {
 display: inline-block;
 width: 100%;
 height: 100%;
 margin: 0;
 border-radius: 50%;
 position: relative;
 background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
 content: “”;
 position: absolute;
 top: 1%;
 left: 5%;
 width: 90%;
 height: 90%;
 border-radius: 50%;
 background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
 filter: blur(5px);
 z-index: 2;
}

هنا قمنا باضافة تدرجين(gradients).كلاهما مدمجين لإنشاء تأثير أجمل بكثير:

 ألمع (Shinier)

التأثير للأن ناعم جدا، لذلك دعونا نضيف بعض التلميع له وإنشاء شيئ أشبه بكرة السنوكر.

.ball {
 display: inline-block;
 width: 100%;
 height: 100%;
 margin: 0;
 border-radius: 50%;
 position: relative;
 background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
 content: “”;
 position: absolute;
 background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
 border-radius: 50%;
 bottom: 2.5%;
 left: 5%;
 opacity: 0.6;
 height: 100%;
 width: 90%;
 filter: blur(5px);
 z-index: 2;
}
.ball:after {
 content: “”;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 5%;
 left: 10%;
 border-radius: 50%;
 background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
 transform: translateX(-80px) translateY(-90px) skewX(-20deg);
 filter: blur(10px);
}

هكذا ستبدو:

8-ball

بينما نقوم بإنشاء كرة بلياردوا 8 ، دعونا نقوم بخطوة اضافية ونقوم باضافة رقم 8. سنحتاج عنصر إضافة لاحتواء رقم 8 ، وكذلك بعض التنسيقات لوضعه علي الكرة.

<section class=”stage”>
 <figure class=”ball”>
 <span class=”shadow”></span>
 <span class=”eight”></span>
 </figure>
</section>
.ball .eight {
 width: 110px;
 height: 110px;
 margin: 30%;
 background: white;
 border-radius: 50%;
 transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
 position: absolute;
}
.ball .eight:before {
 content: “8";
 display: block;
 position: absolute;
 text-align: center;
 height: 80px;
 width: 100px;
 left: 50px;
 margin-left: -40px;
 top: 44px;
 margin-top: -40px;
 color: black;
 font-family: Arial;
 font-size: 90px;
 line-height: 104px;
}

والنتيجة هي كرة 8 لامعة.

انا أراقبك

واحدة من أفضل الأشياء في تحولات(transforms) الـCSS هي أنها يمكن أن تكون متحركة. باستخدام “CSS keyframes”، يمكنك أن تصف سلسلة من التحويلات باعتبارها رسوم متحركة وتطبيقها علي العنصر. لإظهار هذا ، ساقوم بإنشاء وتحريك العين. الخطوة الأولي هي ظبط بعض الألوان المستخدمة في مثال كرة 8 . بعض التعديلات القليلة وستبدوا مثل العين . أولا، HTML:

<section class=”stage”>
 <figure class=”ball”>
 <span class=”shadow”></span>
 <span class=”iris”></span>
 </figure>
</section>

جزء كبير من CSS مشابه لمثال كرة 8 ، باستثناء قزحية العين.

.iris {
 width: 40%;
 height: 40%;
 margin: 30%;
 border-radius: 50%;
 background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
 transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
 position: absolute;
 animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
 content: “”;
 display: block;
 position: absolute;
 width: 37.5%;
 height: 37.5%;
 border-radius: 50%;
 top: 31.25%;
 left: 31.25%;
 background: black;
}
.iris:after {
 content: “”;
 display: block;
 position: absolute;
 width: 31.25%;
 height: 31.25%;
 border-radius: 50%;
 top: 18.75%;
 left: 18.75%;
 background: rgba(255, 255, 255, 0.2);
}

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

لنقوم بإنشاء بعض keyframes  لوصف كيفية تحرك مقلة العين.

@keyframes move-eye-skew {
 0% {
 transform: none;
 }
 20% {
 transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
 }
 25%, 44% {
 transform: none;
 }
 50%, 60% {
 transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
 }
 66%, 100% {
 transform: none;
 }
}

يستمر هذا الوضع في كل keyframes وكل الرسوم المتحركة وفي هذه الحالة يأخذ 5 ثواني كما تم تحديده سابقا.

See the Pen Spheres tutorial: 5b Eyeball (animated) by Donovan Hutchinson (@donovanh) on CodePen.4025

فقاعات

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

@keyframes bubble-anim {
 0% {
 transform: scale(1);
 }
 20% {
 transform: scaleY(0.95) scaleX(1.05);
 }
 48% {
 transform: scaleY(1.1) scaleX(0.9);
 }
 68% {
 transform: scaleY(0.98) scaleX(1.02);
 }
 80% {
 transform: scaleY(1.02) scaleX(0.98);
 }
 97%, 100% {
 transform: scale(1);
 }
}

التأثير ينطبق علي الفقاعة كاملة بجميع عناصرها.

See the Pen Spheres tutorial: 6 Bubble (animated) by Donovan Hutchinson (@donovanh) on CodePen.4025

استخدام الصور

حتي الأن تم إنشاء كل الكرات دون استخدام أي صور . اضافة صورة في كخلفية يضيف المزيد من التفاصيل، وتستفيد من مزايا تظليل CSS . علي سبيل المثال، يمكننا اضافة صورة كرة تنس وإنشاء خداع بصري بالعمق مع التدرجات gradients.

صورة فلات

الناتح دائرة مظللة

See the Pen Spheres tutorial: 7 Tennis ball by Donovan Hutchinson (@donovanh) on CodePen.4025

 كرة أرضية

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

See the Pen Globe by Donovan Hutchinson (@donovanh) on CodePen.4025

المصدر