4/12/2023 0 Comments Xray vision photoshop![]() Another great touch is that this effect extends throughout the entire home page, thereby creating a consistent user experience. Note the words that are set in a pale purple – they become dark purple when the mouse cursor hovers over them. It also interacts with some words in the titles. It goes perfectly well with the natural motifs presented on the foreground of the website. As it turns out, there is another layer with beautiful scenery made in a delicate line style. Instead, it allows you to pass through the background and peek inside to see what is happening behind the curtains. Here, the effect does not touch the title, text or navigation. It lets the audience see through the fore layers, revealing the background. As a rule, it requires a skillful play with masking. While the two previous realizations are widely spread among developers, there is another way to imitate an x-ray effect. It is a perfect example of how to make your minimal, incredibly airy website look amazing. When it hovers over the title, logotype, navigation links and even these small colourful rectangles that are scattered throughout the screen, it changes their color – skilfully imitating an x-ray scan behavior. Note, the mouse cursor is smaller than one on Alex Thery’s website, yet it works perfectly well and does not overwhelm visitors by its massive size. Unlike the previous example, where the scan effects only the slider, here the x-ray effect is applied to various elements of the interface. In the majority of cases, we can see shifting from black to white and vice versa. Just brilliant.Īnother way to implement this trend is to reverse the color of various elements. The roller titles, on the contrary, change their ghost-like style into solid one. Once you hover over the name of the project, one that sits at the heart of the screen, the circle shows the inner part of it – transforming the solid typeface into a hollow one. Here, you can stumble upon a big round mouse cursor that has a transparent body and vivid white borders. The first method implies revealing a skeleton-like base, like in the case of Alex Thery and his fantastic personal portfolio. ![]() The effect manifests itself in several ways. This circle, as you may have already guessed, is a mouse cursor that has changed its habitual arrow shape into a ring and borrowed some superpowers, to be more precise an x-ray vision, from Superman. It lets you peek under the essential elements of the interface such as logotypes, typography, and even backgrounds. Much like the code snippet of Noel Delgado, this solution is also based on the concept of “see through.” In a nutshell, there is a circle that serves the role of an X-ray scanner. Start Downloading Now! The X-Ray Effect in Real-life Websites The solution is gaining momentum and already considered as a small, emerging trend. And it was not just a one-time thing that made a dramatic entrance. Recently, the x-ray effect has appeared in the web design sphere. And if you think that this experiment is just a lone concept to play around with, we are going to prove you wrong. The idea is brilliant, and the realization is flawless. A huge circle allows you to see the character’s skeleton, much like any scan in a medical center does. Noel Delgado’s mind-blowing SVG experiment conducted on CodePen called “X-ray me” illustrates the principle. However, the most notable and, without a doubt, the most useful one is that used in medicine.įor more than a century, x-rays have been used to detect and diagnose infections, bone fractures, etc. It has found many applications in physics. It easily passes through solid objects and lets you see inside. An x-ray is a form of electromagnetic radiation that has wavelengths shorter than visible light.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |