Play around with the various gradient types and values to find something you’re happy with. There are a number of different gradient options you can apply with WebKit, such as -repeating-linear-gradient, -radial-gradient, etc. Take a look at my example below: background-image: -webkit-linear-gradient( You can define color points with percentages, pixels, ems, etc. Simply pass in a directional value (optional, defaults to ‘top’), and as many color values as you like. To create a gradient background we can use the following CSS property: background-image: -webkit-linear-gradient() This will in fact become the “fill” for your text. ![]() Once you have your text on the page and your chosen font applied, it’s time to apply a background layer in your CSS. I’m going for that 80s feel, so I picked Orbitron. Have a browse through the Typekit library of fonts for some inspiration. This is the most crucial step to establishing an authentic look and feel for the style that you want to achieve. So long as the styling is done only for flair, and doesn’t change anything fundamental about the site navigation, all your site visitors will have a good time. Less radical, but still totally readable. Here’s how the demo above appears, for example, without the fancy styling. We’re giving those WebKit users something a little special when they visit our site, but we won’t do it at the expense of the experience on other browsers. Well, before we start, there is one major caveat to deploying to the web: the CSS necessary to achieve these effects is only supported by WebKit browsers - namely, Chrome and Safari. OK, so how can you make your own kick-ass web type? Well, allow me to introduce you to some of the results you can achieve with it. I’m unaware of the reasons why it was never taken up, but WebKit has kept it and you can use it in all current versions of WebKit and Blink browsers. Never heard of it? I’m not surprised it was never standardized as part of the CSS spec, and was never implemented at Mozilla or Microsoft. Catch up on the first post from John Zeratsky if you haven’t already.īack in early 2008, before Google Chrome had even been released to the world, the people at WebKit landed a brand new CSS property in Safari, background-clip: text. ![]() This is the second in a pair of posts demonstrating the technique of using the CSS background-clip: text property to style headlines.
0 Comments
Leave a Reply. |