The function's result is an object of the data type, which is a special kind of .
From left to right, the three gradients above were created with the following code. The radial-gradient () CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. There are a few different ways you can do this. Declaring a direction before your colors tells your browser which way your gradient transitions in. ![]() Here are 6 CSS designs that you can use to enhance the aesthetics of your website 1. The default orientation of a gradient is top to bottom. Join a network of the world's best developers and get long-term remote software jobs with better compensation and career growth. Hereâs a few ways you can customize it: Gradient directions What Iâve shown above, declaring two colors in your code, is the minimum amount of information you need to give to make a CSS gradient. This will create a vertical gradient starting with color 1 at the top and color 2 at the bottom. When youâre writing this, make sure that color 1 and color 2 are the same for all lines of code. The comments, marked by /* comment text*/ arenât part of the code, but tell you what that line of code does. Substitute color1 and color2 for your colors of choice, either a recognized color name or hexadecimal code, and separate your two colors with a comma. The code is written this way: background: color1 /* For browsers that do not support gradients */Ä«ackground: -webkit-linear-gradient( color1, color2) /* For Safari 5.1 to 6.0 */Ä«ackground: -o-linear-gradient( color1, color2) /* For Opera 11.1 to 12.0 */Ä«ackground: -moz-linear-gradient( color1, color2) /* For Firefox 3.6 to 15 */Ä«ackground: linear-gradient( color1, color2) /* Standard syntax */ In order to make sure our code works in every situation, we write multiple lines of code that do the same thing but may be written slightly differently, as well as a failsafe that sets your color to a solid color for browsers that donât recognize CSS gradients.Ī linear gradient smoothly transitions one color to another in a straight line. Additionally, the different browsers sometimes interpret code slightly differently (think of it as having to speak different dialects to each one). ![]() Browser supportĪ quick note before we start: CSS gradients is a feature that was introduced somewhat recently, which means that older versions of browsers (my grandmaâs clunky laptop that hasnât been updated since 1997) might not recognize and support the code. Gradients can give your web design a sophisticated look and creating them in CSS rather than using an image reduces download time and bandwidth usage of your website. Youâll be able to do this with beginner skills in HTML and CSS and apply it to any element where you might use background or background-color. Hi! This tutorial will go over how to create gradients with CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |