{"id":35769,"date":"2025-12-03T18:40:48","date_gmt":"2025-12-03T15:40:48","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35769"},"modified":"2025-12-03T18:40:48","modified_gmt":"2025-12-03T15:40:48","slug":"css-ile-web-sitenizin-hakkimda-bolumunu-olusturma-gelismis-teknikler-bolum-2","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-ile-web-sitenizin-hakkimda-bolumunu-olusturma-gelismis-teknikler-bolum-2\/","title":{"rendered":"CSS ile Web Sitenizin “Hakk\u0131mda” B\u00f6l\u00fcm\u00fcn\u00fc Olu\u015fturma: Geli\u015fmi\u015f Teknikler (B\u00f6l\u00fcm 2)"},"content":{"rendered":"

<\/p>\n

CSS ile Web Sitenizin “Hakk\u0131mda” B\u00f6l\u00fcm\u00fcn\u00fc Olu\u015fturma: Geli\u015fmi\u015f Teknikler (B\u00f6l\u00fcm 2)<\/h2>\n

Giri\u015f<\/h3>\n

Web sitenizin “Hakk\u0131mda” b\u00f6l\u00fcm\u00fc, ziyaret\u00e7ilerinizle ilk ki\u015fisel ba\u011f\u0131n\u0131z\u0131 kurdu\u011funuz, kendinizi, yeteneklerinizi ve deneyimlerinizi sergiledi\u011finiz hayati bir aland\u0131r. B\u00f6l\u00fcm 1’de bu b\u00f6l\u00fcm\u00fcn temel yap\u0131s\u0131n\u0131 ve ba\u015flang\u0131\u00e7 seviyesi CSS stillerini ele alm\u0131\u015f olabiliriz. \u015eimdi, B\u00f6l\u00fcm 2’de, “Hakk\u0131mda” sayfan\u0131z\u0131 s\u0131radanl\u0131ktan \u00e7\u0131kar\u0131p g\u00f6z al\u0131c\u0131, etkile\u015fimli ve tamamen duyarl\u0131 bir ba\u015fyap\u0131ta d\u00f6n\u00fc\u015ft\u00fcrecek daha geli\u015fmi\u015f CSS tekniklerine odaklanaca\u011f\u0131z. Bu makalede, modern d\u00fczen sistemlerinden dinamik g\u00f6rsel efektlere, duyarl\u0131 tasar\u0131mdan eri\u015filebilirlik ipu\u00e7lar\u0131na kadar geni\u015f bir yelpazede konular\u0131 derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, sadece kod yazmay\u0131 \u00f6\u011fretmek de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve sizi rakiplerinizden ay\u0131ran estetik ve i\u015flevsel bir “Hakk\u0131mda” b\u00f6l\u00fcm\u00fc olu\u015fturman\u0131z i\u00e7in size kapsaml\u0131 bir ara\u00e7 seti sunmakt\u0131r.<\/p>\n

Geli\u015fmi\u015f D\u00fczen ve Yap\u0131land\u0131rma<\/h3>\n

“Hakk\u0131mda” b\u00f6l\u00fcm\u00fcn\u00fcz\u00fcn d\u00fczeni, i\u00e7eri\u011finizin alg\u0131lan\u0131\u015f\u0131n\u0131 do\u011frudan etkiler. Geleneksel float tabanl\u0131 d\u00fczenler yerini modern ve daha esnek \u00e7\u00f6z\u00fcmlere b\u0131rakm\u0131\u015ft\u0131r. Bu b\u00f6l\u00fcmde, web tasar\u0131m\u0131nda devrim yaratan Flexbox ve CSS Grid sistemlerini kullanarak karma\u015f\u0131k ve duyarl\u0131 d\u00fczenler olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz.<\/p>\n

Esnek Kutu Modeli (Flexbox) ile Dinamik D\u00fczenler<\/h4>\n

Flexbox, tek boyutlu (sat\u0131r veya s\u00fctun) d\u00fczenler olu\u015fturmak i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r. \u0130\u00e7erik \u00f6\u011felerini bir kapsay\u0131c\u0131 i\u00e7inde hizalamak, da\u011f\u0131tmak ve s\u0131ralamak i\u00e7in tasarlanm\u0131\u015ft\u0131r. “Hakk\u0131mda” b\u00f6l\u00fcm\u00fcn\u00fczde, profil foto\u011fraf\u0131n\u0131z ile metin i\u00e7eri\u011finizi yan yana konumland\u0131rmak veya beceri listelerinizi d\u00fczenlemek gibi senaryolarda Flexbox’tan yararlanabilirsiniz.<\/p>\n

Temel Flexbox Prensipleri:<\/strong>
\n* Flex Kapsay\u0131c\u0131 (Flex Container):<\/strong> display: flex;<\/code> veya display: inline-flex;<\/code> ile tan\u0131mlanan ebeveyn \u00f6\u011fe.
\n* Flex \u00d6\u011feleri (Flex Items):<\/strong> Flex kapsay\u0131c\u0131n\u0131n do\u011frudan \u00e7ocuklar\u0131.<\/p>\n

\u00d6rnek: Profil Foto\u011fraf\u0131 ve Metni Yan Yana Konumland\u0131rma<\/strong>
\nBir profil foto\u011fraf\u0131 ve k\u0131sa bir biyografi metnini yan yana yerle\u015ftirmek, ancak mobil cihazlarda alt alta gelmesini sa\u011flamak i\u00e7in Flexbox idealdir.<\/p>\n

\n    
\n        \"Profil\n    <\/div>\n    
\n        
Merhaba, Ben [Ad\u0131n\u0131z Soyad\u0131n\u0131z]<\/h3>\n        
Yaz\u0131l\u0131m geli\u015ftirme ve web tasar\u0131m\u0131 konusunda tutkulu bir profesyonelim. Son 5 y\u0131ld\u0131r...<\/p>\n        \u0130leti\u015fime Ge\u00e7<\/a>\n    <\/div>\n<\/section><\/code><\/pre>\n
.about-me-flex-container {\n    display: flex; \/ Flexbox'\u0131 etkinle\u015ftir <\/em>\/\n    flex-direction: row; \/ \u00d6\u011feleri yatay s\u0131rala (varsay\u0131lan) <\/em>\/\n    align-items: center; \/ \u00d6\u011feleri dikeyde ortala <\/em>\/\n    gap: 40px; \/ \u00d6\u011feler aras\u0131nda bo\u015fluk b\u0131rak <\/em>\/\n    padding: 50px;\n    background-color: #f9f9f9;\n    border-radius: 10px;\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.profile-image-wrapper {\n    flex-shrink: 0; \/ G\u00f6r\u00fcnt\u00fcn\u00fcn k\u00fc\u00e7\u00fclmesini engelle <\/em>\/\n}\n\n.profile-img {\n    width: 200px;\n    height: 200px;\n    border-radius: 50%; \/ Yuvarlak foto\u011fraf <\/em>\/\n    object-fit: cover; \/ G\u00f6r\u00fcnt\u00fcn\u00fcn oran\u0131n\u0131 korurken kapsay\u0131c\u0131y\u0131 doldur <\/em>\/\n    border: 5px solid #007bff;\n}\n\n.bio-text-wrapper {\n    flex-grow: 1; \/ Metin alan\u0131n\u0131n kalan bo\u015flu\u011fu doldurmas\u0131n\u0131 sa\u011fla <\/em>\/\n    text-align: justify;\n}\n\n.bio-text-wrapper h3 {\n    color: #333;\n    margin-bottom: 15px;\n}\n\n.bio-text-wrapper p {\n    color: #555;\n    line-height: 1.6;\n    margin-bottom: 20px;\n}\n\n\/ Mobil uyumluluk i\u00e7in medya sorgusu <\/em>\/\n@media (max-width: 768px) {\n    .about-me-flex-container {\n        flex-direction: column; \/ Mobil cihazlarda \u00f6\u011feleri dikey s\u0131rala <\/em>\/\n        text-align: center; \/ Metni ortala <\/em>\/\n        padding: 30px;\n        gap: 25px;\n    }\n    .profile-img {\n        width: 150px;\n        height: 150px;\n    }\n    .bio-text-wrapper {\n        text-align: center; \/ Mobil g\u00f6r\u00fcn\u00fcmde metni ortala <\/em>\/\n    }\n}<\/code><\/pre>\n
Izgara Sistemi (CSS Grid) ile Karma\u015f\u0131k Yap\u0131lar<\/h4>\n
CSS Grid, iki boyutlu (hem sat\u0131r hem de s\u00fctun) d\u00fczenler olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu, daha karma\u015f\u0131k “Hakk\u0131mda” b\u00f6l\u00fcmleri i\u00e7in, \u00f6rne\u011fin becerilerinizi veya referanslar\u0131n\u0131z\u0131 birden \u00e7ok s\u00fctunda ve sat\u0131rda d\u00fczenlemek istedi\u011finizde m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n
Temel Grid Prensipleri:<\/strong>
\n*   Grid Kapsay\u0131c\u0131 (Grid Container):<\/strong> display: grid;<\/code> ile tan\u0131mlanan ebeveyn \u00f6\u011fe.
\n*   Grid \u00d6\u011feleri (Grid Items):<\/strong> Grid kapsay\u0131c\u0131n\u0131n do\u011frudan \u00e7ocuklar\u0131.
\n*   grid-template-columns<\/code> ve grid-template-rows<\/code>:<\/strong> Izgara s\u00fctunlar\u0131n\u0131 ve sat\u0131rlar\u0131n\u0131 tan\u0131mlar.
\n*   grid-gap<\/code> (veya gap<\/code>):<\/strong> S\u00fctunlar ve sat\u0131rlar aras\u0131ndaki bo\u015flu\u011fu belirler.<\/p>\n
\u00d6rnek: Beceriler B\u00f6l\u00fcm\u00fc \u0130\u00e7in \u00dc\u00e7 S\u00fctunlu Izgara D\u00fczeni<\/strong>
\nYeteneklerinizi veya uzmanl\u0131k alanlar\u0131n\u0131z\u0131 g\u00f6steren kartlar\u0131 d\u00fczenlemek i\u00e7in Grid kullanabiliriz.<\/p>\n
\n    
Yeteneklerim<\/h2>\n    
\n        
\n            <\/i>\n            
Web Geli\u015ftirme<\/h3>\n            
HTML5, CSS3, JavaScript, React, Node.js<\/p>\n        <\/div>\n        
\n            <\/i>\n            
Mobil Uygulama<\/h3>\n            
React Native, Flutter<\/p>\n        <\/div>\n        
\n            <\/i>\n            
Veritaban\u0131<\/h3>\n            
MySQL, PostgreSQL, MongoDB<\/p>\n        <\/div>\n        
\n            <\/i>\n            
Bulut Teknolojileri<\/h3>\n            
AWS, Azure, Google Cloud<\/p>\n        <\/div>\n        
\n            <\/i>\n            
UI\/UX Tasar\u0131m<\/h3>\n            
Figma, Adobe XD<\/p>\n        <\/div>\n        
\n            <\/i>\n            
Backend Geli\u015ftirme<\/h3>\n            
Python, Django, Flask<\/p>\n        <\/div>\n    <\/div>\n<\/section><\/code><\/pre>\n
.skills-grid-container {\n    padding: 60px 20px;\n    background-color: #eef4f8;\n    text-align: center;\n}\n\n.skills-grid-container h2 {\n    color: #2c3e50;\n    margin-bottom: 40px;\n    font-size: 2.5em;\n}\n\n.skills-grid {\n    display: grid; \/ Grid'i etkinle\u015ftir <\/em>\/\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); \/ Duyarl\u0131 3 s\u00fctun <\/em>\/\n    gap: 30px; \/ Izgara \u00f6\u011feleri aras\u0131nda bo\u015fluk <\/em>\/\n    max-width: 1200px;\n    margin: 0 auto;\n}\n\n.skill-card {\n    background-color: #ffffff;\n    padding: 30px;\n    border-radius: 10px;\n    box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.skill-card:hover {\n    transform: translateY(-10px);\n    box-shadow: 0 10px 25px rgba(0,0,0,0.15);\n}\n\n.skill-card i {\n    font-size: 3.5em;\n    color: #007bff;\n    margin-bottom: 20px;\n}\n\n.skill-card h3 {\n    color: #333;\n    margin-bottom: 10px;\n    font-size: 1.5em;\n}\n\n.skill-card p {\n    color: #666;\n    font-size: 1em;\n    line-height: 1.5;\n}\n\n\/ Font Awesome simgeleri i\u00e7in CDN eklemeyi unutmay\u0131n <\/em>\/\n\/  <\/em>\/<\/code><\/pre>\n
G\u00f6rsel \u00d6\u011feleri Detayland\u0131rma<\/h3>\n
G\u00f6rsel \u00f6\u011feler, “Hakk\u0131mda” b\u00f6l\u00fcm\u00fcn\u00fcz\u00fcn esteti\u011fini ve ki\u015fili\u011fini yans\u0131t\u0131r. Do\u011fru stil, ziyaret\u00e7inin dikkatini \u00e7eker ve mesaj\u0131n\u0131z\u0131 daha etkili bir \u015fekilde iletir.<\/p>\n
Profil Foto\u011fraf\u0131 ve G\u00f6rseller \u0130\u00e7in Stil \u0130pu\u00e7lar\u0131<\/h4>\n
Profil foto\u011fraf\u0131n\u0131z, kendinizi tan\u0131tt\u0131\u011f\u0131n\u0131z ilk g\u00f6rseldir. Bu y\u00fczden dikkat \u00e7ekici ve profesyonel g\u00f6r\u00fcnmelidir.<\/p>\n
*   Duyarl\u0131 G\u00f6rseller:<\/strong> max-width: 100%; height: auto;<\/code> kullanarak g\u00f6rsellerinizin kapsay\u0131c\u0131lar\u0131na s\u0131\u011fmas\u0131n\u0131 sa\u011flay\u0131n.
\n*   Yuvarlak\/Oval Foto\u011fraflar:<\/strong> border-radius: 50%;<\/code> ile yuvarlak, border-radius: 15% \/ 30%;<\/code> gibi de\u011ferlerle oval \u015fekiller elde edebilirsiniz.
\n*   Hover Efektleri:<\/strong> transform: scale(1.05);<\/code> veya filter: grayscale(100%);<\/code> gibi efektlerle etkile\u015fim kat\u0131n.
\n*   G\u00f6lge Efektleri:<\/strong> box-shadow: 0 10px 20px rgba(0,0,0,0.2);<\/code> ile derinlik ve boyut hissi verin.<\/p>\n
.profile-img {\n    \/ ... \u00f6nceki stiller ... <\/em>\/\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.profile-img:hover {\n    transform: scale(1.03) rotate(2deg); \/ Hafif b\u00fcy\u00fct ve d\u00f6nd\u00fcr <\/em>\/\n    box-shadow: 0 15px 30px rgba(0,0,0,0.25); \/ Daha belirgin g\u00f6lge <\/em>\/\n}<\/code><\/pre>\n
Tipografi ve Metin Stilleri<\/h4>\n
Metinlerinizin okunabilirli\u011fi ve esteti\u011fi, ziyaret\u00e7inizin i\u00e7eri\u011finizi ne kadar kolay t\u00fcketti\u011fini belirler.<\/p>\n
*   Font Se\u00e7imi:<\/strong> Google Fonts gibi kaynaklardan modern ve okunabilir fontlar se\u00e7in (Roboto<\/code>, Open Sans<\/code>, Montserrat<\/code>).
\n*   Okunabilirlik:<\/strong> font-size<\/code>, line-height<\/code> (sat\u0131r y\u00fcksekli\u011fi), letter-spacing<\/code> (harf aral\u0131\u011f\u0131) ve word-spacing<\/code> (kelime aral\u0131\u011f\u0131) de\u011ferlerini optimize edin. Genellikle line-height: 1.6;<\/code> iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.
\n*   Renk ve Kontrast:<\/strong> Metin rengi ile arka plan rengi aras\u0131nda yeterli kontrast oldu\u011fundan emin olun.
\n*   Metin G\u00f6lgeleri:<\/strong> Ba\u015fl\u0131klara hafif text-shadow<\/code> efektleri ekleyerek derinlik katabilirsiniz.<\/p>\n
body {\n    font-family: 'Open Sans', sans-serif; \/ Google Fonts'tan bir font <\/em>\/\n    color: #333;\n}\n\nh2 {\n    font-family: 'Montserrat', sans-serif;\n    font-size: 2.8em;\n    color: #2c3e50;\n    text-shadow: 2px 2px 4px rgba(0,0,0,0.1); \/ Hafif metin g\u00f6lgesi <\/em>\/\n}\n\np {\n    font-size: 1.1em;\n    line-height: 1.7;\n    color: #555;\n}<\/code><\/pre>\n
Sosyal Medya Simgeleri ve \u0130leti\u015fim Butonlar\u0131<\/h4>\n
“Hakk\u0131mda” b\u00f6l\u00fcm\u00fcn\u00fczde sosyal medya ba\u011flant\u0131lar\u0131 ve ileti\u015fim butonlar\u0131 olmazsa olmazd\u0131r. Bunlar\u0131 \u00e7ekici ve etkile\u015fimli hale getirmek \u00f6nemlidir.<\/p>\n
*   \u0130kon Kullan\u0131m\u0131:<\/strong> Font Awesome veya SVG tabanl\u0131 ikon setleri kullan\u0131n. SVG’ler daha \u00f6l\u00e7eklenebilir ve \u00f6zelle\u015ftirilebilirdir.
\n*   Buton Stilleri:<\/strong> Modern, yuvarlak k\u00f6\u015feli, gradyan arka planl\u0131 veya minimalist butonlar tercih edilebilir. padding<\/code>, border-radius<\/code>, background-color<\/code>, color<\/code>, text-decoration: none;<\/code> gibi \u00f6zelliklerle stil verin.
\n*   Hover Efektleri:<\/strong> background-color<\/code> de\u011fi\u015fimi, transform: translateY(-3px);<\/code> veya box-shadow<\/code> art\u0131\u015f\u0131 gibi efektlerle kullan\u0131c\u0131ya geri bildirim sa\u011flay\u0131n.<\/p>\n
\n    <\/i><\/a>\n    <\/i><\/a>\n    <\/i><\/a>\n<\/div>\n\nBana Ula\u015f\u0131n<\/a><\/code><\/pre>\n
.social-links {\n    margin-top: 30px;\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n}\n\n.social-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    font-size: 1.8em;\n    color: #fff;\n    text-decoration: none;\n    transition: all 0.3s ease;\n}\n\n.social-icon.linkedin { background-color: #0077B5; }\n.social-icon.github { background-color: #333; }\n.social-icon.twitter { background-color: #1DA1F2; }\n\n.social-icon:hover {\n    transform: translateY(-5px) scale(1.1);\n    box-shadow: 0 8px 15px rgba(0,0,0,0.2);\n}\n\n.btn {\n    display: inline-block;\n    padding: 15px 30px;\n    background-color: #007bff;\n    color: #fff;\n    text-decoration: none;\n    border-radius: 50px;\n    font-size: 1.1em;\n    font-weight: 600;\n    transition: background-color 0.3s ease, transform 0.3s ease;\n    border: none;\n    cursor: pointer;\n    margin-top: 30px;\n}\n\n.btn:hover {\n    background-color: #0056b3;\n    transform: translateY(-3px);\n    box-shadow: 0 5px 10px rgba(0,0,0,0.2);\n}<\/code><\/pre>\n
Dinamik ve Etkile\u015fimli \u00d6zellikler<\/h3>\n
Statik bir sayfa yerine, “Hakk\u0131mda” b\u00f6l\u00fcm\u00fcn\u00fcz\u00fc dinamik ve etkile\u015fimli hale getirmek, ziyaret\u00e7ilerinizi daha uzun s\u00fcre me\u015fgul edebilir ve onlara daha zengin bir deneyim sunabilir.<\/p>\n
CSS De\u011fi\u015fkenleri (Custom Properties) ile Y\u00f6netilebilir Tasar\u0131m<\/h4>\n
CSS de\u011fi\u015fkenleri, tekrar eden de\u011ferleri (renkler, font boyutlar\u0131, bo\u015fluklar vb.) tek bir yerde tan\u0131mlaman\u0131za ve projeniz boyunca kullanman\u0131za olanak tan\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck projelerde veya tema de\u011fi\u015fiklikleri yaparken CSS’inizi \u00e7ok daha y\u00f6netilebilir hale getirir.<\/p>\n
:root {\n    --primary-color: #007bff;\n    --secondary-color: #6c757d;\n    --text-color: #333;\n    --background-light: #f8f9fa;\n    --spacing-md: 20px;\n    --border-radius-lg: 10px;\n}\n\nbody {\n    background-color: var(--background-light);\n    color: var(--text-color);\n}\n\n.btn {\n    background-color: var(--primary-color);\n    color: #fff;\n    padding: var(--spacing-md) calc(var(--spacing-md) * 1.5);\n    border-radius: var(--border-radius-lg);\n}\n\n.btn:hover {\n    background-color: darken(var(--primary-color), 10%); \/ SCSS\/LESS benzeri fonksiyon, saf CSS'te manuel ayarlan\u0131r <\/em>\/\n    \/ Veya: background-color: #0056b3; <\/em>\/\n}<\/code><\/pre>\n
Ge\u00e7i\u015fler (Transitions) ve Animasyonlar (Animations)<\/h4>\n
Ge\u00e7i\u015fler ve animasyonlar, kullan\u0131c\u0131 aray\u00fcz\u00fcne incelik ve canl\u0131l\u0131k katar. Hover efektleri, sayfa y\u00fcklenirken \u00f6\u011felerin g\u00f6r\u00fcnmesi gibi durumlarda kullan\u0131l\u0131rlar.<\/p>\n
*   transition<\/code>:<\/strong> Bir CSS \u00f6zelli\u011finin zaman i\u00e7inde bir durumdan di\u011ferine nas\u0131l de\u011fi\u015fti\u011fini kontrol eder. transition: [property] [duration] [timing-function] [delay];<\/code>
\n*   @keyframes<\/code> ve animation<\/code>:<\/strong> Daha karma\u015f\u0131k, \u00e7ok ad\u0131ml\u0131 animasyonlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\u00d6rnek: Kartlara Giri\u015f Animasyonu<\/strong>
\nBeceriler b\u00f6l\u00fcm\u00fcndeki kartlar\u0131n sayfa y\u00fcklendi\u011finde hafif\u00e7e yukar\u0131 kayarak ve opakla\u015farak g\u00f6r\u00fcnmesini sa\u011flayal\u0131m.<\/p>\n
.skill-card {\n    \/ ... \u00f6nceki stiller ... <\/em>\/\n    opacity: 0; \/ Ba\u015flang\u0131\u00e7ta g\u00f6r\u00fcnmez <\/em>\/\n    transform: translateY(20px); \/ Ba\u015flang\u0131\u00e7ta biraz a\u015fa\u011f\u0131da <\/em>\/\n    animation: fadeInSlideUp 0.8s ease-out forwards; \/ Animasyonu uygula <\/em>\/\n    \/ Her kart i\u00e7in farkl\u0131 bir gecikme ekleyebiliriz <\/em>\/\n}\n\n\/ Animasyon gecikmelerini JavaScript ile veya Nth-child ile CSS'te dinamik olarak ayarlayabiliriz <\/em>\/\n.skill-card:nth-child(1) { animation-delay: 0.1s; }\n.skill-card:nth-child(2) { animation-delay: 0.2s; }\n.skill-card:nth-child(3) { animation-delay: 0.3s; }\n.skill-card:nth-child(4) { animation-delay: 0.4s; }\n.skill-card:nth-child(5) { animation-delay: 0.5s; }\n.skill-card:nth-child(6) { animation-delay: 0.6s; }\n\n\n@keyframes fadeInSlideUp {\n    from {\n        opacity: 0;\n        transform: translateY(40px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}<\/code><\/pre>\n
S\u00f6zde S\u0131n\u0131flar (:hover<\/code>, :focus<\/code>) ve S\u00f6zde \u00d6\u011feler (::before<\/code>, ::after<\/code>)<\/h4>\n
S\u00f6zde s\u0131n\u0131flar, \u00f6\u011felerin belirli durumlar\u0131na stil uygulamam\u0131z\u0131 sa\u011flar (\u00f6rne\u011fin, fare \u00fczerine geldi\u011finde). S\u00f6zde \u00f6\u011feler ise, HTML’de fiziksel olarak var olmayan, ancak CSS arac\u0131l\u0131\u011f\u0131yla i\u00e7eri\u011fe ekleyebilece\u011fimiz dekoratif \u00f6\u011felerdir.<\/p>\n
\u00d6rnek: Ba\u015fl\u0131klara Dekoratif Alt \u00c7izgi Ekleme<\/strong>
\n::after<\/code> s\u00f6zde \u00f6\u011fesini kullanarak bir ba\u015fl\u0131\u011f\u0131n alt\u0131na modern bir alt \u00e7izgi ekleyebiliriz.<\/p>\n
h2 {\n    position: relative; \/ ::after \u00f6\u011fesini konumland\u0131rmak i\u00e7in <\/em>\/\n    padding-bottom: 10px;\n    margin-bottom: 30px;\n    display: inline-block; \/ \u00c7izginin sadece ba\u015fl\u0131k geni\u015fli\u011finde olmas\u0131n\u0131 sa\u011flar <\/em>\/\n}\n\nh2::after {\n    content: ''; \/ S\u00f6zde \u00f6\u011fe i\u00e7in i\u00e7erik gerekli <\/em>\/\n    position: absolute;\n    left: 50%; \/ Ortala <\/em>\/\n    bottom: 0;\n    transform: translateX(-50%); \/ Ortalamay\u0131 tamamla <\/em>\/\n    width: 60px; \/ \u00c7izgi geni\u015fli\u011fi <\/em>\/\n    height: 4px; \/ \u00c7izgi y\u00fcksekli\u011fi <\/em>\/\n    background-color: var(--primary-color);\n    border-radius: 2px;\n}<\/code><\/pre>\n
Duyarl\u0131 Tasar\u0131m ve En \u0130yi Uygulamalar<\/h3>\n
Web sitenizin farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil) sorunsuz g\u00f6r\u00fcnmesi g\u00fcn\u00fcm\u00fczde bir zorunluluktur. Ayr\u0131ca, iyi yaz\u0131lm\u0131\u015f ve bak\u0131m\u0131 kolay bir CSS kodu, projenizin uzun \u00f6m\u00fcrl\u00fc olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Medya Sorgular\u0131 (Media Queries) ile Tam Duyarl\u0131l\u0131k<\/h4>\n
Medya sorgular\u0131, belirli ekran boyutlar\u0131na, \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklere veya cihaz \u00f6zelliklerine g\u00f6re farkl\u0131 CSS kurallar\u0131 uygulaman\u0131za olanak tan\u0131r. “Mobil \u00f6ncelikli” (mobile-first) yakla\u015f\u0131m, en k\u00fc\u00e7\u00fck ekranlar i\u00e7in stil yazmaya ba\u015flay\u0131p, daha b\u00fcy\u00fck ekranlar i\u00e7in kademeli olarak stil eklemeyi \u00f6nerir.<\/p>\n
\/ Mobil \u00f6ncelikli yakla\u015f\u0131mla temel stiller <\/em>\/\n.about-me-flex-container {\n    flex-direction: column;\n    padding: 20px;\n    gap: 20px;\n}\n\n.skills-grid {\n    grid-template-columns: 1fr; \/ Mobil cihazlarda tek s\u00fctun <\/em>\/\n}\n\n\/ Tablet ve daha b\u00fcy\u00fck ekranlar i\u00e7in <\/em>\/\n@media screen and (min-width: 768px) {\n    .about-me-flex-container {\n        flex-direction: row;\n        padding: 50px;\n        gap: 40px;\n    }\n    .skills-grid {\n        grid-template-columns: repeat(2, 1fr); \/ Tabletlerde iki s\u00fctun <\/em>\/\n    }\n}\n\n\/ Masa\u00fcst\u00fc ve daha b\u00fcy\u00fck ekranlar i\u00e7in <\/em>\/\n@media screen and (min-width: 1024px) {\n    .skills-grid {\n        grid-template-columns: repeat(3, 1fr); \/ Masa\u00fcst\u00fcnde \u00fc\u00e7 s\u00fctun <\/em>\/\n    }\n}<\/code><\/pre>\n
Bu \u00f6rnekte, \u00f6nce mobil i\u00e7in tek s\u00fctunlu bir d\u00fczen tan\u0131mlad\u0131k, ard\u0131ndan ekran boyutu b\u00fcy\u00fcd\u00fck\u00e7e s\u00fctun say\u0131s\u0131n\u0131 art\u0131rd\u0131k. Bu, i\u00e7eri\u011fin her cihazda okunabilir ve kullan\u0131labilir kalmas\u0131n\u0131 sa\u011flar.<\/p>\n
Eri\u015filebilirlik ve Performans \u0130pu\u00e7lar\u0131<\/h4>\n
*   Eri\u015filebilirlik:<\/strong>
\n    *   Renk Kontrast\u0131:<\/strong> Metin ve arka plan renklerinizin yeterli kontrast oran\u0131na sahip oldu\u011fundan emin olun (WCAG standartlar\u0131).
\n    *   Odaklanma Durumlar\u0131 (:focus<\/code>):<\/strong> Klavye navigasyonu kullananlar i\u00e7in interaktif \u00f6\u011felerin (linkler, butonlar) belirgin bir odaklanma stiline sahip olmas\u0131 \u00f6nemlidir.
\n    *   Anlamsal HTML:<\/strong> Do\u011fru HTML etiketlerini (<\/p>\n
<\/code>, <\/p>\n
<\/code>, <\/p>\n
<\/code>, <\/p>\n
<\/code>, <\/p>\n