In this case, we'll first define a CSS animation in your styles. We can also create highly complex animations using animation and animation-iteration. Not all elements use the transition property. Give your div the class “threed” and then add the following code to your CSS. This effect is achieved by adding a box shadow, and then moving the element on the x axis using the transform and translate properties so that it appears to grow out of the screen. circle:hoverģD shadows were frowned upon for a year or so, because they weren't seen as compatible with flat design, which is of course nonsense, they work fantastically well to give a user feedback on their interactions and work with flat, or fake 3D interfaces. Give your div the class “circle” and add this CSS to your styles. With CSS, it's a simple effect to achieve, we just transition the border-radius property. rotate:hoverĪ really popular effect at the moment is transitioning a square element into a round one, and vice versa. Give your div the class “rotate” and add the following to your CSS. shrink:hoverĬSS transforms have a number of different uses, and one of the best is transforming the rotation of an element. To enlarge an element we specify a value greater than 1, to shrink it, we specify a value less than 1. Shrinking an element is as simple as growing it. Set your div's class to “grow” and then add this code to your style block. But now we can use CSS3's transform to enlarge. To grow an element, you used to have to use its width and height, or its padding. Now, we just set the div's class to “color” and specify the color we want in our CSS. (Make sure you set the class of your div to “fade” to see this working.)Īnimating a change of color used to be unbelievably complex, with all kinds of math involved in calculating separate RGB values and then recombining them. It's a great way to emphasize functionality or draw attention to a call to action.įade in effects are coded in two steps: first, you set the initial state next, you set the change, for example on hover. Having things fade in is a fairly common request from clients. If you'd like to follow along you can download the demo files here. Now all we need to do is change properties, and they'll animate for us… The transition property has three values: the properties to transition (in our case all of them) the speed of the transition (in our case 0.3 seconds) and a third value which lets you change how the acceleration and deceleration is calculated, but we'll stick with the default by leaving this blank. Having done so, set its width and height (so it has dimensions), its background color (so we can see it) and its transition property. So we can see these effects working, we'll set up a div in an HTML page: Here are 8 really simple effects that will add life to your UI and smiles to your users' faces.Īll of these effects (bar one) are controlled with the transition property. What's more, these effects are hardware accelerated, and a progressive enhancement that you can use right now. Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. with CSS filters, which perform basic edits directly in CSS rather than through an image editor.CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement. You can change an image’s color profile, clarity, opacity, etc. This is part of an extensive series of guides about Front-End Development. After defining an image, you can transform it by setting CSS properties, as described in this article. Image transformation in CSS is based on the data type, which can take the form of HTML elements, or CSS data types, or element(), Image(), cross-fade(), or image-set() functions. Gratifyingly, CSS supports many image formats and types, including raster images (like JPEG), vector images (like SVG), combination images (like ICO), and fileless images (like CSS gradients). For example, you can create static or sticky positioning for the graphics, define backgrounds and borders, resize, and create cool filters to show off the artistry.ĬSS offers numerous options for those tasks. With Cascading Style Sheets (CSS), you can style your site and transform the related images.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |