Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Minecraft World - UI Design</title>

<style>

:root {

--mc-green: #5d9134;

--mc-dirt: #593d29;

--mc-stone: #7d7d7d;

--mc-dark: #1e1e1e;

--mc-ui-bg: #c6c6c6;

--mc-ui-border-light: #ffffff;

--mc-ui-border-dark: #555555;

}

body {

font-family: 'VT323', monospace;

background-color: #e0e0e0;

overflow-x: hidden;

}

.pixel-font {

font-family: 'VT323', monospace;

}

/* Minecraft Button Style */

.mc-btn {

background-color: var(--mc-ui-bg);

border-top: 4px solid var(--mc-ui-border-light);

border-left: 4px solid var(--mc-ui-border-light);

border-right: 4px solid var(--mc-ui-border-dark);

border-bottom: 4px solid var(--mc-ui-border-dark);

color: #222;

cursor: pointer;

transition: all 0.1s;

text-shadow: 2px 2px 0px rgba(255,255,255,0.5);

}

.mc-btn:active {

border-top: 4px solid var(--mc-ui-border-dark);

border-left: 4px solid var(--mc-ui-border-dark);

border-right: 4px solid var(--mc-ui-border-light);

border-bottom: 4px solid var(--mc-ui-border-light);

transform: translateY(2px);

}

.mc-btn-primary {

background-color: var(--mc-green);

color: white;

text-shadow: 2px 2px 0px #3f6324;

border-color: #7ab547 #3f6324 #3f6324 #7ab547;

}

/* Voxel Background Shape (The Wave Replacement) */

.voxel-shape {

position: absolute;

top: 0;

right: 0;

width: 60%;

height: 100%;

background:

linear-gradient(to bottom, transparent 0%, transparent 100%),

conic-gradient(from 0deg at 50% 50%, #593d29 0deg, #4a3221 360deg);

clip-path: polygon(20% 0%, 100% 0, 100% 100%, 50% 100%, 50% 85%, 25% 85%, 25% 70%, 10% 70%, 10% 40%, 20% 40%);

z-index: -1;

opacity: 0.9;

}

.floating-particles {

position: absolute;

width: 10px;

height: 10px;

background: #000;

animation: float 4s infinite ease-in-out;

opacity: 0.3;

}

@keyframes float {

0% { transform: translateY(0) rotate(0deg); }

50% { transform: translateY(-20px) rotate(45deg); }

100% { transform: translateY(0) rotate(0deg); }

}

/* CSS 3D Cube Stack */

.scene {

width: 200px;

height: 300px;

perspective: 600px;

position: relative;

}

.cube {

width: 100px;

height: 100px;

position: absolute;

transform-style: preserve-3d;

transform: rotateX(-20deg) rotateY(-45deg);

animation: hoverBlock 3s infinite ease-in-out;

}

.cube:nth-child(2) { top: 80px; animation-delay: 0.2s; z-index: 2; }

.cube:nth-child(3) { top: 160px; animation-delay: 0.4s; z-index: 1; }

@keyframes hoverBlock {

0%, 100% { transform: rotateX(-20deg) rotateY(-45deg) translateY(0); }

50% { transform: rotateX(-20deg) rotateY(-45deg) translateY(-10px); }

}

.face {

position: absolute;

width: 100px;

height: 100px;

border: 2px solid rgba(0,0,0,0.2);

}

.front  { transform: rotateY(0deg) translateZ(50px); }

.back   { transform: rotateY(180deg) translateZ(50px); }

.right  { transform: rotateY(90deg) translateZ(50px); }

.left   { transform: rotateY(-90deg) translateZ(50px); }

.top    { transform: rotateX(90deg) translateZ(50px); }

.bottom { transform: rotateX(-90deg) translateZ(50px); }

/* Grass Block Textures (CSS Generated) */

.grass .top { background-color: #5d9134; box-shadow: inset 0 0 10px #3f6324; }

.grass .face:not(.top):not(.bottom) {

background: linear-gradient(to bottom, #5d9134 30%, #593d29 30%);

box-shadow: inset 0 0 5px rgba(0,0,0,0.3);

}

.grass .bottom { background-color: #593d29; }

/* Dirt Block */

.dirt .face { background-color: #593d29; box-shadow: inset 5px 5px 0px #6d4c35, inset -5px -5px 0px #4a3221; }

/* Stone Block */

.stone .face { background-color: #7d7d7d; box-shadow: inset 5px 5px 0px #999, inset -5px -5px 0px #555; }

/* Custom Scrollbar */

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background: #333; }

::-webkit-scrollbar-thumb { background: #7d7d7d; border: 2px solid #fff; }

/* Tooltip */

.tooltip {

visibility: hidden;

background-color: #100010;

color: #fff;

text-align: center;

padding: 5px;

border: 2px solid #5000ff;

position: absolute;

z-index: 100;

bottom: 120%;

left: 50%;

transform: translateX(-50%);

white-space: nowrap;

}

.item-card:hover .tooltip {

visibility: visible;

}

/* Modal Crafting Table */

.crafting-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 4px;

width: 150px;

height: 150px;

}

.craft-slot {

background-color: #8b8b8b;

border: 2px solid #373737;

box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #bbb;

display: flex;

align-items: center;

justify-content: center;

}

</style>

</head>

</div>

<span class="text-3xl font-bold tracking-tighter text-gray-800">CRAFT.<span class="text-xs align-top">TR</span></span>

</div>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Sunucular</a>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Texture Pack</a>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Modlar</a>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Skinler</a>

</div>

</div>

</div>

</button>

</div>

</nav>

<a href="#" class="text-2xl text-gray-800 hover:text-green-600">Sunucular</a>

<a href="#" class="text-2xl text-gray-800 hover:text-green-600">Texture Pack</a>

<a href="#" class="text-2xl text-gray-800 hover:text-green-600">Modlar</a>

</div>

<div>

<h3 class="text-gray-500 text-2xl mb-2">Macera Zamanı...</h3>

HAYATTA<br>KALMA<br><span class="text-[#5d9134]">REHBERİ.</span>

</h1>

</div>

<span class="text-2xl font-bold text-gray-800">Aktif Oyuncu</span>

</div>

</div>

<span>YARATICI MOD</span>

<span class="text-sm bg-black/10 px-2 py-1 rounded">8K Online</span>

</button>

</div>

<div class="tooltip">Güç İksiri II</div>

</svg>

</div>

<div class="tooltip">Altın Elma</div>

</svg>

</div>

<div class="tooltip">Elmas</div>

<div class="absolute -top-3 -left-3 bg-[#593d29] text-white text-xs px-2 py-1 border border-black z-20">Maden</div>

</svg>

</div>

</div>

</div>

</div>

</div>

</div>

</main>

</div>

<span class="text-2xl text-[#404040]" id="modal-title">Çalışma Masası</span>

</div>

<span class="block mb-1 text-gray-600">Üretim</span>

</div>

</div>

<p id="modal-desc">Tarifleri görmek için bir eşya seçin.</p>

</div>

<button onclick="closeModal()" class="mc-btn px-6 py-2 text-xl">Envantere Ekle</button>

</div>

// Initialize Lucide Icons

lucide.createIcons();

function toggleMenu() {

const menu = document.getElementById('mobile-menu');

menu.classList.toggle('hidden');

menu.classList.toggle('flex');

}

// Modal Logic

const modal = document.getElementById('crafting-modal');

const modalTitle = document.getElementById('modal-title');

const modalDesc = document.getElementById('modal-desc');

const modalResult = document.getElementById('modal-result-icon');

const craftingGrid = document.getElementById('crafting-grid');

const recipes = {

'crafting': {

title: 'Çalışma Masası',

desc: 'Yaratıcı moda geçmek için gerekli araçlar burada. 4 adet tahta kullanın.',

icon: '<div class="w-12 h-12 bg-[#8B5E3C] border border-black"></div>',

pattern: [

'#8B5E3C', '#8B5E3C', '',

'', '', ''

]

'potion': {

title: 'Güç İksiri',

desc: '+3 Saldırı gücü sağlar. Nether wart ve Blaze tozu gerektirir.',

icon: '<svg viewBox="0 0 24 24" class="w-12 h-12 text-red-500 fill-current" stroke="black"><path d="M10,2 L14,2 L14,6 L10,6 Z M6,12 C6,8 18,8 18,12 C18,18 16,22 12,22 C8,22 6,18 6,12 Z"/></svg>',

pattern: [

'', '#FF0000', '',

'', '#444', '',

'', '#444', ''

] // Simplified visualization

'apple': {

title: 'Altın Elma',

desc: 'Zorlu savaşlarda can yenilenmesi ve emilim sağlar.',

icon: '<svg viewBox="0 0 24 24" class="w-12 h-12 text-yellow-400 fill-current" stroke="black"><path d="M12,2 C12,2 14,5 14,5 C16,4 19,5 20,8 C21,13 18,19 12,21 C6,19 3,13 4,8 C5,5 8,4 10,5 C10,5 12,2 12,2 Z"/></svg>',

pattern: [

'gold', 'gold', 'gold',

'gold', 'red', 'gold',

'gold', 'gold', 'gold'

]

'diamond': {

title: 'Elmas Blok',

desc: '9 adet elmas kullanılarak sıkıştırılmış en değerli blok.',

icon: '<div class="w-12 h-12 bg-cyan-400 border border-white shadow-[inset_0_0_10px_rgba(255,255,255,0.5)]"></div>',

pattern: [

'cyan', 'cyan', 'cyan',

'cyan', 'cyan', 'cyan'

]

}

};

function openModal(type) {

const data = recipes[type];

if(!data) return;

modalTitle.innerText = data.title;

modalDesc.innerText = data.desc;

modalResult.innerHTML = data.icon;

// Reset and Fill Grid

const slots = craftingGrid.children;

for(let i=0; i<9; i++) {

slots[i].innerHTML = '';

slots[i].style.backgroundColor = '#8b8b8b'; // default gray

if(data.pattern && data.pattern[i]) {

const color = data.pattern[i];

if(color === 'gold') slots[i].style.backgroundColor = '#FFD700';

else if(color === 'red') slots[i].style.backgroundColor = '#FF0000';

else if(color === 'cyan') slots[i].style.backgroundColor = '#00FFFF';

else if(color.startsWith('#')) slots[i].style.backgroundColor = color;

}

modal.classList.remove('hidden');

modal.classList.add('flex');

}

function closeModal() {

modal.classList.add('hidden');

modal.classList.remove('flex');

}

// Close modal on outside click

modal.addEventListener('click', (e) => {

if (e.target === modal) closeModal();

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Minecraft World - UI Design</title>

<style>

:root {

--mc-green: #5d9134;

--mc-dirt: #593d29;

--mc-stone: #7d7d7d;

--mc-dark: #1e1e1e;

--mc-ui-bg: #c6c6c6;

--mc-ui-border-light: #ffffff;

--mc-ui-border-dark: #555555;

}

body {

font-family: 'VT323', monospace;

background-color: #e0e0e0;

overflow-x: hidden;

}

.pixel-font {

font-family: 'VT323', monospace;

}

/* Minecraft Button Style */

.mc-btn {

background-color: var(--mc-ui-bg);

border-top: 4px solid var(--mc-ui-border-light);

border-left: 4px solid var(--mc-ui-border-light);

border-right: 4px solid var(--mc-ui-border-dark);

border-bottom: 4px solid var(--mc-ui-border-dark);

color: #222;

cursor: pointer;

transition: all 0.1s;

text-shadow: 2px 2px 0px rgba(255,255,255,0.5);

}

.mc-btn:active {

border-top: 4px solid var(--mc-ui-border-dark);

border-left: 4px solid var(--mc-ui-border-dark);

border-right: 4px solid var(--mc-ui-border-light);

border-bottom: 4px solid var(--mc-ui-border-light);

transform: translateY(2px);

}

.mc-btn-primary {

background-color: var(--mc-green);

color: white;

text-shadow: 2px 2px 0px #3f6324;

border-color: #7ab547 #3f6324 #3f6324 #7ab547;

}

/* Voxel Background Shape (The Wave Replacement) */

.voxel-shape {

position: absolute;

top: 0;

right: 0;

width: 60%;

height: 100%;

background:

linear-gradient(to bottom, transparent 0%, transparent 100%),

conic-gradient(from 0deg at 50% 50%, #593d29 0deg, #4a3221 360deg);

clip-path: polygon(20% 0%, 100% 0, 100% 100%, 50% 100%, 50% 85%, 25% 85%, 25% 70%, 10% 70%, 10% 40%, 20% 40%);

z-index: -1;

opacity: 0.9;

}

.floating-particles {

position: absolute;

width: 10px;

height: 10px;

background: #000;

animation: float 4s infinite ease-in-out;

opacity: 0.3;

}

@keyframes float {

0% { transform: translateY(0) rotate(0deg); }

50% { transform: translateY(-20px) rotate(45deg); }

100% { transform: translateY(0) rotate(0deg); }

}

/* CSS 3D Cube Stack */

.scene {

width: 200px;

height: 300px;

perspective: 600px;

position: relative;

}

.cube {

width: 100px;

height: 100px;

position: absolute;

transform-style: preserve-3d;

transform: rotateX(-20deg) rotateY(-45deg);

animation: hoverBlock 3s infinite ease-in-out;

}

.cube:nth-child(2) { top: 80px; animation-delay: 0.2s; z-index: 2; }

.cube:nth-child(3) { top: 160px; animation-delay: 0.4s; z-index: 1; }

@keyframes hoverBlock {

0%, 100% { transform: rotateX(-20deg) rotateY(-45deg) translateY(0); }

50% { transform: rotateX(-20deg) rotateY(-45deg) translateY(-10px); }

}

.face {

position: absolute;

width: 100px;

height: 100px;

border: 2px solid rgba(0,0,0,0.2);

}

.front  { transform: rotateY(0deg) translateZ(50px); }

.back   { transform: rotateY(180deg) translateZ(50px); }

.right  { transform: rotateY(90deg) translateZ(50px); }

.left   { transform: rotateY(-90deg) translateZ(50px); }

.top    { transform: rotateX(90deg) translateZ(50px); }

.bottom { transform: rotateX(-90deg) translateZ(50px); }

/* Grass Block Textures (CSS Generated) */

.grass .top { background-color: #5d9134; box-shadow: inset 0 0 10px #3f6324; }

.grass .face:not(.top):not(.bottom) {

background: linear-gradient(to bottom, #5d9134 30%, #593d29 30%);

box-shadow: inset 0 0 5px rgba(0,0,0,0.3);

}

.grass .bottom { background-color: #593d29; }

/* Dirt Block */

.dirt .face { background-color: #593d29; box-shadow: inset 5px 5px 0px #6d4c35, inset -5px -5px 0px #4a3221; }

/* Stone Block */

.stone .face { background-color: #7d7d7d; box-shadow: inset 5px 5px 0px #999, inset -5px -5px 0px #555; }

/* Custom Scrollbar */

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background: #333; }

::-webkit-scrollbar-thumb { background: #7d7d7d; border: 2px solid #fff; }

/* Tooltip */

.tooltip {

visibility: hidden;

background-color: #100010;

color: #fff;

text-align: center;

padding: 5px;

border: 2px solid #5000ff;

position: absolute;

z-index: 100;

bottom: 120%;

left: 50%;

transform: translateX(-50%);

white-space: nowrap;

}

.item-card:hover .tooltip {

visibility: visible;

}

/* Modal Crafting Table */

.crafting-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 4px;

width: 150px;

height: 150px;

}

.craft-slot {

background-color: #8b8b8b;

border: 2px solid #373737;

box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #bbb;

display: flex;

align-items: center;

justify-content: center;

}

</style>

</head>

</div>

<span class="text-3xl font-bold tracking-tighter text-gray-800">CRAFT.<span class="text-xs align-top">TR</span></span>

</div>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Sunucular</a>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Texture Pack</a>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Modlar</a>

<a href="#" class="hover:text-green-600 hover:underline decoration-4 underline-offset-4 transition-colors">Skinler</a>

</div>

</div>

</div>

</button>

</div>

</nav>

<a href="#" class="text-2xl text-gray-800 hover:text-green-600">Sunucular</a>

<a href="#" class="text-2xl text-gray-800 hover:text-green-600">Texture Pack</a>

<a href="#" class="text-2xl text-gray-800 hover:text-green-600">Modlar</a>

</div>

<div>

<h3 class="text-gray-500 text-2xl mb-2">Macera Zamanı...</h3>

HAYATTA<br>KALMA<br><span class="text-[#5d9134]">REHBERİ.</span>

</h1>

</div>

<span class="text-2xl font-bold text-gray-800">Aktif Oyuncu</span>

</div>

</div>

<span>YARATICI MOD</span>

<span class="text-sm bg-black/10 px-2 py-1 rounded">8K Online</span>

</button>

</div>

<div class="tooltip">Güç İksiri II</div>

</svg>

</div>

<div class="tooltip">Altın Elma</div>

</svg>

</div>

<div class="tooltip">Elmas</div>

<div class="absolute -top-3 -left-3 bg-[#593d29] text-white text-xs px-2 py-1 border border-black z-20">Maden</div>

</svg>

</div>

</div>

</div>

</div>

</div>

</div>

</main>

</div>

<span class="text-2xl text-[#404040]" id="modal-title">Çalışma Masası</span>

</div>

<span class="block mb-1 text-gray-600">Üretim</span>

</div>

</div>

<p id="modal-desc">Tarifleri görmek için bir eşya seçin.</p>

</div>

<button onclick="closeModal()" class="mc-btn px-6 py-2 text-xl">Envantere Ekle</button>

</div>

// Initialize Lucide Icons

lucide.createIcons();

function toggleMenu() {

const menu = document.getElementById('mobile-menu');

menu.classList.toggle('hidden');

menu.classList.toggle('flex');

}

// Modal Logic

const modal = document.getElementById('crafting-modal');

const modalTitle = document.getElementById('modal-title');

const modalDesc = document.getElementById('modal-desc');

const modalResult = document.getElementById('modal-result-icon');

const craftingGrid = document.getElementById('crafting-grid');

const recipes = {

'crafting': {

title: 'Çalışma Masası',

desc: 'Yaratıcı moda geçmek için gerekli araçlar burada. 4 adet tahta kullanın.',

icon: '<div class="w-12 h-12 bg-[#8B5E3C] border border-black"></div>',

pattern: [

'#8B5E3C', '#8B5E3C', '',

'', '', ''

]

'potion': {

title: 'Güç İksiri',

desc: '+3 Saldırı gücü sağlar. Nether wart ve Blaze tozu gerektirir.',

icon: '<svg viewBox="0 0 24 24" class="w-12 h-12 text-red-500 fill-current" stroke="black"><path d="M10,2 L14,2 L14,6 L10,6 Z M6,12 C6,8 18,8 18,12 C18,18 16,22 12,22 C8,22 6,18 6,12 Z"/></svg>',

pattern: [

'', '#FF0000', '',

'', '#444', '',

'', '#444', ''

] // Simplified visualization

'apple': {

title: 'Altın Elma',

desc: 'Zorlu savaşlarda can yenilenmesi ve emilim sağlar.',

pattern: [

'gold', 'gold', 'gold',

'gold', 'red', 'gold',

'gold', 'gold', 'gold'

]

'diamond': {

title: 'Elmas Blok',

desc: '9 adet elmas kullanılarak sıkıştırılmış en değerli blok.',

icon: '<div class="w-12 h-12 bg-cyan-400 border border-white shadow-[inset_0_0_10px_rgba(255,255,255,0.5)]"></div>',

pattern: [

'cyan', 'cyan', 'cyan',

'cyan', 'cyan', 'cyan'

]

}

};

function openModal(type) {

const data = recipes[type];

if(!data) return;

modalTitle.innerText = data.title;

modalDesc.innerText = data.desc;

modalResult.innerHTML = data.icon;

// Reset and Fill Grid

const slots = craftingGrid.children;

for(let i=0; i<9; i++) {

slots[i].innerHTML = '';

slots[i].style.backgroundColor = '#8b8b8b'; // default gray

if(data.pattern && data.pattern[i]) {

const color = data.pattern[i];

if(color === 'gold') slots[i].style.backgroundColor = '#FFD700';

else if(color === 'red') slots[i].style.backgroundColor = '#FF0000';

else if(color === 'cyan') slots[i].style.backgroundColor = '#00FFFF';

else if(color.startsWith('#')) slots[i].style.backgroundColor = color;

}

modal.classList.remove('hidden');

modal.classList.add('flex');

}

function closeModal() {

modal.classList.add('hidden');

modal.classList.remove('flex');

}

// Close modal on outside click

modal.addEventListener('click', (e) => {

if (e.target === modal) closeModal();

});

</script>

</body>

</html>

Preview

Validating your code, please wait...