![]() ![]() The change of the position will make the gradients move and we’ll be able to see the other end of the rainbow gradient:īackground-position: center right, top right We then want the background position and the color to change. moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4) įor Firefox we’ll again add some border radius and some box shadow. Text-shadow: 1px 1px 1px rgba(255,255,255,0.3) īackground-position: center left, top left The background size for both gradients will be three times the size of our word in length and 100% in height.įont-family: 'Fascinate', 'Arial Narrow', Arial, sans-serif If you use Photoshop, you will instantly know how to use this.Īnd check out Lea Verou’s CSS3 Patterns Gallery for more ideas on what can be achieved with gradients! ![]() It’s really awesome and you can choose different color formats and easily custom build your gradient. If you want to easily create your own gradients, you should give the Ultimate CSS Gradient Generator from ColorZilla. The first background image is a linear gradient with lots of colors and the second one is a repeating linear gradient with stripes. ![]() I’ll omit the vendor prefixes for the gradients here, just check out the download file. Of course, we don’t have to go extremely nuts with the colors, but hey, it’s a gradient: let’s make a freakin’ rainbow! In the second example, we’ll play around with gradients. We’ll also change the color.įor Firefox we want the box shadow color to change. The background size for the images will be reduced to 50% and we’ll change the background position in order to move one image to the left and the other to the right side. The properties that we want our text to transition to are the following: ![]() (If you are wondering what’s happening in IE don’t get too excited, we’ve just added a stylesheet that will simply override the color of the text and remove the background image.) So, we’ll leave the background image, but add some nice border radius and some box shadow for Firefox only. Although the background-clip for the text will not work here, we can still make the background image animate in a pretty nice way. moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2) įor Firefox we want to add some kind of fallback. * for now, let's just add some niceness for Firefox */ * let's assume that one day it's supported */ The initial position of the background images will be centered.įont-family: 'BebasNeueRegular', Arial, sans-serif We’ll also add a semi-transparent white text-stroke where the images will shine through. We’ll use a rgba value which allows us to set an opacity. When using a background image and setting the background-clip to “text”, we need to make sure that the color of the text is either transparent or semi-transparent in order to be able to see the image. This means that the image will preserve its aspect ratio while fitting horizontally into the h3 element. Since we are only giving one value, the second value, i.e. Initially we want the images to occupy all the word, so we’ll set the background size to 100%. In the first example we want to add two background images. We’ll be applying the class “it-animate” to the wrapper with jQuery in order to show the transitions. The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.The structure will simply be an h3 heading element with a wrapper: ![]()
0 Comments
Leave a Reply. |