Script
```/By SpaceIA Dev/
<!DOCTYPE html>
Cyber Chat Ultra-Mini
<br>
@property --rotation {<br>
syntax: '<angle>';<br>
inherits: false;<br>
initial-value: 0deg;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> :root {
--glass-frost: 0.1;
--glass-saturation: 2;
--border_width: 2px;
--placeholder-color: rgba(255, 255, 255, 0.4);
--neon-gradient: conic-gradient(from var(--rotation) at 50% 50%, #0084ff, #00ff88, #ffaa00, #0084ff);
}
body {
font-family: system-ui, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,1) 100%),
url('https://images.unsplash.com/photo-1551384963-cccb0b7ed94b?q=80&amp;w=2000') center / cover;
margin: 0;
overflow: hidden;
}
.main-container {
position: relative;
width: 90%;
max-width: 400px;
z-index: 2;
}
.chat-box {
position: relative;
display: flex;
align-items: center;
padding: 0.35rem;
border-radius: 999px;
background: rgba(255, 255, 255, var(--glass-frost));
backdrop-filter: blur(15px) saturate(var(--glass-saturation));
-webkit-backdrop-filter: blur(15px);
border: var(--border_width) solid rgba(255, 255, 255, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-box::after {
content: '';
position: absolute;
inset: calc(var(--border_width) * -1.5);
border-radius: inherit;
background: var(--neon-gradient);
z-index: -1;
filter: blur(10px);
opacity: 0;
transition: opacity 0.4s ease;
animation: rotate 3s infinite linear;
}
.neon-border {
position: absolute;
inset: calc(var(--border_width) * -1);
border-radius: inherit;
padding: var(--border_width);
background: var(--neon-gradient);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
animation: rotate 3s infinite linear;
}
.chat-box.is-typing {
background: rgba(0, 0, 0, 0.6);
transform: scale(1.01);
}
.chat-box.is-typing::after,
.chat-box.is-typing .neon-border {
opacity: 1;
}
.chat-input {
flex: 1;
background: none;
border: none;
color: white;
font-size: 1rem;
padding: 0 1.2rem;
outline: none;
z-index: 5;
}
.chat-input::placeholder { color: var(--placeholder-color); }
.glass-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.05);
color: var(--placeholder-color);
fill: var(--placeholder-color);
cursor: pointer;
display: grid;
place-items: center;
transition: all 0.3s ease;
z-index: 5;
padding: 0;
}
.glass-btn:hover {
background: rgba(255,255,255,0.15);
color: white;
fill: white;
transform: translateY(-2px) scale(1.05);
}
.send-svg { width: 1.2rem; height: 1.2rem; }
@keyframes rotate { to { --rotation: 360deg; } }
</style>
</code></pre></div>
<p></head><br>
<body></p>
<div class="main-container">
<div class="chat-box" id="chat-box">
<div class="neon-border"></div>
<input type="text" id="main-input" class="chat-input" placeholder="to write..." autocomplete="off">
<button class="glass-btn">
<svg viewBox="0 0 32 32" class="send-svg"><path d="m26.71 10.29-10-10a1 1 0 0 0-1.41 0l-10 10 1.41 1.41L15 3.41V32h2V3.41l8.29 8.29z"/></svg>
</button>
</div>
</div>
<script>
const chatInput = document.getElementById('main-input');
const chatBox = document.getElementById('chat-box');
chatInput.addEventListener('input', () => {
if (chatInput.value.trim().length > 0) {
chatBox.classList.add('is-typing');
} else {
chatBox.classList.remove('is-typing');
}
});
chatInput.addEventListener('blur', () => {
if (chatInput.value.trim().length === 0) {
chatBox.classList.remove('is-typing');
}
});
</script>
<p></body><br>
</html><br>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dsplommfhwbogmaaswu.png" alt=" "/></p>
<div class="highlight"><pre class="highlight plaintext"><code>
</code></pre></div>
Top comments (1)
script 2 e : <!DOCTYPE html>
Cyber Chat Ultra-Mini
<br>
@property --rotation {<br>
syntax: '<angle>';<br>
inherits: false;<br>
initial-value: 0deg;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> :root {
--glass-frost: 0.1;
--glass-saturation: 2;
--border_width: 2px;
--placeholder-color: rgba(255, 255, 255, 0.4);
--neon-gradient: conic-gradient(from var(--rotation) at 50% 50%, #0084ff, #00ff88, #ffaa00, #0084ff);
}
</style>
</code></pre></div>
<p></head><br>
<body></p>
<div class="main-container">
<div class="chat-box" id="chat-box">
<div class="neon-border"></div>
</div>
<script>
const chatInput = document.getElementById('main-input');
const chatBox = document.getElementById('chat-box');
</script>
<p></body><br>
</html></p>