{"id":3933,"date":"2024-11-14T23:30:10","date_gmt":"2024-11-14T20:30:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/gladiator-esintili-bir-drop-cap-olusturma-css-ve-javascript-ile\/"},"modified":"2024-11-14T23:30:10","modified_gmt":"2024-11-14T20:30:10","slug":"gladiator-esintili-bir-drop-cap-olusturma-css-ve-javascript-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gladiator-esintili-bir-drop-cap-olusturma-css-ve-javascript-ile\/","title":{"rendered":"Gladiator Esintili Bir Drop Cap Olu\u015fturma: CSS ve JavaScript \u0130le"},"content":{"rendered":"

Gladiator Esintili Bir Drop Cap Olu\u015fturma: CSS ve JavaScript \u0130le<\/p>\n

Merhaba! Bu yaz\u0131da, web sayfalar\u0131n\u0131za g\u00f6rsel bir \u00e7ekicilik katmak i\u00e7in Gladiator temal\u0131 bir drop cap (b\u00fcy\u00fck ilk harf) olu\u015fturma yolculu\u011funa \u00e7\u0131kaca\u011f\u0131z. Hem CSS hem de JavaScript’i kullanarak, metninizi Gladiator’un g\u00f6rkemli d\u00fcnyas\u0131yla birle\u015ftirece\u011fiz. Haz\u0131rsan\u0131z, sava\u015fa haz\u0131rlan\u0131n!<\/p>\n

Gladiator Temas\u0131: Bir Ba\u015flang\u0131\u00e7 Noktas\u0131<\/h2>\n

Gladiator’\u0131n g\u00fc\u00e7l\u00fc ve etkileyici d\u00fcnyas\u0131ndan ilham alarak, drop cap’imizi bu esteti\u011fe g\u00f6re \u015fekillendirece\u011fiz. G\u00f6rsel olarak dikkat \u00e7ekici ve metinle uyumlu bir tasar\u0131m hedefliyoruz. Bu ama\u00e7la, drop cap’i bir Gladyat\u00f6r kask\u0131na benzetece\u011fiz. <\/p>\n

HTML Yap\u0131s\u0131: Sahne Haz\u0131rlan\u0131yor<\/h2>\n

Ba\u015flang\u0131\u00e7 olarak, HTML yap\u0131m\u0131z\u0131 d\u00fczenlememiz gerekiyor. Drop cap’i g\u00f6sterece\u011fimiz bir paragraf eleman\u0131 olu\u015ftural\u0131m. <\/p>\n

“`html<\/p>\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris eu libero euismod suscipit sit amet ut libero.\n<\/p>\n

“`<\/p>\n

Burada “drop-cap” s\u0131n\u0131f\u0131n\u0131, CSS’te drop cap’i bi\u00e7imlendirmek i\u00e7in kullanaca\u011f\u0131z. <\/p>\n

CSS \u0130le \u015eekillendirme: Drop Cap’e Can Vermek<\/h2>\n

\u015eimdi CSS’yi kullanarak drop cap’imize hayat verelim. \u0130lk olarak, temel stilleri ayarlayal\u0131m. <\/p>\n

“`css
\n.drop-cap {
\n font-size: 4em; \/* Boyutunu art\u0131r\u0131yoruz *\/
\n line-height: 1; \/* Sat\u0131r y\u00fcksekli\u011fini ayarl\u0131yoruz *\/
\n float: left; \/* Metnin yan\u0131na yerle\u015ftiriyoruz *\/
\n margin-right: 10px; \/* Metinden biraz bo\u015fluk b\u0131rak\u0131yoruz *\/
\n}
\n“`<\/p>\n

Bu kod, drop cap’in daha b\u00fcy\u00fck olmas\u0131n\u0131, metinle ayn\u0131 hizaya gelmesini ve metinden hafif\u00e7e uzakla\u015fmas\u0131n\u0131 sa\u011flar. <\/p>\n

JavaScript \u0130le Etkile\u015fim: Drop Cap’i Canland\u0131rmak<\/h2>\n

Drop cap’imize hareketlilik kazand\u0131rmak i\u00e7in JavaScript kullanaca\u011f\u0131z. JavaScript kodu, drop cap’in ilk harfini alarak onunla \u00e7al\u0131\u015facak. <\/p>\n

“`javascript
\nconst dropCap = document.querySelector(‘.drop-cap’);
\nconst firstLetter = dropCap.textContent.charAt(0);
\ndropCap.innerHTML = `${firstLetter}<\/span>${dropCap.textContent.slice(1)}`;
\n“`<\/p>\n

Bu kod, drop cap eleman\u0131n\u0131n ilk harfini al\u0131p “drop-cap-letter” s\u0131n\u0131f\u0131yla yeni bir span eleman\u0131 i\u00e7ine yerle\u015ftiriyor. Bu sayede, ilk harfi ayr\u0131 bir \u015fekilde stilleyebiliyoruz. <\/p>\n

CSS \u0130le Gladyat\u00f6r Kask\u0131n\u0131 Tasarlamak<\/h2>\n

\u015eimdi, drop cap’i Gladyat\u00f6r kask\u0131na benzetmek i\u00e7in CSS’yi kullanarak daha ayr\u0131nt\u0131l\u0131 stillere ge\u00e7ece\u011fiz. <\/p>\n

“`css
\n.drop-cap-letter {
\n background-color: #ddd; \/* Kask\u0131n arka plan\u0131n\u0131 belirliyoruz *\/
\n padding: 10px; \/* \u0130\u00e7 bo\u015fluk olu\u015fturuyoruz *\/
\n border-radius: 5px; \/* K\u00f6\u015feleri yuvarlat\u0131yoruz *\/
\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); \/* G\u00f6lge ekliyoruz *\/
\n text-align: center; \/* Metni ortalamak i\u00e7in *\/
\n font-weight: bold; \/* Metni kal\u0131nla\u015ft\u0131rmak i\u00e7in *\/
\n}
\n“`<\/p>\n

Bu stillerle, drop cap’in basit bir \u015fekilde Gladyat\u00f6r kask\u0131na benzemeye ba\u015flamas\u0131 hedefleniyor. <\/p>\n

JavaScript \u0130le Etkile\u015fimi Art\u0131rmak<\/h2>\n

JavaScript’i kullanarak, drop cap’in g\u00f6rsel efektlerini geli\u015ftirebiliriz. \u00d6rne\u011fin, bir hover etkisi ekleyerek kullan\u0131c\u0131n\u0131n faresi drop cap’in \u00fczerine geldi\u011finde bir animasyon olu\u015fturabiliriz. <\/p>\n

“`javascript
\nconst dropCapLetter = document.querySelector(‘.drop-cap-letter’);<\/p>\n

dropCapLetter.addEventListener(‘mouseover’, () => {
\n dropCapLetter.style.transform = ‘scale(1.1)’;
\n dropCapLetter.style.boxShadow = ‘4px 4px 10px rgba(0, 0, 0, 0.5)’;
\n});<\/p>\n

dropCapLetter.addEventListener(‘mouseout’, () => {
\n dropCapLetter.style.transform = ‘scale(1)’;
\n dropCapLetter.style.boxShadow = ‘2px 2px 5px rgba(0, 0, 0, 0.3)’;
\n});
\n“`<\/p>\n

Bu kod, drop cap’in \u00fczerine fare geldi\u011finde b\u00fcy\u00fct\u00fclmesini ve daha belirgin bir g\u00f6lge olu\u015fturmas\u0131n\u0131 sa\u011fl\u0131yor. Fare uzakla\u015ft\u0131\u011f\u0131nda ise orijinal durumuna geri d\u00f6n\u00fcyor. <\/p>\n

Sonu\u00e7<\/h2>\n

G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, CSS ve JavaScript’i birlikte kullanarak basit bir drop cap’i etkileyici bir Gladiator esintili tasar\u0131ma d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Bu \u00f6rnek sadece bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Kendi yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanarak daha karma\u015f\u0131k stiller ve animasyonlar olu\u015fturabilirsiniz. <\/p>\n

Daha fazla CSS ve JavaScript kodu \u00f6rne\u011fi i\u00e7in [fatihsoysal.com](https:\/\/fatihsoysal.com) adresini ziyaret edebilirsiniz. <\/p>\n

\u00d6nemli Kaynaklar<\/h2>\n

Daha derinlemesine \u00f6\u011frenmek ve farkl\u0131 tasar\u0131m se\u00e7enekleri ke\u015ffetmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklara g\u00f6z atabilirsiniz: <\/p>\n