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. Could this have some effect? I have no idea how to affect code written inline like that.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. If inspected, I'm seeing some inline code stating that the "data-image-focal-point" is set to 0.5,0.5 instead of 0,0 (see screenshot). However, if you view the animation as it currently is, you'll see that the foreground seems to be rotating around a point subtly off of center. My foreground image is a perfect square, and the text is perfectly centered within it. While I'm not too worried (yet, knock on wood) about positioning the background image to always be centered behind the foreground image, where I'm having trouble is in the rotation animation. So, my solution is to use a spacer block instead of code to position the foreground image, and only apply transform:translate to the background image, which is set to position:absolute. I've run into the problem of applying multiple transforms to one element: I'm not able to both position the foreground image AND give it a keyframe rotation animation, because I can't apply two transform properties (transform:translate and transform:rotate) at the same time. I've attached a GIF showing what the final result should look like. The foreground has some text in a circle and a transparent background this should rotate 360 degrees. The background consists of a red circle with our brand initial in it this should remain static. I'm trying to create an animated logo in my footer. Location of image in question is the red logo in the footer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |