Lingo Türkiye Programına ait logo dizaynı

<!DOCTYPE html

<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Lingo Türkiye Logo Component</title>

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&display=swap" rel="stylesheet">

<style>

:root {

/* GLOBAL ÖLÇEK DEĞİŞKENİ */

/* Bu değeri değiştirerek tüm logoyu büyütebilir/küçültebilirsiniz */

--scale: 1.2;

/* Boyutlandırma Bazı */

--base-size: calc(100px * var(--scale));

/* Renk Paleti */

/* Altın Çerçeve Gradyanı */

--gold-rim: linear-gradient(135deg, #FDF5DB 0%, #D9B25A 25%, #B9831D 50%, #D9B25A 75%, #F8EFD6 100%);

/* Tile Yüzey Renkleri */

--bg-L: linear-gradient(180deg, #2E71D5 0%, #094CB3 60%, #013A9B 100%);

--bg-i: linear-gradient(180deg, #E0A13F 0%, #C07928 100%);

--bg-N: linear-gradient(135deg, #3FC65F 0%, #049F3F 100%);

--bg-G: linear-gradient(45deg, #EC3125 0%, #F27D6B 100%);

--bg-o: linear-gradient(180deg, #66C2D2 0%, #50B5C9 100%);

/* Badge */

--badge-red: linear-gradient(180deg, #E52D27 0%, #B31217 100%);

}

body {

background-color: #f0f0f0; /* Arka plan referans */

/* background-color: transparent; */ /* Şeffaf kullanım için */

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: 'Nunito', sans-serif;

overflow: hidden;

}

/* ANA KONTEYNER */

.logo-wrapper {

position: relative;

width: calc(var(--base-size) * 5.5);

height: calc(var(--base-size) * 3);

display: flex;

justify-content: center;

align-items: center;

/* Perspektif derinlik hissi için */

perspective: 1000px;

}

.logo-container {

position: relative;

width: 100%;

height: 100%;

transform-style: preserve-3d;

/* JS tilt efekti buraya uygulanacak */

transition: transform 0.1s ease-out;

}

/* TILE GENEL STİLİ (Altın Çerçeve Katmanı) */

.tile {

position: absolute;

border-radius: calc(var(--base-size) * 0.18);

background: var(--gold-rim);

/* Dış Altın Çerçeve + Gölge */

box-shadow:

0 calc(var(--base-size) * 0.05) calc(var(--base-size) * 0.1) rgba(0,0,0,0.3),

0 calc(var(--base-size) * 0.15) calc(var(--base-size) * 0.2) rgba(0,0,0,0.15); /* Soft drop shadow */

display: flex;

justify-content: center;

align-items: center;

/* İçeriği merkeze almak ve altın çerçevenin kalınlığını padding ile vermek */

padding: calc(var(--base-size) * 0.04);

box-sizing: border-box;

transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

/* TILE İÇ YÜZEYİ (Renkli Kısım) */

.tile-face {

width: 100%;

height: 100%;

border-radius: calc(var(--base-size) * 0.14);

position: relative;

overflow: hidden;

/* İçeri gömülme efekti (Inner Bevel) */

box-shadow: inset 0 0 calc(var(--base-size) * 0.05) rgba(0,0,0,0.4);

display: flex;

justify-content: center;

align-items: center;

}

/* PLASTİK PARLAMA EFEKTLERİ (SHINE) */

.tile-face::before {

/* Sol üst köşe parlaklığı */

content: '';

position: absolute;

top: -10%;

left: -10%;

width: 60%;

height: 60%;

background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);

filter: blur(calc(var(--base-size) * 0.05));

z-index: 10;

}

.tile-face::after {

/* Üst kısım yatay ince ışık bandı */

content: '';

position: absolute;

top: 5%;

left: 10%;

width: 80%;

height: 15%;

background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%);

border-radius: 50%;

filter: blur(calc(var(--base-size) * 0.02));

z-index: 10;

}

/* HARF STİLLERİ (3D Kabartma) */

.letter {

font-size: calc(var(--base-size) * 0.65);

font-weight: 900;

color: white;

line-height: 1;

z-index: 20;

/* Extrusion / Kabartma Gölgesi */

text-shadow:

calc(var(--base-size) * 0.01) calc(var(--base-size) * 0.01) 0px #d9d9d9,

calc(var(--base-size) * 0.02) calc(var(--base-size) * 0.02) 0px #bfbfbf,

calc(var(--base-size) * 0.03) calc(var(--base-size) * 0.03) 0px #999,

calc(var(--base-size) * 0.03) calc(var(--base-size) * 0.03) calc(var(--base-size) * 0.05) rgba(0,0,0,0.5); /* Drop shadow text */

/* Harf üstü ince highlight (negatif offset) */

filter: drop-shadow(calc(var(--base-size) * -0.01) calc(var(--base-size) * -0.01) 0px rgba(255,255,255,0.5));

}

/* ÖZEL TILE AYARLARI (Konum, Boyut, Renk, Z-Index) */

/* L Tile */

.tile-l {

width: var(--base-size);

height: var(--base-size);

top: calc(var(--base-size) * 0.5);

left: 0;

z-index: 2;

}

.tile-l .tile-face { background: var(--bg-L); }

/* L harfinde ekstra üst highlight (resimdeki gibi) */

.tile-l .tile-face::before { background: radial-gradient(circle at 30% 30%, rgba(134,160,218,0.8) 0%, transparent 60%); }

/* i Tile */

.tile-i {

width: calc(var(--base-size) * 0.85);

height: calc(var(--base-size) * 0.85);

top: calc(var(--base-size) * 0.9); /* Aşağıda */

left: calc(var(--base-size) * 0.85);

z-index: 3; /* L ve N üstüne biner */

}

.tile-i .tile-face { background: var(--bg-i); }

/* i harfi biraz küçük */

.tile-i .letter { font-size: calc(var(--base-size) * 0.55); }

/* N Tile */

.tile-n {

width: calc(var(--base-size) * 0.95);

height: calc(var(--base-size) * 0.95);

top: calc(var(--base-size) * 0.55);

left: calc(var(--base-size) * 1.55);

z-index: 2;

}

.tile-n .tile-face { background: var(--bg-N); }

/* G Tile (Yukarıda ve En Üstte) */

.tile-g {

width: calc(var(--base-size) * 0.85);

height: calc(var(--base-size) * 0.85);

top: 0; /* Yukarı taşınmış */

left: calc(var(--base-size) * 2.4);

z-index: 10; /* En üst katman */

box-shadow:

0 calc(var(--base-size) * 0.1) calc(var(--base-size) * 0.2) rgba(0,0,0,0.4),

calc(var(--base-size) * -0.02) calc(var(--base-size) * 0.02) calc(var(--base-size) * 0.05) rgba(0,0,0,0.2);

}

.tile-g .tile-face { background: var(--bg-G); }

/* o Tile */

.tile-o {

width: calc(var(--base-size) * 0.85);

height: calc(var(--base-size) * 0.85);

top: calc(var(--base-size) * 0.6);

left: calc(var(--base-size) * 3.1);

z-index: 1; /* N ve G'nin altında kalabilir ama sağda */

}

.tile-o .tile-face { background: var(--bg-o); }

/* 'o' harfi özel halka (RING) */

.ring-o {

width: calc(var(--base-size) * 0.45);

height: calc(var(--base-size) * 0.45);

border: calc(var(--base-size) * 0.1) solid white;

border-radius: 50%;

box-shadow:

/* Dışa extrusion gölgesi (sağ alt) */

calc(var(--base-size) * 0.02) calc(var(--base-size) * 0.02) 0px #ccc,

calc(var(--base-size) * 0.03) calc(var(--base-size) * 0.03) calc(var(--base-size) * 0.02) rgba(0,0,0,0.3),

/* İç bevel (halkanın 3d görünmesi için) */

inset calc(var(--base-size) * 0.02) calc(var(--base-size) * 0.02) calc(var(--base-size) * 0.02) rgba(0,0,0,0.1),

inset calc(var(--base-size) * -0.01) calc(var(--base-size) * -0.01) calc(var(--base-size) * 0.01) rgba(255,255,255,0.5);

z-index: 20;

}

/* TÜRKİYE ROZETİ */

.badge-container {

position: absolute;

top: calc(var(--base-size) * 1.6);

left: calc(var(--base-size) * 1.8); /* N ile G'nin altına */

background: var(--gold-rim);

padding: calc(var(--base-size) * 0.03); /* Altın çerçeve kalınlığı */

border-radius: calc(var(--base-size) * 0.5);

z-index: 5;

box-shadow: 0 calc(var(--base-size) * 0.05) calc(var(--base-size) * 0.1) rgba(0,0,0,0.3);

transform: rotate(-1deg); /* Çok hafif eğim */

}

.badge-inner {

background: #C30B18; /* Mat koyu kırmızı */

background: linear-gradient(to bottom, #d62222, #a10b15);

padding: calc(var(--base-size) * 0.05) calc(var(--base-size) * 0.4);

border-radius: calc(var(--base-size) * 0.45);

box-shadow: inset 0 calc(var(--base-size) * 0.05) calc(var(--base-size) * 0.05) rgba(0,0,0,0.3);

display: flex;

justify-content: center;

align-items: center;

border: 1px solid rgba(0,0,0,0.1);

}

.badge-text {

color: white;

font-family: 'Nunito', sans-serif;

font-weight: 800;

font-size: calc(var(--base-size) * 0.22);

letter-spacing: 1px;

text-shadow: 1px 1px 2px rgba(0,0,0,0.4);

}

/* İnce ayar noktalar (i harfinin noktası için özel trick) */

.badge-inner::after {

/* Rozet üstü parlama */

content: '';

position: absolute;

top: 10%;

left: 10%;

width: 80%;

height: 40%;

background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);

border-radius: 20px;

}

</style>

</head>

<body>

<div class="logo-wrapper">

<div class="logo-container" id="logo">

<div class="tile tile-l">

<div class="tile-face">

<span class="letter">L</span>

</div>

<div class="tile tile-i">

<div class="tile-face">

<span class="letter">i</span>

</div>

<div class="tile tile-n">

<div class="tile-face">

<span class="letter">N</span>

</div>

<div class="tile tile-o">

<div class="tile-face">

<div class="ring-o"></div>

</div>

<div class="tile tile-g">

<div class="tile-face">

<span class="letter">G</span>

</div>

<div class="badge-container">

<div class="badge-inner">

<span class="badge-text">TÜRKİYE</span>

</div>

<script>

// Parallax Tilt Efekti (Mouse Takibi)

const wrapper = document.querySelector('.logo-wrapper');

const container = document.getElementById('logo');

const tiles = document.querySelectorAll('.tile');

const badge = document.querySelector('.badge-container');

wrapper.addEventListener('mousemove', (e) => {

const rect = wrapper.getBoundingClientRect();

const x = e.clientX - rect.left; // x position within the element.

const y = e.clientY - rect.top; // y position within the element.

const centerX = rect.width / 2;

const centerY = rect.height / 2;

// Tilt hesaplama (Hassasiyeti ayarlayabilirsiniz)

const rotateX = ((y - centerY) / centerY) * -10; // Max 10 derece

const rotateY = ((x - centerX) / centerX) * 10;

// Container'ı döndür

container.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

// Parallax: Öğeleri birbirinden biraz ayırarak derinlik hissi ver

// G harfi en üstte, daha çok hareket etmeli

tiles.forEach((tile, index) => {

let depth = 10;

if (tile.classList.contains('tile-g')) depth = 25; // G daha çok hareket eder

if (tile.classList.contains('tile-i')) depth = 15;

const moveX = ((x - centerX) / centerX) * depth;

const moveY = ((y - centerY) / centerY) * depth;

// Orijinal konumlarını bozmadan translate ekle

tile.style.transform = `translate(${moveX}px, ${moveY}px)`;

});

// Badge hareketi

const badgeMoveX = ((x - centerX) / centerX) * 12;

const badgeMoveY = ((y - centerY) / centerY) * 12;

badge.style.transform = `rotate(-1deg) translate(${badgeMoveX}px, ${badgeMoveY}px)`;

});

// Mouse çıkınca sıfırla

wrapper.addEventListener('mouseleave', () => {

container.style.transform = `rotateX(0) rotateY(0)`;

tiles.forEach(tile => {

tile.style.transform = `translate(0, 0)`;

});

badge.style.transform = `rotate(-1deg) translate(0, 0)`;

});

</script>

</body>

</html>