Here’s a run-down of the features announced so far and what they do:
CSS Gradients
CSS gradients let you fill regions (including backgrounds, borders, and generated content) with color-to-color fades instead of just solid colors. A couple of examples of the sort of effects that you can achieve are shown in the image to the right. In the top image, four radial (circular) gradients are combined in a single background to produce a colourful effect. In the bottom image, a single linear gradient runs vertically starting at blue, then fades to white, jumps to green, and fades to white again. To produce a gradient, you use the-webkit-gradient CSS function anywhere you might normally include an image in your CSS code. Here’s how that linear, blue and green gradient background is produced:
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(#fff), color-stop(0.5, #fff),
color-stop(0.5, #66cc00));CSS Transforms
CSS transforms work much like CSS relative positioning (which all major browsers support), in that it lets you modify a portion of the page without affecting the page’s layout. With relative positioning, if you move an element 500 pixels to the left, that element will be displayed in its new position, but it will still occupy the space in the page where it was originally located. With CSS transforms, you can move an element just as you can with relative positioning, but you can also scale, rotate, or even skew an element. In this screenshot, I’ve used a CSS transform to rotate the entire page of sitepoint.com two degrees. Especially remarkable is that, after the transform is appled, all the text remains selectable, and you can still use the search form at the top of the page.
The code to do this is straightforward:
body {
-webkit-transform: rotate(-2deg);
}javascript:_=document.body.style;_.WebkitTransformOrigin='100%%200%';_.WebkitTransform='rotate(-2deg)'CSS Transitions
Something you learn pretty quickly once you start playing with CSS is how to change the appearance of hyperlinks when the user hovers over them with the mouse. This code, for example, will change the text of a link from blue to white:a:link, a:visited {
color: #00f;
}
a:hover {
color: #fff;
}a:link, a:visited {
color: #00f;
-webkit-transition: color 1s linear;
}
a:hover {
color: #fff;
}
You can combine transitions with CSS transforms to achieve some really exciting effects. In this screenshot, I’ve modified the main navigation bar on sitepoint.com to scale up and slightly rotate the main navigation buttons on the site when they are hovered over. With CSS transitions, button grows and tilts smoothly when the mouse passes over it, and then it shrinks back into place when the mouse leaves.
Besides looking pretty slick, this effect has the added advantage of making the links easier to click.
The WebKit team has submitted a draft specification for CSS transitions for consideration by the W3C, and the WebKit blog has a nice post with some examples that you can try in WebKit.
CSS Masks
Just announced today, WebKit now also supports CSS masks. If you’ve ever used a graphics program like Photoshop, you’ll be familiar with the concept of a mask. Essentially, a mask lets you make portions of an HTML element translucent, or entirely invisible.
In the example at right from the WebKit blog, an SVG image of a red circle with a black border is applied as a mask to a photo. Notice how the full color of the photo shows through the mask along the edge of the circle, due to the black border.
The standard CSS opacity property is effectively a solid mask that is applied to the entire element. With CSS masks, you can apply an image, an SVG vector shape, or even a CSS gradient as a mask to achieve different effects. And as with all WebKit’s new CSS effects, masks are surprisingly robust. You can apply them to HTML elements of any complexity, including form fields and even video!
The Future of CSS Today
For years now, web designers have looked to W3C specifications to tell them what they might expect from the browsers of the future. As the W3C’s efforts in this area have languished, however, cutting-edge browsers like Safari, Opera, and Firefox have been picking up the slack by implementing new features for designers to try out today. As with any new feature, the jury is still out on the real-world usefulness of many of these new features. Particularly in the case of animated transitions, the potential for abuse is pretty strong. For every subtle and pleasing effect that we see created in the future, we may see five or ten of these (WebKit required to see the effect). While it’s true that we won’t be able to rely on any of the above features being available in the majority of browsers anytime soon, a real-world implementation will exist in the wild in just a few months. That’s more than can be said for most of the CSS3 specifications that the W3C has produced over the years. To keep up with these and other new CSS features making their way into WebKit (like CSS variables, CSS canvas drawing, and CSS keyframe animation), visit the WebKit team’s Surfin’ Safari blog.Frequently Asked Questions about CSS Gradients, Transforms, Animations, and Masks
How can I apply a gradient mask to fade to the background over text using CSS?
Applying a gradient mask to fade to the background over text can be achieved using CSS. First, you need to create a container for your text. Then, you can apply a linear gradient to the container using the background property. The gradient should start from a solid color and end with a transparent color. Finally, you can use the background-clip property with the value text to apply the gradient to the text. Here’s an example:.container {
background: linear-gradient(to right, black, transparent);
-webkit-background-clip: text;
color: transparent;}
What is CSS masking and how does it work?
CSS masking is a technique that allows you to control the visibility of an element. You can use it to hide or reveal parts of an element by applying a mask image. The mask image works like a stencil, where the parts of the element covered by the black area of the mask are hidden, and the parts covered by the white area are visible. You can apply a mask image using the mask-image property. Here’s an example:.element {
mask-image: url(mask.png);}
How can I use CSS transforms to rotate an element?
CSS transforms allow you to change the position, size, and orientation of an element. To rotate an element, you can use the rotate() function with the transform property. The rotate() function accepts an angle as a parameter, which specifies the amount of rotation. Here’s an example:.element {
transform: rotate(45deg);}
How can I animate a CSS gradient?
Animating a CSS gradient can be achieved using CSS animations and keyframes. First, you need to define a keyframes animation that changes the background position of the gradient. Then, you can apply the animation to the element using the animation property. Here’s an example:@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }}.element {
background: linear-gradient(45deg, red, blue);
background-size: 200% 200%;
animation: gradient 5s infinite;}
How can I use CSS masks to create a clipping effect?
CSS masks can be used to create a clipping effect, where parts of an element are hidden and others are visible. You can achieve this by applying a mask image with the mask-image property. The mask image should have areas of black (which will hide the element) and white (which will reveal the element). Here’s an example:.element {
mask-image: url(clipping-mask.png);}
How can I use CSS transforms to scale an element?
CSS transforms allow you to change the size of an element. To scale an element, you can use the scale() function with the transform property. The scale() function accepts a scale factor as a parameter, which specifies the amount of scaling. Here’s an example:.element {
transform: scale(2);}
How can I animate a CSS transform?
Animating a CSS transform can be achieved using CSS animations and keyframes. First, you need to define a keyframes animation that changes the transform property of the element. Then, you can apply the animation to the element using the animation property. Here’s an example:@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}.element {
animation: rotate 2s infinite linear;}
How can I use CSS masks to create a fading effect?
CSS masks can be used to create a fading effect, where parts of an element gradually transition from visible to hidden. You can achieve this by applying a gradient mask with the mask-image property. The gradient should start from a solid color (which will reveal the element) and end with a transparent color (which will hide the element). Here’s an example:.element {
mask-image: linear-gradient(to right, black, transparent);}
How can I use CSS transforms to skew an element?
CSS transforms allow you to change the orientation of an element. To skew an element, you can use the skew() function with the transform property. The skew() function accepts an angle as a parameter, which specifies the amount of skewing. Here’s an example:.element {
transform: skew(30deg);}
How can I animate a CSS mask?
Animating a CSS mask can be achieved using CSS animations and keyframes. First, you need to define a keyframes animation that changes the mask position of the element. Then, you can apply the animation to the element using the animation property. Here’s an example:@keyframes mask {
0% { mask-position: 0% 50%; }
50% { mask-position: 100% 50%; }
100% { mask-position: 0% 50%; }}.element {
mask-image: url(mask.png);
mask-size: 200% 200%;
animation: mask 5s infinite;}
Kevin YankKevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.
