1/3/2024 0 Comments 3d spinning logo generatorWe know the radius from the diameter we used when tracing the logo earlier. +cylinder((SIZE * 1) * 0.5, 100,, true, true).cylinder-arc.cylinder-arc-outer +cylinder((SIZE * 0.61) * 0.5, 80,, false, false).cylinder-arc.cylinder-arc-inner Note that cuboids have six sides, so we’re styling those with the nth-of-type() pseudo selector while leveraging the vmin length unit to keep things responsive.cuboid `) Next, we need the styles to display our cuboids. +cuboid().square-cuboid.square-cuboid-three +cuboid().square-cuboid.square-cuboid-two +cuboid().square-cuboid.square-cuboid-one And using Pug, we are going to create and use a cuboid mixin to help generate all of them. Let’s start with the squares in the logo. We are going to use some of those techniques for what we’re making here. We covered creating 3D scenes in CSS in my “Learning to Think in Cubes Instead of Boxes” article. Why didn’t we create 3D blocks from the start? Creating containing elements, makes it easier to create 3D via extrusion. We have the blueprint for our DigitalOcean logo, so it’s time to make this 3D. If you toggle the “Explode” and hover elements, you can what the logo consists of.Ĭheck out my “Advice for Complex CSS Illustrations” article for tips on working with advanced illustrations in CSS. That means for now all we need is the containing elements for each cylinder, the inner arc, and the outer arc.Ĭheck out this demo that lays out the different pieces of the DigitalOcean logo. We don’t need to create the “arc” portion of the logo as we’re thinking ahead because we are going to make this logo in 3D and can create the arc with two cylinder shapes. The idea is to style these elements so that they overlap our logo. We are using Pug so we can leverage its mixins and reduce the amount of markup we need to write for the 3D part. Then we can use the tracing technique from my “Advice for Advanced CSS Illustrations” article. īeing mindful that we’re taking this 3D, we can wrap our SVG in a. We are going to “trace” the DigitalOcean logo by grabbing an SVG version of it from. So, let’s dive right in! Creating the DigitalOcean logo This cool little demo brings many of those concepts together. This also makes for quite a good article because the way I made the logo uses various pieces from previous articles I’ve written. I did that, but then took it a little further with some 3D and parallax. Congratulations to everyone! □Īs a little hurrah to commemorate the occasion, I wanted to create the DigitalOcean logo in CSS. Howdy y’all! Unless you’ve been living under a rock (and maybe even then), you’ve undoubtedly heard the news that CSS-Tricks, was acquired by DigitalOcean.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |