We also refer to pop-ups like this as being “interstitial” as they appear at stages between expected content. This is a modal window you need to click outside of its boundaries, or hit the close button in order to close it. We can get by with transforms and transitions, making sure the foreground is nicely centered, then scaling and moving things when the hover takes place.The Best Way to Use Pop-Ups in Your Web DesignĪ pop-up (or modal) is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something: A pop-up example on Now we can work on the hover animation in CSS. We just need to replace the URL in the href attribute inside image elements. This markup can be easily reused for other background and foreground images. The red is a clipping path that will be applied to both the background and foreground image. The green element represents a clipping path that will be applied to the background image. Once I did that, I updated the markup by adding my own class attributes. I’ve used Inkscape to create the basic SVG markup and clipping paths, just to make it easy for myself. Let’s start by setting up our SVG element. As an added benefit, using clip-path in CSS on SVG has 95% browser support, which is a 13% increase compared to clip-path: path. As the SVG element is being scaled, its coordinate system is also being scaled, and it maintains its proportions based on the various properties that cover a wide range of possible use cases. SVG and elements adapt to the coordinate system of the SVG element, so they are responsive out of the box. is an SVG property, which is different than the newly-released and non-responsive clip-path: path. So, what are our options besides overflow and clip-path? Well, let’s just use in the SVG itself. Using overflow-y: hidden, the bottom part looks good, but the image is cut-off at the top where the overflow should be visible. We cannot use a standard CSS overflow property since it affects both the top and bottom. We want anything that overflows the clip-path to be visible only on the top part of the image. What we’re going to do is re-create this effect using standard, widely-supported CSS techniques so that it not only works, but is truly responsive as well. Responsive web design has been a widely-accepted standard for many years now, so it’s weird to see a new CSS property that doesn’t follow the principle and exclusively uses pixel units. This severely limits the number of use cases for clip-path: path(), as it can only be used on fixed-sized elements. Right off the bat, the path shape starts to cut things off. For example, let’s say we zoom into the page.
So, keep in mind that mobile support is currently limited to Chrome and Safari.īesides support, the bigger and more bizarre issue with path is that it currently only works with pixel values, meaning that it is not responsive. For starters, while we mentioned that support is generally good, it’s not great and hovers around 82% coverage at the time of writing.
This effect looks cool, but there are some issues with the path value. An important detail is how the foreground image animation (scale up and move up) appears to be independent from the background image animation (scale up only). The basic idea of the is to make the foreground image of a person appear to pop-out from the colorful background and scale up in size when the element is hovered. Let’s take what we know about clip-path and start working on the hover effect. This is where the new path value comes in - it allows us to use a more flexible SVG path to create various clipping paths that go beyond basic shapes. Possible values for clip-path include circle, ellipse and polygon which limit the use-case to just those specific shapes. You can kind of think of it as though the star is a cookie cutter, the element is the cookie dough, and the result is a star-shaped cookie. If you haven’t used clip-path or you are unfamiliar with it, it basically allows us to specify a display region for an element based on a clipping path and hide portions of the element that fall outside the clip path.
0 kommentar(er)
