فواصل

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

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

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

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

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

تظليل 101

.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)

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

.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;
}

 ألمع (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

<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;
}

انا أراقبك

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

.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 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 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);
 }
}

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

 كرة أرضية