Un código de alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

2 March 2023

Ejemplo de animación de cuadrícula CSS

20 October 2024

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Keyboard and Monitor</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body>
    <form class="container" name="system">
        <input type="text" name="input" class="monitor">
        <div class="keyboard" id="keyboard">
            <div class="keys">
                <input type="button" value="Q" name="Q">
                <input type="button" value="W" name="W">
                <input type="button" value="E" name="E">
                <input type="button" value="R" name="R">
                <input type="button" value="T" name="T">
                <input type="button" value="Y" name="Y">
                <input type="button" value="U" name="U">
                <input type="button" value="I" name="I">
                <input type="button" value="O" name="O">
                <input type="button" value="P" name="P">
            </div>
            <div class="keys">
                <input type="button" value="A" name="A">
                <input type="button" value="S" name="S">
                <input type="button" value="D" name="D">
                <input type="button" value="F" name="F">
                <input type="button" value="G" name="G">
                <input type="button" value="H" name="H">
                <input type="button" value="J" name="J">
                <input type="button" value="K" name="K">
                <input type="button" value="L" name="L">
            </div>
            <div class="keys">
                <input type="button" value="Z" name="Z">
                <input type="button" value="X" name="X">
                <input type="button" value="C" name="C">
                <input type="button" value="V" name="V">
                <input type="button" value="B" name="B">
                <input type="button" value="N" name="N">
                <input type="button" value="M" name="M">
                <input type="button" class="backspace" value="Backspace" name="Backspace">
            </div>
            <input type="button" class="spacebar" name="space">
        </div>
    </form>
    <script>
        document.getElementById('keyboard').addEventListener('click',function (e) {
            if(e.target.tagName === 'INPUT' && e.target.type === 'button') {
                if(e.target.classList.contains('backspace')) {
                    system.input.value = system.input.value.slice(0, -1);
                } else if(e.target.classList.contains('spacebar')) {
                    system.input.value += " ";
                } else {
                    system.input.value += e.target.value;
                }
            }
        })
    </script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-weight: bold;
    outline: none;
    cursor: pointer;
}

body {
    background: #a3b1c6;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.container {
    width: 950px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    position: absolute;
}

.monitor {
    height: 300px;
    width: 500px;
    background: #a3b1c6;
    border: 10px solid #a3b1c6;
    position: absolute;
    top: 5vh;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3), -8px -8px 15px rgba(245, 345, 245, 0.25),
    8px 8px 15px rgba(0, 0, 0, 0.25) inset;
    border-radius: 20px;
    text-align: center;
    font-size: 30px;
}

.keyboard {
    height: 350px;
    width: 850px;
    box-shadow: 5px 5px 15px rgba(107, 188, 238, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    position: relative;
    top: 22vh;
}

.keyboard input {
    height: 60px;
    width: 60px;
    box-shadow: 3px 3px 15px rgba(6, 106, 121, 0.3), -5px -5px 10px rgba(245, 245, 245, 0.25);
    border: 5px solid #a3b1c6;
    margin: 10px;
    border-radius: 10px;
    background:rgba(6, 120, 149, 0.81);
    font-size: 23px;
}

.keyboard input:focus{
  color: white;
  box-shadow: 5px 5px 15px rgba(110, 191, 235, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25),
  5px 5px 15px rgba(0, 0, 0, 0.25) inset;
}

.keyboard .spacebar {
    width: 300px;
}

.keyboard .backspace {
    width: 120px;
    font-size: 19px;
}

Un código de alejandrokundrah

Recomendado

Efecto de texto neón

Ejemplo de animación de cuadrícula CSS

Botón de degradado CSS

HTML

CSS

JS

Recomendado

Efecto de texto neón

Ejemplo de animación de cuadrícula CSS

Botón de degradado CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS