Use a New Extension to Give a Site Stunning Visuals

by 10 Best Design

CodePen is a website that allows users to design and post pieces of front-end web syntax so that other viewers can see some fairly spectacular special effects that can be viewed in web browsers without the need for video or rendering software. In addition, the Change View function on a given project page displays the exact HTML, CSS, and JavaScript syntax that operate in harmony to produce the effect, and it is possible for a visitor to temporarily modify the syntax to change the parameters governing how the final result can behave.

In a particularly complex CodePen project by Aaron Griffis, equally substantial pieces of HTML, CSS, and JavaScript code all come together to produce a visual effect resembling a blank playing card that is "picked up" when the mouse cursor is rolled over it and "flipped over" when clicked on. A dynamically generated set of graphics representing what is normally printed on a given card from a standard 52-card deck will appear on the back side of the card and be changed every two times the card is flipped. Through randomization functions in the JavaScript portion of the project, one of the thirteen ranks and one of the four suits will each be chosen so that a final image will be generated based on those two parameters.

There are no external image files used. Syntax relevant to coordinates in the JavaScript section work together with path-filling syntax in the HTML section to dynamically produce visual elements on one side of the playing card graphic that are arranged in a manner that is fully consistent with playing cards. The JavaScript syntax will determine what color should be associated with a given suit and the locations of symbols on the card's surface based on the generated rank, and the HTML syntax will execute path-filling processes to draw one suit symbol at each of the spots that have been designated by the JavaScript code. The HTML code will also draw special symbols representing the Queen, King, and Jack whenever the random outcomes of the JavaScript functions call for it. For more information click here https://codepen.io/aarongriffis/full/MXjvbV/.