Css3: white edges of frosted glass; css3: white edges of frosted glass

Source: Internet
Author: User

Css3: white edges of frosted glass; css3: white edges of frosted glass

Note: Many people should know how to implement the css3 frosted glass effect, but the problem is that the blurred image is equivalent to narrowing down, so the deep-colored image will show white edges, here I will refer to the solution on the Internet!

1. Implementation of glass wool:

CSS3 blur filter implementation
The following test code:

.blur {        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    }

The related HTML code is as follows:

  

Note that FireFox does not currently support other browsers, such as FireFox, and does not support CSS3 filter. of course, you can also blur the photos on the FireFox 24 browser. You can use the SVG fuzzy filter.
The new svg file named blur. SVG:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">     <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs></svg>

The following CSS call code:

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

Complete css code

. Blur {filter: url (blur. svg # blur);/* FireFox, Chrome, Opera */-webkit-filter: blur (10px);/* Chrome, Opera */-moz-filter: blur (10px);-ms-filter: blur (10px); filter: blur (10px); filter: progid: DXImageTransform. microsoft. blur (PixelRadius = 10, MakeShadow = false);/* IE6 ~ IE9 */}

2. white edge Solution

The related HTML code is as follows:
 


The principle is that the same image is located under the image to be blurred. When the image to be blurred is reduced, the image is shown as low... The white edge disappears, hahaha... Did you think of it?

Css style is compatible with the frosted glass effect solution of various browsers

-Webkit is targeted at core webkit browsers, Typical CHROME and Safari
-Moz is the core of Mozilla, typical of Firefox.
-O-,-xv-, typical OPERA
-Ms. At first glance, it is Microsoft, which is generally omitted.

Try adding the header of another vendor. Some of them do not support this attribute,

How to add white borders to fonts with CSS?

The text-shadow attribute is used to design the projection effect of the font. However, IE does not support it, but CSS3.0 does. It will be displayed later. Text-shadow: The settings are as follows: text-shadow: 1PX 1PX 1PX # FFFFFF .. The first value is the X axis direction, the second value is the Y axis direction, the third value is the greater the Blur degree after the projection, and the fourth value is the color value after the projection.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.