The Latest CodePen Exhibits Feature Interesting UI Design and Styles

by 10 Best Design

Codepen.io is a website in which web designers and digital artists familiar with the basic scripts of web design can upload web "pages" that demonstrate creative visual effects and interactive functions made by using only those scripts. The code that shapes a given exhibit on the site is shown alongside the exhibit itself, and the user may make temporary changes to the code and see the exhibit immediately update itself with those newly changed values or broken functions. As an online "playground," CodePen allows both designers and their audiences to explore the ways in which the most up-to-date forms of HTML, CSS, and JavaScript syntax can create interactive and visually impressive functions that the browser itself renders.

One exhibit recreates the design style of the buttons featured in the UI of a first-person shooter video game named Splitgate. While the buttons shown on the screen do not produce functions when the user clicks on them, they feature rollover effects that replicate the appearances that the buttons in the game take when highlighted. Each button has a fairly detailed appearance when it exists by default, but all of these details are replaced by a flat pane with a single color while the user's cursor hovers over it.

Some may argue that having a button suddenly look less appealing once the user highlights it runs contrary to the purpose of a button that is intended to entice the audience into clicking it more than once. Typically, buttons are designed to retain their style while the cursor is overlapping with it, relying on bolder and brighter colors to emphasize that the current button is what would be activated if the user clicks it. Since each button has appealing stylistic detail to begin with, however, it can be argued that Splitgate found a way to stand out from the design sensibilities of countless competitors.

At any rate, none of the details in the exhibition are achieved by any image files that are called by the syntax. Furthermore, primarily because the buttons do nothing when clicked, there is no need for a JavaScript file whatsoever. For more information click here https://i.redd.it/v6aefn5i4vq71.png.