All right, make sure our panel is selected. And we're gonna start by just putting the dark color that we selected earlier in as the background color for this panel. We don't need a border, so we're gonna get rid of that. And while we're at it, we're just going to drag this other panel down so that it's aligned with it at the bottom. And we're just manually that 515 pixels of height. So we're gonna go ahead and draw out that shape. Now, we want a panel here that is gonna be 1,200 pixels wide by 515 pixels high. And for now, we don't need these measure where they're sitting, so we'll just move them off to the side. It's gonna make it a little bit easier to align it. Oops, and this panel here, let's break this out of this group. We'll be creating some proper buttons later. All right, now, before we do this we're just gonna get rid of a couple of things we don't need here. Later on we'll do a radial gradient, as well, but for now, we'll just focus on that linear gradient. We're gonna start by just putting together a linear gradient with just two colors stops. We're gonna keep things relatively straightforward here. So there's a whole bunch of stuff that you can do without needing to use any, raster-based images. You can have gradients positioned and offset. Radial gradients don't have to be circular. And then you can get into a whole bunch of other stuff with stacking gradients on top of each other. This is obviously a program, I'm just demonstrating the functionality but you can actually get some really nice looks with CSS based gradients. They can be diagonal or they can be just directly horizontal or vertical. So you can do linear gradients facing in all different directions. You can actually do quite a lot with card base gradients. And your file size is gonna be much smaller using CSS versus a background image. Just a couple little changes to card values rather than having to re-export a whole background image. It's much more easily edited if you wanna make tweaks and feature. If you use a CSS gradient instead of a raster-based background image, that gradient can then be scaled easily, so that makes it much easier for the site to become responsive and adaptive to different viewport sizes. In this lesson we're going to talk about how you can create CSS friendly gradients in your sites instead of using raster-based images. Hi, and welcome back to Code Friendly Design with Adobe XD. 3.1 Create a CSS-Ready Gradient Background
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |