开始学习CSS艺术

A pink ice cream bar graphic with a happy smiling face

+$Making CSS art can be intimidating, but it's easy once you break graphics down into simple parts. If you peruse websites like CodePen, DevArt and Dribbble, it’s very easy to feel overwhelmed by the incredible things that developers and designers make, especially when you’re just starting out. I made my first piece of CSS art after lurking on these sites for years and eventually mustered up the courage to try and do it. Now, a few years and over 100 experiments later, it’s one of my favourite hobbies.

+$Making CSS art is interesting and fun. It teaches you nuances of CSS that you might not normally work with, helps you see graphics (and problems in general) modularly and improves your speed when writing CSS. It’s also a great way for designers and developers to get on the same page when working on a user interface together. As you practise and refine your skills making CSS art, you’ll see an improvement in your day-to-day work (and you might even enjoy it more, too).

+$In this article, we’re going to be making a cute ice cream bar graphic in CSS. I’ll talk through and give you the code to follow, so that you can customise it and make it your own. Let’s get started!

01.设置文档

+$Before we write any CSS, we have to actually have something to style. You can use a preprocessor like HAML or Pug, or just straight HTML. I’ll stick with pure HTML and CSS in our examples, but you’re free to use what you’re most comfortable with. Pull up a blank Pen on CodePen or an HTML document, and include the following for the ice cream bar in the

+$

+$02. Settle on colours and sizes

+$Normally when you have a graphic in front of you to make, you will need the dimensions and colours of that graphic. In this particular case, I’ll be providing you with those dimensions and colours.

+$When you don’t have me around though, I recommend getting yourself a colour picker tool (I personally use Digital Color Meter on Mac and ColorPic on Windows), and a screenshot tool to figure out your dimensions (the native ones for your operating systems work just fine).

+$Let’s add those dimensions and colours now to our document.

+$body { background: #FED550; } .ice-cream { width: 240px; height: 350px; background: #F982BF; } .glare { width: 35px; height: 70px; background: #FF98CC; } .eye { width: 18px; height: 18px; background: #FF2995; } .mouth { width: 75px; height: 25px; background: #FF2995; } .stick { width: 60px; height: 72px; background: #ECAA7D; border-top: 12px solid #DB9E74; }

+$03. Add positioning and transforms

+$Right now, our image is all blocky and in the corner. Before we shape everything better, let’s add some positioning and transforms. Personally, my favourite positioning techniques (generally) are absolute positioning containers, and using flexbox for everything else. If you prefer using absolute and relative positioning for everything, or even CSS Grid, go for it!

+$Now, we have to position the container in the middle of the page (I’ll be using absolute positioning and a translate transform), and make sure the contents of the main container are centred and rotated as needed.

+$You might notice that I also added a couple of dimensions for the+$'.face'+$'.eyes'+$classes – that’s for handling the spacing within that container. Go ahead and add these changes in yourself to each class:

+$.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; } .ice-cream { display: flex; flex-direction: column; justify-content: space-around; } .glare { position: relative; left: 170px; bottom: 20px; transform: rotate(-38deg); } .face { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 58px; } .eyes { display: flex; justify-content: space-between; width: 145px; }

+$04. Choose Your Pseudo-elements

+$Our little ice cream bar is looking pretty good, if I do say so myself! One last concept that is incredibly helpful for making CSS art is pseudo-elements.

+$Every single element on a page can actually be three elements: the main element,::之前,和::后+$. You Can Style::之前::后+$as if they’re separate

+$s within any element.

+$For example, I could have changed the+$.eyes+$container to have no+$.eye

+$s at all, and just style a::之前::后+$for each eye. That would have been cool, but that would make styling the glare on each eye impossible.

+$That being said, for the final missing glare on those eyes, let’s add a::之前+$pseudo-element to make that possible. The key things to add to a pseudo-element are a display value and+$content: ‘’

+$Check it out, and with that, we’re done!

+$.eye { position: relative; } .eye::before { display: block; content: ‘’; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #fff; border-radius: 100%; }

+$You're An Artist!

+$If you’d like to check out my final result, you can find it on my CodePen profile (above). Making CSS art is really just a matter of applying the concepts we talked about in interesting and fun ways. You can take these techniques and run with them, and even add your own animations with keyframes and transitions. All this being said, I hope you learned something new, and this motivated you to try your hand at making something beautiful.

本文最初发表于创意网页设计杂志 网页设计者 买第282期 要么 订阅

相关文章:



翻译字数超限