Transparent Box

100%

Transparent Box

✓ Published0🌍 Public

Last edited Mar 18, 2016

Created on Mar 18, 2016

A CSS-powered sign-up form floats over a full-screen background photograph. The modal box uses a semi-transparent dark overlay with a pink gradient button, while form inputs have translucent white fields. Hovering triggers a skewed light sweep across the button, and the box transitions its shadow and visibility. The code relies on plain HTML and CSS, including pseudo-elements, gradients, and transitions, with no JavaScript or external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

form with strip background and css animation bubbles

A form with floating labels sits on a striped background made via repeated CSS `linear-gradient` layers. Eight geometric shapes (circles, triangles, squares) float upward from the bottom in CSS keyframe animations (`shapes1`, `shapes2`, `shapes3`) with varied delays, durations, and colors, some using `border-radius` and border triangles. JavaScript event listeners on `focusin`/`focusout` toggle an `.active` class to animate labels. Password validation shows requirements when invalid, using `:invalid` and `:placeholder-shown` selectors. No external libraries are used; all rendering relies on native CSS and JavaScript.

KKacieW

66% match

Loading thumbnail…

Login-Box

This interactive login form demonstrates a form-validation and animation sequence. It presents a centered login box where users enter a username and password; blank fields receive a red error box-shadow. Upon successful submission, the dark background layer slides in, the form animates off-screen to the right, and a personalized greeting in the "Rock Salt" font fades in from the top. The implementation uses jQuery `.animate()` for the CSS-based motion, while the D3.js library (v5) is loaded but not directly used; the page structure and styling rely on HTML, CSS, and JavaScript.

AAndrew-Kiwa

66% match

Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

SSriyaI

63% match

Loading thumbnail…

CSS3 Modal Button

This example shows a CSS3-based modal button that prevents accidental destructive actions, such as launching a missile, by requiring two clicks within a 500-millisecond window to confirm the action. The first click changes the button’s label to “Are you sure?” and applies a pulsing animation, while moving the mouse out cancels the confirmation. Implemented with plain HTML, CSS3 transitions and keyframe animations, and native JavaScript event listeners, the code directly manipulates the button’s class and innerHTML to toggle its visual state and reset after five seconds.

Mmbostock

63% match

Loading thumbnail…

Fork of SVT Fundamentals V2

This example presents a sign-in/sign-up form UI, demonstrating an animated toggle between the two modes with smooth transitions, including input field visibility, tab highlighting, and button label changes. The implementation relies on vanilla JavaScript functions (`sign_in`, `sign_up`) to manipulate DOM element classes and styles, while CSS handles the animations and layout. It uses jQuery for DOM traversal and event handling, and includes a PDF generation library (jsPDF) despite no PDF functionality being triggered in the visible code. React scripts are loaded but not utilized in the provided files.

Rrobinjohn.inc@gmail.com

60% match

Loading thumbnail…

css: button with bevel (green)

This example demonstrates a purely visual, CSS-based button component, showing how a static green beveled button is styled without any interactive behavior. The code relies on standard CSS properties, including `background-clip`, `background-image` with a linear gradient, `border-radius`, `border-color`, and an inset `box-shadow` to create the beveled, three-dimensional appearance. It also uses `text-shadow` for subtle depth on the white text. The styling defines the button’s dimensions, padding, and typography, with no JavaScript or external libraries involved. The rendering approach is entirely dependent on the browser’s CSS engine, and no data source is used.

BBraMKJ

60% match

Loading thumbnail…

Signup Template

This example shows a simple signup template that presents the user with a welcome message, their assigned username and password, and contact information using plain HTML and CSS. The page uses flexbox in a container div to center the content vertically, with a green header and footer that frame the signup details. Additional styling comes from the Google Fonts API, which loads the Poppins and Oswald typefaces for the body and header text, while the Material Symbols Outlined font is also included via a stylesheet link. All content is static and requires no JavaScript.

VVijay Karchi

58% match

Loading thumbnail…

Form Login

This example shows a basic login form with email, password, and submit fields on a muted gray background. The form is styled with CSS, including a light purple background, rounded corners, and a border, while the heading and inputs are centered. The page is built with plain HTML and CSS only, using no JavaScript or external libraries. The form does not include any submission handling or validation, making it a static visual demonstration of form layout and styling.

VVictor Gonzalez

58% match