跳到主要内容

添加带有CSS的SVG过滤器

Add SVG filters with CSS

+$SVG has been around since the early 2000s, and yet there are still interesting ways that designers are finding to use it. In this tutorial the focus will be on the filters that are applied through SVG – but instead of applying them to an SVG image, we'll show you how they can be applied to any regular page content.

+$The way the filter is applied to the SVG is actually through CSS, by telling it what ID the filter has. Using that same idea, the filter can be applied to regular text, for example. The good part about this is that you can add some great graphical looks to your text, which would have only been previously possible by applying a number of Photoshop filters and saving as an image. Using the SVG filter, the text remains accessible and selectable, as it is still just a regular text element on your page.

+$The code here will create a displacement map to text that also contains an alpha map to make it appear watery and fit the theme of the page. Then another filter will be created that makes a menu appear as water blobs, which stick slightly together but blob apart as they move further away. Again this keeps with the theme of this particular page and shows two creative ways to apply SVG filters to other content.

+$Interested in learning more about SVG? Take a look at our article on+$everything you need to know about SVG on the web+$. Alternatively, add some interest to your sites with one of these coolCSS动画示例

01.开始吧

+$First, you need to download the project files using the link directly above. Once you've done that, drag the开始+$project folder onto your code IDE and open the的index.html+$page. You will see there is some page content already written. The header section needs to be created, and this will contain the headline that will be affected by an SVG filter. Add the code here, just inside the身体标签。

+$

Underwater Adventure Park

+$02. Close The Header

+$Now the header is finished, with all the text for it in place. If you view your page in the browser at the moment, you will see a water image with some text on it. The headline, which is still currently unstyled, is going to be styled up and have the SVG filter applied to it.

+$

Experience the Ocean
Like Never Before

Underwater Adventure Park is an experience unlinke anything you have ever had. Travel to the depths of the Ocean and walk among the Sea Life!

+$03. Create an SVG filter

+$The SVG code can be added anywhere on the page, but as it won't be seen, it can be a good idea to place it at the bottom, before the closing body tag. The SVG filter creates turbulence noise. Notice the filter has an ID – this is what enables the CSS to apply this to another element on the page.

+$    

+$04. Hide The SVG

+$Move over to the+$page.css+$file now, and above all the CSS code for the rest of the page will be where our new CSS will go. Here the SVG is set to not display on the page at all. The heading two tag is set to have the right typeface applied to it.

+$svg { display: none; } h2 { font-size: 5.5vw; font-family: 'Crete Round', serif; }

+$05. Add to the headline

行高+$is set to zero because later the headline will be animated, so having control over its scaling on the page is important. It's also given some padding so that it sits with the right amount of space around it and the colour is changed.

+$.headline { line-height: 0; display: inline-block; padding: 70px; color: #ccffff;

+$06. Finish The Headline

Add SVG filters with CSS: Finish the headline

+$The SVG will be used to displace the headline text

+$In finishing off the headline class, the next line applies the+$displacementFilter+$ID in the SVG to the text. TheTranslate3d+$ensures that the text becomes hardware accelerated. The scale is changed slightly to ensure that when the displacement is applied it looks right.

+$filter: url(#displacementFilter); transform: translate3d(0, 0, 0); transform: scaleY(1.8) rotateY(-2deg); }

+$07. Make It Displace

Add SVG filters with CSS: Make it displace

+$And now the text is displaced

+$If you test the filter at this stage the turbulence completely replaces the text. That's easy to fix. Go back to the filter code in the index.html page. This takes the turbulence and the source graphic, which is the text, and applies it as a displacement filter. Try changing the base frequency and the number of octaves in the turbulence.

+$

+$08. Soften The Edges

Add SVG filters with CSS: Soften the edges

+$Use a Gaussian blur to soften the text

+$The edges look a little harsh for a watery effect. That can be cured with a Gaussian blur. Add the code after the displacement map. When you refresh the page, it has definitely blurred the text but the displacement is gone. Again these are elements that can be fixed on the way to creating the effect.

+$

+$09. Composite The Two

Add SVG filters with CSS: Compositing the two

+$Combine the blur and displacement for a more pleasing effect

+$Add the composite line here below the previous Gaussian blur. You will see that this combines the blur and the displacement together, and also creates a watery translucent effect to the text. It has gone some way to softening the edges, but not enough. It would be good if the original blur could be added into this.

+$

+$10. Merge The Blur

Add SVG filters with CSS: Merging the blur

+$With a merge operation it'll look even better

+$A merge operation enables the final result of the composite to be merged with the blur effect. This now looks like it fits with the background image and seems to fit with the lines of light coming through the water. The best part about the text is that it is still selectable and part of the page, unlike if you created this in Photoshop.

+$   

+$11. Create An Animation

+$Go back to the+$page.css+$file and add in the keyframes as shown here. This will just scale up the font size from a zero vertical width to a 5.5 vertical width. At the start this will be applied to the headline, so that the text scales up and into place on the screen. As the text moves, the displacement will also change over the length, giving a watery ripple.

+$@keyframes scaler { from { font-size: 0vw; } to { font-size: 5.5vw; } }

+$12. Change the h2 style

Add SVG filters with CSS: Change the h2 style

+$Replace the h2 to bring in some animation

H2+$style was previously added in step 4. Replace that code with this new code, which adds the CSS animation over four seconds to the heading. The animation stops and holds on the last keyframe. Save this and test it in the browser to see the text rippling into place.

+$h2 { line-height: 0; font-size: 0vw; animation-name: scaler; animation-duration: 4s; animation-fill-mode: forwards; font-family: 'Crete Round', serif; }

+$13. Add Navigation

+$Now let's create a suitable water blob-inspired animation using another SVG filter. Add the following navigation content to the very top of the body code, before the heading that was started in the first step of the tutorial. This will create the basics of a hamburger menu in a circle.

+$

+$14. Finish The Navigation

+$Now the remaining navigation elements can be added. This also uses the Font Awesome open source icon library, which has been added to the head section to link from the CDN of this library. Each menu circular element will have an icon inside of it.

+$            

+$15. Add the new filter

+$Another filter is going to be added for this effect. In the SVG, add this code after the closing filter tag of the code added previously. Here the effects are built up in a very similar way to previously. This will allow for the menu to look like sticky blobs of liquid moving apart.

+$    

+$16. Finish The Filter

+$The remainder of the filter is added here, which completes the effect that will be placed on each circle of the menu items. This will cause the elements to have the liquid blob effect added. Save this page and then switch over to the 'design.css' file.

+$   

+$17. Apply The Filter

+$The CSS code can now be added to the different+$design.css+$, just to keep all of the navigation CSS together in the same place. Some code has been added, but here the filter is applied to the menu, which will be a fixed menu so that it is present on the screen at all times.

+$.menu { filter: url(“#shadowed-blob"); position: fixed; padding-top: 20px; padding-left: 80px; width: 650px; height: 150px; box-sizing: border-box; font-size: 20px; text-align: left; }

+$18. Make the menu work

+$The menu is set to turn invisible when the menu is open. The hover element of each of the menu items is created so that there is a change when the user hovers over this. Each child of the menu is given a 0.4-second transition when the menu items are returning to their original position.

+$.menu-open { display: none; } .menu-item:hover { background: #47959f; color: #b2f0f8; } .menu-item:nth-child(3), .menu-item:nth- child(4), .menu-item:nth-child(5), .menu- item:nth-child(6) { transition-duration: 400ms; }

+$19. Add A Hamburger

Add SVG filters with CSS: Burger icon to the top

+$Change the burger icon's z-index to bring it to the top

+$The burger icon is elevated above the other elements by changing itsZ-index的+$. The menu grows when the user hovers over this, and clicking the menu will now get the burger to animate from three lines of a burger to an 'X', indicating the option to remove the menu.

+$.menu-open-button { z-index: 2; transition-timing-function: cubic- bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d (0, 0, 0); cursor: pointer; } .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d (0, 0, 0); }

+$20. Move The Elements

+$The first menu item is actually the third child of the menu, as there is a checkbox and the hamburger before it. Adding this enables the first menu element to move into position once the menu is clicked by the user. Each menu element will move out with a slightly longer time.

+$.menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 400ms; transform: scale(0.8, 0.8) translate3d (0, 0, 0); } .menu-open:checked ~ .menu-item { transition-timing-function: cubic- bezier(0.165, 0.84, 0.44, 1); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 390ms; transform: translate3d(110px, 0, 0); }

+$21. Address the remaining movement

Add SVG filters with CSS: Remaining movement

+$Move the menu elements at different speeds for a more liquid look

+$The remaining menu elements are moved out with different speeds. This enables the elements to stick together in the early stages of the animation, which will give the blobby liquid look, using the SVG filter. Save the documents and see the finished results in your browser.

+$.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 490ms; transform: translate3d(220px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 590ms; transform: translate3d(330px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 690ms; transform: translate3d(440px, 0, 0); }

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com 

本文最初发表于创意网页设计杂志网页设计者在这里购买问题283要么在这里订阅Web Designer

相关文章:

查看更多Web设计方法

话题

网页设计
CSS
Magcontent
网页设计

相关文章



翻译字数超限