{"id":33161,"date":"2025-10-30T11:41:09","date_gmt":"2025-10-30T08:41:09","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33161"},"modified":"2025-10-30T11:41:09","modified_gmt":"2025-10-30T08:41:09","slug":"web-sitenizde-css-kullanarak-one-cikan-alinti-kutusu-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/web-sitenizde-css-kullanarak-one-cikan-alinti-kutusu-nasil-olusturulur\/","title":{"rendered":"Web Sitenizde CSS Kullanarak \u00d6ne \u00c7\u0131kan Al\u0131nt\u0131 Kutusu Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"

<\/p>\n

Web Sitenizde CSS Kullanarak \u00d6ne \u00c7\u0131kan Al\u0131nt\u0131 Kutusu Nas\u0131l Olu\u015fturulur?<\/h2>\n
\u00d6ne \u00e7\u0131kan al\u0131nt\u0131lar, web sitenizdeki i\u00e7eri\u011fi zenginle\u015ftirmenin, \u00f6nemli bilgileri vurgulaman\u0131n ve ziyaret\u00e7ilerin dikkatini \u00e7ekmenin etkili bir yoludur. Bir blog yaz\u0131s\u0131nda, \u00fcr\u00fcn a\u00e7\u0131klamas\u0131nda veya bir a\u00e7\u0131l\u0131\u015f sayfas\u0131nda olsun, iyi tasarlanm\u0131\u015f bir al\u0131nt\u0131 kutusu, metnin okunabilirli\u011fini art\u0131r\u0131r ve sayfan\u0131za g\u00f6rsel bir \u00e7ekicilik katar. Bu teknik makalede, CSS’in g\u00fcc\u00fcn\u00fc kullanarak web sitenizde estetik ve i\u015flevsel \u00f6ne \u00e7\u0131kan al\u0131nt\u0131 kutular\u0131 olu\u015fturman\u0131n ad\u0131m ad\u0131m s\u00fcrecini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. HTML yap\u0131s\u0131ndan ba\u015flayarak, temel stil vermeye, geli\u015fmi\u015f tasar\u0131m tekniklerine ve eri\u015filebilirlik ipu\u00e7lar\u0131na kadar her y\u00f6n\u00fcyle bu konuyu ele alaca\u011f\u0131z.<\/p>\n

Giri\u015f: Al\u0131nt\u0131 Kutular\u0131n\u0131n \u00d6nemi<\/h3>\n
Dijital i\u00e7erik t\u00fcketimi h\u0131zla artarken, kullan\u0131c\u0131lar\u0131n dikkatini \u00e7ekmek ve onlar\u0131 sayfada tutmak giderek zorla\u015f\u0131yor. Uzun metin bloklar\u0131 genellikle okuyucuyu bunaltabilir ve \u00f6nemli bilgilerin g\u00f6zden ka\u00e7mas\u0131na neden olabilir. \u0130\u015fte tam bu noktada \u00f6ne \u00e7\u0131kan al\u0131nt\u0131 kutular\u0131 devreye girer. Bu kutular, belirli bir metin par\u00e7as\u0131n\u0131, bir ki\u015finin s\u00f6z\u00fcn\u00fc veya \u00f6nemli bir istatisti\u011fi ana i\u00e7erikten ay\u0131rarak g\u00f6rsel olarak belirgin hale getirir. Bu sadece estetik bir dokunu\u015f olmakla kalmaz, ayn\u0131 zamanda i\u00e7eri\u011finizi daha taranabilir ve sindirilebilir k\u0131lar.<\/p>\n
Bu makalenin amac\u0131, web geli\u015ftiricilerine ve tasar\u0131mc\u0131lara, sadece g\u00f6rsel olarak \u00e7ekici de\u011fil, ayn\u0131 zamanda semantik olarak do\u011fru ve eri\u015filebilir al\u0131nt\u0131 kutular\u0131 olu\u015fturmak i\u00e7in gerekli bilgi ve ara\u00e7lar\u0131 sa\u011flamakt\u0131r. CSS’in esnekli\u011finden faydalanarak, farkl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131n\u0131 ke\u015ffedecek ve kendi web sitenizin esteti\u011fine uygun, benzersiz al\u0131nt\u0131 kutular\u0131 yaratma becerisi kazanacaks\u0131n\u0131z.<\/p>\n

Neden \u00d6ne \u00c7\u0131kan Al\u0131nt\u0131lar Kullanmal\u0131y\u0131z?<\/h3>\n
\u00d6ne \u00e7\u0131kan al\u0131nt\u0131lar, web tasar\u0131m\u0131nda sadece bir s\u00fcsleme olmaktan \u00f6teye ge\u00e7er; kullan\u0131c\u0131 deneyimini ve i\u00e7eri\u011fin etkinli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirler. \u0130\u015fte ba\u015fl\u0131ca nedenleri:<\/p>\n

Okunabilirli\u011fi Art\u0131rma<\/h4>\n
Uzun paragraflar, okuyucunun g\u00f6z\u00fcn\u00fc yorabilir. Al\u0131nt\u0131 kutular\u0131, metni b\u00f6lerek ve \u00f6nemli noktalar\u0131 vurgulayarak i\u00e7eri\u011fin daha kolay okunmas\u0131n\u0131 ve taranmas\u0131n\u0131 sa\u011flar. Bu, \u00f6zellikle makaleler, raporlar veya \u00f6\u011fretici i\u00e7erikler gibi yo\u011fun metin i\u00e7eren sayfalarda kritik \u00f6neme sahiptir.<\/p>\n

Vurgu ve Dikkat \u00c7ekme<\/h4>\n
Bir al\u0131nt\u0131 kutusu, sayfan\u0131n geri kalan\u0131ndan farkl\u0131 bir stil (farkl\u0131 bir arka plan rengi, kenarl\u0131k veya yaz\u0131 tipi) ile tasarland\u0131\u011f\u0131nda, do\u011fal olarak okuyucunun dikkatini \u00e7eker. Bu, yazar\u0131n belirli bir mesaj\u0131 veya fikri \u00f6ne \u00e7\u0131karmak istedi\u011fi durumlarda \u00e7ok etkilidir.<\/p>\n

G\u00f6rsel \u00c7ekicilik ve Estetik<\/h4>\n
Web sitenize g\u00f6rsel \u00e7e\u015fitlilik katman\u0131n harika bir yoludur. D\u00fcz metin sayfalar\u0131 s\u0131k\u0131c\u0131 g\u00f6r\u00fcnebilirken, iyi tasarlanm\u0131\u015f al\u0131nt\u0131 kutular\u0131 sayfan\u0131za dinamizm ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131r\u0131r. Bu, genel kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve markan\u0131z\u0131n profesyonel imaj\u0131n\u0131 destekler.<\/p>\n

G\u00fcvenilirlik ve Kaynak G\u00f6sterme<\/h4>\n
\u00d6zellikle bilgilendirici veya ikna edici i\u00e7eriklerde, al\u0131nt\u0131 kutular\u0131 bir uzman\u0131n g\u00f6r\u00fc\u015f\u00fcn\u00fc veya bir kayna\u011f\u0131n verisini sunmak i\u00e7in kullan\u0131labilir. Bu, i\u00e7eri\u011finizin g\u00fcvenilirli\u011fini art\u0131r\u0131r ve iddialar\u0131n\u0131z\u0131 destekler. Yazar\u0131n ad\u0131n\u0131 ve kayna\u011f\u0131n\u0131 belirtmek, \u015feffafl\u0131\u011f\u0131 te\u015fvik eder.<\/p>\n

Temel HTML Yap\u0131s\u0131<\/h3>\n

\u00d6ne \u00e7\u0131kan bir al\u0131nt\u0131 kutusu olu\u015fturman\u0131n ilk ad\u0131m\u0131, semantik olarak do\u011fru bir HTML yap\u0131s\u0131 kurmakt\u0131r. HTML5, bu t\u00fcr i\u00e7erikler i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f etiketler sunar. En uygun etiketler <\/p>\n

<\/code>, <\/p>\n<\/code> ve 
<\/code>‘d\u0131r.<\/p>\n<\/p>\n<\/code> ve <\/p>\n<\/code> Etiketlerinin Kullan\u0131m\u0131<\/h4>\n
*   <\/p>\n
<\/code>:<\/strong> Ba\u011f\u0131ms\u0131z i\u00e7erik par\u00e7alar\u0131n\u0131 temsil eder. Bu, bir resim, kod blo\u011fu, tablo veya bizim durumumuzda bir al\u0131nt\u0131 olabilir. <\/p>\n<\/code> etiketi, ana ak\u0131\u015ftan ba\u011f\u0131ms\u0131z olarak ta\u015f\u0131nabilen veya kald\u0131r\u0131labilen ancak ana belgeyle ilgili olan i\u00e7eri\u011fi gruplamak i\u00e7in kullan\u0131l\u0131r.
\n*   <\/p>\n<\/code>:<\/strong> Bir ba\u015fka kaynaktan al\u0131nt\u0131 yap\u0131lan metin bloklar\u0131n\u0131 belirtmek i\u00e7in kullan\u0131l\u0131r. Taray\u0131c\u0131lar genellikle bu etiketi girintili olarak g\u00f6r\u00fcnt\u00fcler, ancak biz bunu CSS ile tamamen kontrol edece\u011fiz.
\n*   
<\/code>:<\/strong> Bir <\/p>\n<\/code> eleman\u0131 i\u00e7in ba\u015fl\u0131k veya a\u00e7\u0131klama sa\u011flar. Al\u0131nt\u0131n\u0131n yazar\u0131n\u0131 veya kayna\u011f\u0131n\u0131 belirtmek i\u00e7in idealdir.<\/p>\n\u0130\u015fte temel bir HTML yap\u0131s\u0131 \u00f6rne\u011fi:<\/p>\n
\n    \n        Geli\u015fmek, de\u011fi\u015fmek demektir; m\u00fckemmel olmak ise s\u0131k s\u0131k de\u011fi\u015fmek demektir.<\/p>\n    <\/blockquote>\n    
\n        \u2014 Winston Churchill\n    <\/figcaption>\n<\/figure><\/code><\/pre>\nBu yap\u0131, al\u0131nt\u0131n\u0131n kendisini (p etiketi i\u00e7inde), al\u0131nt\u0131n\u0131n yazar\u0131n\u0131 ve t\u00fcm bu yap\u0131y\u0131 bir b\u00fct\u00fcn olarak gruplayan bir <\/p>\n
<\/code> eleman\u0131n\u0131 i\u00e7erir. featured-quote<\/code> s\u0131n\u0131f\u0131n\u0131, al\u0131nt\u0131 kutumuzu daha sonra CSS ile stilize etmek i\u00e7in kullanaca\u011f\u0131z.<\/p>\n<\/code> Etiketinin Kullan\u0131m\u0131<\/h4>\nAl\u0131nt\u0131n\u0131n kayna\u011f\u0131n\u0131 (kitap ad\u0131, web sitesi, makale vb.) belirtmek isterseniz, 
<\/code> i\u00e7inde <\/code> etiketini kullanabilirsiniz. <\/code> etiketi, bir eserin ba\u015fl\u0131\u011f\u0131n\u0131 (\u00f6rne\u011fin bir kitap, makale, \u015fark\u0131, film) belirtmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n    \n        Geli\u015fmek, de\u011fi\u015fmek demektir; m\u00fckemmel olmak ise s\u0131k s\u0131k de\u011fi\u015fmek demektir.<\/p>\n    <\/blockquote>\n    
\n        \u2014 Winston Churchill, Konu\u015fmalar\u0131ndan<\/cite>\n    <\/figcaption>\n<\/figure><\/code><\/pre>\nBu semantik yap\u0131, hem arama motorlar\u0131 hem de ekran okuyucular\u0131 gibi yard\u0131mc\u0131 teknolojiler i\u00e7in i\u00e7eri\u011finizin anlam\u0131n\u0131 daha net hale getirir.<\/p>\n
CSS ile Temel Stil Verme<\/h3>\nHTML yap\u0131s\u0131n\u0131 olu\u015fturduktan sonra s\u0131ra, al\u0131nt\u0131 kutumuza g\u00f6rsel bir kimlik kazand\u0131rmaya gelir. CSS, bu konuda bize s\u0131n\u0131rs\u0131z olanaklar sunar.<\/p>\n
Kutuya Genel G\u00f6r\u00fcn\u00fcm Kazand\u0131rma<\/h4>\n\u0130lk olarak, .featured-quote<\/code> s\u0131n\u0131f\u0131na sahip <\/p>\n
<\/code> eleman\u0131na genel bir g\u00f6r\u00fcn\u00fcm kazand\u0131ral\u0131m. Bu, kenarl\u0131klar, i\u00e7 ve d\u0131\u015f bo\u015fluklar, arka plan rengi gibi temel \u00f6zellikleri i\u00e7erir.<\/p>\n.featured-quote {\n    background-color: #f9f9f9; \/ Hafif gri arka plan <\/em>\/\n    border-left: 5px solid #007bff; \/ Sol tarafta mavi bir kenarl\u0131k <\/em>\/\n    padding: 20px; \/ \u0130\u00e7 bo\u015fluk <\/em>\/\n    margin: 30px 0; \/ \u00dcst ve altta d\u0131\u015f bo\u015fluk <\/em>\/\n    border-radius: 5px; \/ K\u00f6\u015feleri hafif\u00e7e yuvarla <\/em>\/\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); \/ Hafif bir g\u00f6lge <\/em>\/\n}<\/code><\/pre>\n*   background-color<\/code>: Al\u0131nt\u0131 kutusunun arka plan rengini belirler. Genellikle ana i\u00e7eri\u011fin arka plan\u0131ndan biraz farkl\u0131 bir renk se\u00e7ilir.
\n*   border-left<\/code>: Al\u0131nt\u0131 kutusuna dikkat \u00e7ekici bir g\u00f6rsel \u00f6\u011fe eklemek i\u00e7in sol tarafa renkli bir kenarl\u0131k ekleriz. Bu, al\u0131nt\u0131 kutular\u0131n\u0131n yayg\u0131n bir tasar\u0131m \u00f6zelli\u011fidir.
\n*   padding<\/code>: \u0130\u00e7erik ile kutunun kenarlar\u0131 aras\u0131ndaki bo\u015flu\u011fu ayarlar. Bu, metnin kutuya yap\u0131\u015fmas\u0131n\u0131 engeller ve okunabilirli\u011fi art\u0131r\u0131r.
\n*   margin<\/code>: Kutu ile di\u011fer sayfa \u00f6\u011feleri aras\u0131ndaki d\u0131\u015f bo\u015flu\u011fu ayarlar.
\n*   border-radius<\/code>: Kutunun k\u00f6\u015felerini yumu\u015fatarak daha modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131r\u0131r.
\n*   box-shadow<\/code>: Hafif bir g\u00f6lge efekti ekleyerek kutuya derinlik kazand\u0131r\u0131r ve sayfa \u00fczerinde biraz y\u00fckselmi\u015f gibi g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
Metin Stilizasyonu<\/h4>\n\u015eimdi de al\u0131nt\u0131n\u0131n kendisi ve yazar bilgisi i\u00e7in metin stilini ayarlayal\u0131m.<\/p>\n
.featured-quote blockquote {\n    margin: 0; \/ Varsay\u0131lan blockquote marginini s\u0131f\u0131rla <\/em>\/\n    font-size: 1.2em; \/ Yaz\u0131 tipi boyutunu b\u00fcy\u00fct <\/em>\/\n    line-height: 1.6; \/ Sat\u0131r y\u00fcksekli\u011fini art\u0131r <\/em>\/\n    color: #333; \/ Koyu gri metin rengi <\/em>\/\n    font-family: 'Georgia', serif; \/ Klasik bir yaz\u0131 tipi <\/em>\/\n    font-style: italic; \/ Metni italik yap <\/em>\/\n}\n\n.featured-quote blockquote p {\n    margin: 0; \/ p etiketi i\u00e7in varsay\u0131lan marginleri kald\u0131r <\/em>\/\n}\n\n.featured-quote figcaption {\n    text-align: right; \/ Yazar bilgisini sa\u011fa hizala <\/em>\/\n    margin-top: 15px; \/ Al\u0131nt\u0131dan sonra bo\u015fluk b\u0131rak <\/em>\/\n    font-size: 0.9em; \/ Yaz\u0131 tipi boyutunu k\u00fc\u00e7\u00fclt <\/em>\/\n    color: #666; \/ Daha a\u00e7\u0131k gri metin rengi <\/em>\/\n    font-family: 'Helvetica Neue', sans-serif; \/ Farkl\u0131 bir yaz\u0131 tipi <\/em>\/\n}\n\n.featured-quote figcaption cite {\n    font-style: normal; \/ Cite etiketinin varsay\u0131lan italik stilini kald\u0131r <\/em>\/\n}<\/code><\/pre>\n*   blockquote<\/code> i\u00e7in: margin: 0<\/code> ile taray\u0131c\u0131n\u0131n varsay\u0131lan girintisini s\u0131f\u0131rl\u0131yoruz. font-size<\/code>, line-height<\/code>, color<\/code> ve font-family<\/code> ile al\u0131nt\u0131 metnine \u00f6zg\u00fc bir stil veriyoruz. font-style: italic<\/code> genellikle al\u0131nt\u0131lar i\u00e7in tercih edilen bir stildir.
\n*   p<\/code> etiketi i\u00e7in: blockquote<\/code> i\u00e7indeki p<\/code> etiketinin varsay\u0131lan \u00fcst ve alt bo\u015fluklar\u0131n\u0131 kald\u0131rarak daha s\u0131k\u0131 bir g\u00f6r\u00fcn\u00fcm sa\u011fl\u0131yoruz.
\n*   figcaption<\/code> i\u00e7in: text-align: right<\/code> ile yazar bilgisini sa\u011fa hizal\u0131yoruz. margin-top<\/code> ile al\u0131nt\u0131 metni ile aras\u0131nda bo\u015fluk b\u0131rak\u0131yoruz. font-size<\/code> ve color<\/code> ile al\u0131nt\u0131 metninden farkl\u0131, daha az bask\u0131n bir stil veriyoruz.
\n*   cite<\/code> etiketi i\u00e7in: Taray\u0131c\u0131lar genellikle <\/code> etiketini italik olarak g\u00f6r\u00fcnt\u00fcler. E\u011fer 
<\/code> i\u00e7inde zaten italik bir stil kullan\u0131yorsak veya yazar\u0131n ad\u0131n\u0131 italik yapmak istemiyorsak, font-style: normal<\/code> ile bu varsay\u0131lan stili ge\u00e7ersiz k\u0131labiliriz.<\/p>\nBu temel stillerle bile, al\u0131nt\u0131 kutunuz web sitenizde olduk\u00e7a profesyonel ve \u00e7ekici g\u00f6r\u00fcnecektir.<\/p>\n
Al\u0131nt\u0131 \u0130\u015faretleri Ekleme<\/h3>\nAl\u0131nt\u0131 kutular\u0131na g\u00f6rsel olarak zenginlik katman\u0131n ve bir al\u0131nt\u0131 oldu\u011funu daha net belirtmenin etkili yollar\u0131ndan biri, b\u00fcy\u00fck ve stilize edilmi\u015f al\u0131nt\u0131 i\u015faretleri eklemektir. Bunu CSS ::before<\/code> ve ::after<\/code> s\u00f6zde elemanlar\u0131 ile kolayca yapabiliriz.<\/p>\n
.featured-quote blockquote {\n    position: relative; \/ S\u00f6zde elemanlar\u0131n konumland\u0131r\u0131lmas\u0131 i\u00e7in <\/em>\/\n    padding-left: 40px; \/ Al\u0131nt\u0131 i\u015faretine yer a\u00e7mak i\u00e7in <\/em>\/\n}\n\n.featured-quote blockquote::before {\n    content: '\u201c'; \/ Sol al\u0131nt\u0131 i\u015fareti <\/em>\/\n    font-family: 'Georgia', serif;\n    font-size: 4em; \/ B\u00fcy\u00fck yaz\u0131 tipi boyutu <\/em>\/\n    color: #ccc; \/ A\u00e7\u0131k gri renk <\/em>\/\n    position: absolute; \/ Mutlak konumland\u0131rma <\/em>\/\n    left: 0; \/ Kutunun soluna yasla <\/em>\/\n    top: -10px; \/ Biraz yukar\u0131 kayd\u0131r <\/em>\/\n    line-height: 1; \/ Sat\u0131r y\u00fcksekli\u011fini ayarla <\/em>\/\n}\n\n\/ Sa\u011f al\u0131nt\u0131 i\u015fareti (iste\u011fe ba\u011fl\u0131, genellikle son al\u0131nt\u0131 i\u015fareti i\u00e7in kullan\u0131l\u0131r) <\/em>\/\n.featured-quote blockquote::after {\n    content: '\u201d'; \/ Sa\u011f al\u0131nt\u0131 i\u015fareti <\/em>\/\n    font-family: 'Georgia', serif;\n    font-size: 4em;\n    color: #ccc;\n    position: absolute;\n    right: 0;\n    bottom: -20px;\n    line-height: 1;\n    opacity: 0.5; \/ Daha \u015feffaf <\/em>\/\n    transform: rotate(180deg); \/ Ters \u00e7evir <\/em>\/\n    display: none; \/ \u015eimdilik gizli tutal\u0131m, daha \u00e7ok soldaki kullan\u0131l\u0131r <\/em>\/\n}<\/code><\/pre>\n*   blockquote<\/code> i\u00e7in position: relative<\/code>: ::before<\/code> ve ::after<\/code> elemanlar\u0131n\u0131 bu blockquote<\/code> eleman\u0131na g\u00f6re konumland\u0131rmak i\u00e7in gereklidir.
\n*   padding-left<\/code>: Sol al\u0131nt\u0131 i\u015faretine yer a\u00e7mak i\u00e7in al\u0131nt\u0131 metnini sa\u011fa do\u011fru kayd\u0131r\u0131r\u0131z.
\n*   content<\/code>: ::before<\/code> ve ::after<\/code> s\u00f6zde elemanlar\u0131n\u0131n i\u00e7eri\u011fini belirler. Burada Unicode al\u0131nt\u0131 i\u015faretleri kullan\u0131yoruz (\u201c<\/code> ve \u201d<\/code>). Alternatif olarak, SVG resimlerini veya arka plan resimlerini de kullanabilirsiniz.
\n*   font-size<\/code>: Al\u0131nt\u0131 i\u015faretlerinin boyutunu ayarlar. Genellikle metinden \u00e7ok daha b\u00fcy\u00fck olurlar.
\n*   color<\/code>: Al\u0131nt\u0131 i\u015faretlerinin rengini belirler. Genellikle metinden daha a\u00e7\u0131k veya daha koyu bir ton se\u00e7ilir.
\n*   position: absolute<\/code>: Al\u0131nt\u0131 i\u015faretlerini blockquote<\/code> eleman\u0131na g\u00f6re serbest\u00e7e konumland\u0131rmam\u0131z\u0131 sa\u011flar.
\n*   left<\/code>, top<\/code>, right<\/code>, bottom<\/code>: \u0130\u015faretlerin tam konumunu ayarlar.
\n*   line-height<\/code>: \u0130\u015faretlerin kendi sat\u0131r y\u00fcksekli\u011fini kontrol eder, bu da dikey hizalamay\u0131 etkiler.<\/p>\n
Bu \u015fekilde, al\u0131nt\u0131 kutunuza hem g\u00f6rsel bir vurgu eklemi\u015f hem de amac\u0131n\u0131 daha net bir \u015fekilde belirtmi\u015f olursunuz.<\/p>\n
Yazar Bilgisi ve Kaynak G\u00f6sterme<\/h3>\nAl\u0131nt\u0131 kutusunun etkisini art\u0131ran \u00f6nemli bir unsur, al\u0131nt\u0131n\u0131n sahibini ve kayna\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtmektir. Bu, g\u00fcvenilirlik katar ve okuyuculara daha fazla bilgi edinme imkan\u0131 sunar.<\/p>\n
Yazar Foto\u011fraf\u0131 Ekleme (\u0130ste\u011fe Ba\u011fl\u0131)<\/h4>\nE\u011fer al\u0131nt\u0131 bir ki\u015fiden geliyorsa, yazar\u0131n k\u00fc\u00e7\u00fck bir foto\u011fraf\u0131n\u0131 eklemek kutuyu daha ki\u015fisel ve \u00e7ekici hale getirebilir. HTML yap\u0131m\u0131z\u0131 buna g\u00f6re g\u00fcncelleyebiliriz:<\/p>\n
\n    \n        Geli\u015fmek, de\u011fi\u015fmek demektir; m\u00fckemmel olmak ise s\u0131k s\u0131k de\u011fi\u015fmek demektir.<\/p>\n    <\/blockquote>\n    
\n        \n        \u2014 Winston Churchill, Konu\u015fmalar\u0131ndan<\/cite>\n    <\/figcaption>\n<\/figure><\/code><\/pre>\nVe CSS stilleri:<\/p>\n
.featured-quote.author-quote figcaption {\n    display: flex; \/ \u0130\u00e7eri\u011fi esnek kutu olarak hizala <\/em>\/\n    align-items: center; \/ Dikeyde ortala <\/em>\/\n    justify-content: flex-end; \/ \u0130\u00e7eri\u011fi sa\u011fa hizala <\/em>\/\n    gap: 10px; \/ \u00d6\u011feler aras\u0131nda bo\u015fluk b\u0131rak <\/em>\/\n}\n\n.featured-quote.author-quote .author-avatar {\n    width: 40px; \/ Foto\u011fraf geni\u015fli\u011fi <\/em>\/\n    height: 40px; \/ Foto\u011fraf y\u00fcksekli\u011fi <\/em>\/\n    border-radius: 50%; \/ Yuvarlak foto\u011fraf <\/em>\/\n    object-fit: cover; \/ Foto\u011fraf\u0131 kutuya s\u0131\u011fd\u0131r <\/em>\/\n    border: 2px solid #007bff; \/ Mavi kenarl\u0131k <\/em>\/\n}<\/code><\/pre>\n*   figcaption<\/code> i\u00e7in display: flex<\/code>, align-items: center<\/code>, justify-content: flex-end<\/code> ve gap<\/code>: Yazar foto\u011fraf\u0131 ve metin bilgisini ayn\u0131 sat\u0131rda, sa\u011fa hizal\u0131 ve aralar\u0131nda bo\u015fluk olacak \u015fekilde d\u00fczenlemek i\u00e7in Flexbox kullan\u0131yoruz.
\n*   author-avatar<\/code> i\u00e7in: width<\/code> ve height<\/code> ile boyutunu belirliyoruz. border-radius: 50%<\/code> ile yuvarlak bir avatar g\u00f6r\u00fcn\u00fcm\u00fc veriyoruz. object-fit: cover<\/code> ile resmin oranlar\u0131n\u0131 bozmadan kutuyu doldurmas\u0131n\u0131 sa\u011fl\u0131yoruz.<\/p>\n
Bu, al\u0131nt\u0131ya g\u00f6rsel bir kimlik ve daha fazla ba\u011flam kazand\u0131r\u0131r.<\/p>\n
Geli\u015fmi\u015f Stil Teknikleri<\/h3>\nTemel bir al\u0131nt\u0131 kutusu olu\u015fturduktan sonra, CSS’in daha geli\u015fmi\u015f \u00f6zelliklerini kullanarak tasar\u0131m\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yabilirsiniz.<\/p>\n
Farkl\u0131 Tasar\u0131m Yakla\u015f\u0131mlar\u0131<\/h4>\nAl\u0131nt\u0131 kutular\u0131 tek bir tasar\u0131mla s\u0131n\u0131rl\u0131 de\u011fildir. Web sitenizin genel esteti\u011fine uyacak \u015fekilde farkl\u0131 yakla\u015f\u0131mlar deneyebilirsiniz.<\/p>\n
Kart Stili Al\u0131nt\u0131 Kutusu<\/h5>\nDaha belirgin bir g\u00f6lge ve daha yuvarlak k\u00f6\u015felerle bir “kart” g\u00f6r\u00fcn\u00fcm\u00fc elde edebilirsiniz.<\/p>\n
.featured-quote.card-style {\n    background-color: #fff;\n    border-left: none; \/ Sol kenarl\u0131\u011f\u0131 kald\u0131r <\/em>\/\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); \/ Daha belirgin g\u00f6lge <\/em>\/\n    border-radius: 10px;\n    padding: 25px;\n}\n\n.featured-quote.card-style blockquote::before {\n    color: #e0e0e0; \/ Daha a\u00e7\u0131k al\u0131nt\u0131 i\u015fareti <\/em>\/\n    font-size: 5em;\n    top: -20px;\n    left: 10px;\n}<\/code><\/pre>\nMinimalist Al\u0131nt\u0131 Kutusu<\/h5>\nDaha az g\u00f6rsel g\u00fcr\u00fclt\u00fc ile sadece metne odaklanan bir stil.<\/p>\n
.featured-quote.minimalist {\n    background-color: transparent; \/ Arka plan yok <\/em>\/\n    border: none; \/ Kenarl\u0131k yok <\/em>\/\n    box-shadow: none; \/ G\u00f6lge yok <\/em>\/\n    padding: 0;\n    margin: 40px 0;\n    border-left: 3px solid #ccc; \/ Sadece ince bir sol \u00e7izgi <\/em>\/\n    padding-left: 20px;\n}\n\n.featured-quote.minimalist blockquote {\n    font-size: 1.3em;\n    color: #555;\n    font-style: normal; \/ \u0130talik de\u011fil <\/em>\/\n}\n\n.featured-quote.minimalist blockquote::before {\n    content: ''; \/ Al\u0131nt\u0131 i\u015faretini kald\u0131r <\/em>\/\n}\n\n.featured-quote.minimalist figcaption {\n    font-size: 1em;\n    color: #888;\n    text-align: left; \/ Sola hizala <\/em>\/\n    margin-top: 10px;\n}<\/code><\/pre>\nResponsive Tasar\u0131m<\/h4>\nWeb sitenizin farkl\u0131 cihazlarda iyi g\u00f6r\u00fcnmesi i\u00e7in al\u0131nt\u0131 kutular\u0131n\u0131n da duyarl\u0131 olmas\u0131 gerekir. media queries<\/code> kullanarak ekran boyutuna g\u00f6re stil ayarlamalar\u0131 yapabiliriz.<\/p>\n
\/ K\u00fc\u00e7\u00fck ekranlar i\u00e7in (\u00f6rne\u011fin mobil cihazlar) <\/em>\/\n@media (max-width: 768px) {\n    .featured-quote {\n        margin: 20px 10px; \/ Daha az yatay bo\u015fluk <\/em>\/\n        padding: 15px; \/ Daha az i\u00e7 bo\u015fluk <\/em>\/\n    }\n\n    .featured-quote blockquote {\n        font-size: 1.1em; \/ Yaz\u0131 tipini k\u00fc\u00e7\u00fclt <\/em>\/\n        padding-left: 30px;\n    }\n\n    .featured-quote blockquote::before {\n        font-size: 3em; \/ Al\u0131nt\u0131 i\u015fareti boyutunu k\u00fc\u00e7\u00fclt <\/em>\/\n        top: -5px;\n        left: -5px;\n    }\n\n    .featured-quote figcaption {\n        font-size: 0.85em;\n        text-align: center; \/ K\u00fc\u00e7\u00fck ekranlarda ortalayabiliriz <\/em>\/\n        display: block; \/ Flexbox'\u0131 kald\u0131r, alt alta gelsin <\/em>\/\n        margin-top: 10px;\n    }\n\n    .featured-quote.author-quote figcaption {\n        flex-direction: column; \/ Foto\u011fraf ve metni alt alta getir <\/em>\/\n        align-items: center;\n        justify-content: center;\n    }\n\n    .featured-quote.author-quote .author-avatar {\n        margin-bottom: 5px; \/ Foto\u011fraf alt\u0131nda bo\u015fluk <\/em>\/\n    }\n}<\/code><\/pre>\nBu \u00f6rnek, ekran geni\u015fli\u011fi 768 pikselin alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde al\u0131nt\u0131 kutusunun kenar bo\u015fluklar\u0131n\u0131, i\u00e7 bo\u015fluklar\u0131n\u0131 ve yaz\u0131 tipi boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcr. Ayr\u0131ca yazar bilgisini ortalar ve foto\u011fraf ile metni alt alta getirir.<\/p>\n
Etkile\u015fimli Efektler (Hover)<\/h4>\nKullan\u0131c\u0131 bir al\u0131nt\u0131 kutusunun \u00fczerine geldi\u011finde hafif bir etkile\u015fim eklemek, kullan\u0131c\u0131 deneyimini zenginle\u015ftirebilir.<\/p>\n
.featured-quote {\n    transition: transform 0.3s ease, box-shadow 0.3s ease; \/ Yumu\u015fak ge\u00e7i\u015f efekti <\/em>\/\n}\n\n.featured-quote:hover {\n    transform: translateY(-5px); \/ Hafif\u00e7e yukar\u0131 kayd\u0131r <\/em>\/\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); \/ G\u00f6lgeyi belirginle\u015ftir <\/em>\/\n}<\/code><\/pre>\n*   transition<\/code>: transform<\/code> ve box-shadow<\/code> \u00f6zelliklerinin de\u011fi\u015fimini 0.3 saniye i\u00e7inde yumu\u015fak bir \u015fekilde yapmas\u0131n\u0131 sa\u011flar.
\n*   :hover<\/code>: Kullan\u0131c\u0131 fareyi kutunun \u00fczerine getirdi\u011finde uygulanacak stilleri tan\u0131mlar.
\n*   transform: translateY(-5px)<\/code>: Kutuyu dikeyde 5 piksel yukar\u0131 kayd\u0131r\u0131r.
\n*   box-shadow<\/code>: G\u00f6lgeyi daha belirgin hale getirerek kutunun “y\u00fckseldi\u011fi” hissini verir.<\/p>\n
Eri\u015filebilirlik (Accessibility)<\/h3>\nWeb sitenizi herkesin kullanabilmesini sa\u011flamak, modern web geli\u015ftirmenin temel bir prensibidir. Al\u0131nt\u0131 kutular\u0131 i\u00e7in eri\u015filebilirli\u011fi sa\u011flamak, semantik HTML kullan\u0131m\u0131 ve do\u011fru renk kontrast\u0131 gibi unsurlar\u0131 i\u00e7erir.<\/p>\n
Semantik HTML Kullan\u0131m\u0131<\/h4>\nDaha \u00f6nce de belirtti\u011fimiz gibi, <\/p>\n
<\/code>, <\/p>\n<\/code> ve 
<\/code> gibi semantik etiketlerin do\u011fru kullan\u0131m\u0131, ekran okuyucular\u0131 gibi yard\u0131mc\u0131 teknolojilerin i\u00e7eri\u011finizin yap\u0131s\u0131n\u0131 ve amac\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur. Bu etiketler, al\u0131nt\u0131n\u0131n bir al\u0131nt\u0131 oldu\u011funu, yazar\u0131n\u0131n kim oldu\u011funu ve bir b\u00fct\u00fcn olarak ba\u011f\u0131ms\u0131z bir i\u00e7erik par\u00e7as\u0131 oldu\u011funu belirtir.<\/p>\nRenk Kontrast\u0131<\/h4>\nMetin rengi ile arka plan rengi aras\u0131ndaki kontrast\u0131n yeterli olmas\u0131, \u00f6zellikle g\u00f6rme bozuklu\u011fu olan kullan\u0131c\u0131lar i\u00e7in kritik \u00f6neme sahiptir. WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) 2.1 standard\u0131na g\u00f6re, normal metin i\u00e7in en az 4.5:1, b\u00fcy\u00fck metin i\u00e7in ise 3:1 kontrast oran\u0131 \u00f6nerilir.<\/p>\n
Al\u0131nt\u0131 kutunuzu tasarlarken, se\u00e7ti\u011finiz color<\/code> ve background-color<\/code> de\u011ferlerinin bu standartlar\u0131 kar\u015f\u0131lad\u0131\u011f\u0131ndan emin olmak i\u00e7in online kontrast denetleyicileri kullan\u0131n. \u00d6rne\u011fin, #333<\/code> metin rengi ve #f9f9f9<\/code> arka plan rengi iyi bir kontrast sa\u011flar.<\/p>\n
Klavye Navigasyonu ve Odak Durumlar\u0131<\/h4>\nE\u011fer al\u0131nt\u0131 kutunuz etkile\u015fimli \u00f6\u011feler (\u00f6rne\u011fin bir “tweetle” butonu) i\u00e7eriyorsa, bu \u00f6\u011felerin klavye ile eri\u015filebilir oldu\u011fundan emin olun. tabindex<\/code> \u00f6zniteli\u011fi ve :focus<\/code> s\u00f6zde s\u0131n\u0131f\u0131, klavye kullan\u0131c\u0131lar\u0131n\u0131n bu \u00f6\u011felere odaklanmas\u0131n\u0131 ve etkile\u015fim kurmas\u0131n\u0131 sa\u011flar.<\/p>\n
\/ Odaklan\u0131ld\u0131\u011f\u0131nda belirgin bir d\u0131\u015f \u00e7izgi ekle <\/em>\/\n.featured-quote:focus-within {\n    outline: 2px dashed #007bff;\n    outline-offset: 3px;\n}<\/code><\/pre>\nfocus-within<\/code> s\u00f6zde s\u0131n\u0131f\u0131, bir eleman\u0131n veya onun herhangi bir alt eleman\u0131n\u0131n odaklanm\u0131\u015f olmas\u0131 durumunda uygulan\u0131r. Bu, t\u00fcm kutunun klavye ile etkile\u015fimli oldu\u011funu belirtir.<\/p>\n
SEO ve Anlamsal \u0130\u015faretleme<\/h3>\nAl\u0131nt\u0131 kutular\u0131n\u0131n do\u011fru \u015fekilde i\u015faretlenmesi, arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi daha iyi anlamas\u0131na ve potansiyel olarak zengin snippet’ler olarak g\u00f6r\u00fcnt\u00fclemesine yard\u0131mc\u0131 olabilir.<\/p>\n
Schema.org Markup<\/h4>\nSchema.org, arama motorlar\u0131n\u0131n i\u00e7eri\u011finiz hakk\u0131nda daha fazla bilgi edinmesine yard\u0131mc\u0131 olan yap\u0131land\u0131r\u0131lm\u0131\u015f veri i\u015faretlemesi i\u00e7in bir standartt\u0131r. Al\u0131nt\u0131lar i\u00e7in do\u011frudan bir “Quote” \u015femas\u0131 olmasa da, Article<\/code> veya WebPage<\/code> \u015femas\u0131 i\u00e7inde citation<\/code> veya description<\/code> \u00f6zelliklerini kullanabilirsiniz.<\/p>\n
\u00d6rne\u011fin, bir makale i\u00e7indeki \u00f6nemli bir al\u0131nt\u0131y\u0131 belirtmek i\u00e7in itemprop=\"citation\"<\/code> kullanabilirsiniz:<\/p>\n
\n    \n    \n        Makalenin ba\u015flang\u0131c\u0131...<\/p>\n        
\n            \n                Geli\u015fmek, de\u011fi\u015fmek demektir; m\u00fckemmel olmak ise s\u0131k s\u0131k de\u011fi\u015fmek demektir.<\/p>\n            <\/blockquote>\n            
\n                \u2014 Winston Churchill\n            <\/figcaption>\n        <\/figure>\n        Makalenin devam\u0131...<\/p>\n    <\/div>\n<\/article><\/code><\/pre>\n
Bu, arama motorlar\u0131na bu <\/p>\n
<\/code> eleman\u0131n\u0131n makalenin bir al\u0131nt\u0131s\u0131 oldu\u011funu bildirir. Do\u011fru semantik HTML kullan\u0131m\u0131, Schema.org i\u015faretlemesiyle birle\u015fti\u011finde, i\u00e7eri\u011finizin arama motorlar\u0131 taraf\u0131ndan daha iyi anla\u015f\u0131lmas\u0131n\u0131 ve dizine eklenmesini sa\u011flar.<\/p>\nUygulama \u00d6rnekleri<\/h3>\n\u015eimdiye kadar \u00f6\u011frendiklerimizi birle\u015ftirerek birka\u00e7 farkl\u0131 al\u0131nt\u0131 kutusu \u00f6rne\u011fi olu\u015ftural\u0131m.<\/p>\n
\u00d6rnek 1: Klasik Kenar \u00c7izgili Al\u0131nt\u0131<\/h4>\n\n    \n        Hayat, bisiklete binmek gibidir. Dengede kalmak i\u00e7in hareket etmeye devam etmelisin.<\/p>\n    <\/blockquote>\n    
\n        \u2014 Albert Einstein\n    <\/figcaption>\n<\/figure>\n\n

CSS ile Temel Stil Verme<\/h3>\n
HTML yap\u0131s\u0131n\u0131 olu\u015fturduktan sonra s\u0131ra, al\u0131nt\u0131 kutumuza g\u00f6rsel bir kimlik kazand\u0131rmaya gelir. CSS, bu konuda bize s\u0131n\u0131rs\u0131z olanaklar sunar.<\/p>\n

Farkl\u0131 Tasar\u0131m Yakla\u015f\u0131mlar\u0131<\/h4>\n
Al\u0131nt\u0131 kutular\u0131 tek bir tasar\u0131mla s\u0131n\u0131rl\u0131 de\u011fildir. Web sitenizin genel esteti\u011fine uyacak \u015fekilde farkl\u0131 yakla\u015f\u0131mlar deneyebilirsiniz.<\/p>\n

Uygulama \u00d6rnekleri<\/h3>\n
\u015eimdiye kadar \u00f6\u011frendiklerimizi birle\u015ftirerek birka\u00e7 farkl\u0131 al\u0131nt\u0131 kutusu \u00f6rne\u011fi olu\u015ftural\u0131m.<\/p>\n

\u00d6rnek 1: Klasik Kenar \u00c7izgili Al\u0131nt\u0131<\/h4>\n
`\n \n Hayat, bisiklete binmek gibidir. Dengede kalmak i\u00e7in hareket etmeye devam etmelisin.<\/p>\n <\/blockquote>\n \n \u2014 Albert Einstein\n <\/figcaption>\n<\/figure>\n\n`