WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von cyrillsemah
495
cyrillsemah
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
13 December 2024
Ein Code von creativefunction305
30 March 2025
Ein Code von ytr3d3
16 November 2024
So erstellen Sie eine Raster-Seitenleiste in CSS
HTML
Copy
Document
VietStrix
Grid
CSS
Copy
/* Copyright (c) 2025 by Kevin Levron (https://codepen.io/soju22/pen/QwLpBBa) */ body, html, #app { margin: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,0.5) 200%); } #app { height: 100%; font-family: "Montserrat", serif; } .hero { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1, h2 { margin: 0; padding: 0; color: white; text-transform: uppercase; text-shadow: 0 0 20px rgba(0, 0, 0, 1); line-height: 100%; user-select: none; } h1 { font-size: 80px; font-weight: 700; } h2 { font-size: 60px; font-weight: 500; } #webgl-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } <!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
import Grid2Background from 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.17/build/backgrounds/grid2.cdn.min.js' const bg = Grid2Background(document.getElementById('webgl-canvas')) document.body.addEventListener('click', () => { bg.grid.setColors([0xffffff * Math.random(), 0xffffff * Math.random(), 0xffffff * Math.random()]) bg.grid.light1.color.set(0xffffff * Math.random()) bg.grid.light1.intensity = 500 + Math.random() * 1000 bg.grid.light2.color.set(0xffffff * Math.random()) bg.grid.light2.intensity = 250 + Math.random() * 250 // bg.grid.plane.material.color.set(0xffffff * Math.random()) })