İçi boş kalp simgesi nasıl tasarlanır?
Web tasarımında sıklıkla kullanılan içi boş kalp simgesini oluşturmak için CSS, SVG ve Canvas gibi farklı yöntemler bulunuyor. Bu tekniklerle oluşturulan hafif ve ölçeklenebilir kalp simgeleri, modern arayüzlerde estetik görsel öğeler olarak kullanılabiliyor.
İçi Boş Kalp Simgesi Nasıl Tasarlanır?CSS ile İçi Boş Kalp TasarımıCSS kullanarak içi boş kalp simgesi oluşturmak için pseudo-element'lerden (: before ve : after) yararlanabiliriz. İşte adım adım tasarım süreci: . heart { width: 100px; height: 90px; position: relative; }. heart: before,. heart: after { content: ""; position: absolute; width: 50px; height: 80px; background: transparent; border: 2px solid #ff6b6b; border-radius: 50px 50px 0 0; }. heart: before { left: 50px; transform: rotate(-45deg); transform-origin: 0 100%; }. heart: after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } Bu kod, iki yarım daireyi döndürerek birleştirir ve içi boş bir kalp oluşturur. SVG ile İçi Boş Kalp TasarımıSVG (Scalable Vector Graphics) kullanarak daha esnek ve ölçeklenebilir içi boş kalpler oluşturabilirsiniz: <svg width="100" height="100" viewBox="0 0 100 100"> <path d="M50,30 C30,10 10,20 10,40 C10,60 30,80 50,90 C70,80 90,60 90,40 C90,20 70,10 50,30Z" fill="none" stroke="#ff6b6b" stroke-width="2"/> </svg> Canvas ile İçi Boş Kalp ÇizimiHTML5 Canvas kullanarak dinamik olarak içi boş kalp çizebilirsiniz: const canvas = document. getElementById('heartCanvas'); const ctx = canvas. getContext('2d'); ctx. beginPath(); ctx. moveTo(75, 40); ctx. bezierCurveTo(75, 37, 70, 25, 50, 25); ctx. bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx. bezierCurveTo(20, 80, 40, 102, 75, 120); ctx. bezierCurveTo(110, 102, 130, 80, 130, 62.5); ctx. bezierCurveTo(130, 62.5, 130, 25, 100, 25); ctx. bezierCurveTo(85, 25, 75, 37, 75, 40); ctx. strokeStyle = '#ff6b6b'; ctx. lineWidth = 2; ctx. stroke(); İçi Boş Kalp Tasarımı İpuçları
Örnek CSS Animasyonu. heart: hover: before,. heart: hover: after { border-color: #ff0000; transition: border-color 0.3s ease; } |
.webp "Kalp Ağrısı Belirtileri ve Tedavisi")
.webp "Bebeklerde Kalp Deliği Belirtileri ve Tedavisi")
