[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-temel-html-css-baslangic-icin-responsive-kart-ornegi":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},31340,"Temel HTML & CSS: Başlangıç için responsive kart örneği","Bu makalede, HTML ve CSS kullanarak responsive bir kart tasarımının temel yapı taşlarını, örnek kodu ve mobil uyumlu hale getirme adımlarını öğreneceksiniz.","\u003Ch2>Temel HTML &amp; CSS: Başlangıç için responsive kart örneği\u003C/h2>\n\u003Cp>Bu rehber, HTML ve CSS ile basit, temiz ve mobil uyumlu (responsive) bir kart bileşeni oluşturmayı adım adım gösterir. Amacımız kısa, çalıştırılabilir bir örnek sunmak; ardından kodu açıklayıp geliştirme, erişilebilirlik ve test önerileri vermektir.\u003C/p>\n\n\u003Ch3>Ne öğreneceksiniz?\u003C/h3>\n\u003Cul>\n  \u003Cli>Kartın temel HTML yapısını kurma\u003C/li>\n  \u003Cli>Basit CSS ile görsel stil verme (gölge, yuvarlatma, düğme)\u003C/li>\n  \u003Cli>Flexbox ve medya sorgusuyla responsive davranış sağlama\u003C/li>\n  \u003Cli>Hover etkileşimleri, erişilebilirlik ve performans ipuçları\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Hızlı Başlangıç: Örnek dosyalar\u003C/h3>\n\u003Cp>Bu örnek için iki dosya oluşturun: \u003Cstrong>index.html\u003C/strong> ve \u003Cstrong>styles.css\u003C/strong>. index.html'i tarayıcıda açtığınızda, kartlar yatayda akış halinde görünür; küçük ekranlarda alt alta geçer.\u003C/p>\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>index.html\u003C/th>\u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;tr&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;title&gt;Responsive Kart Örneği&lt;/title&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n&lt;/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;cards&quot;&gt;\n    &lt;div class=&quot;card&quot;&gt;\n      &lt;img src=&quot;https://via.placeholder.com/400x200&quot; alt=&quot;Ürün görseli&quot;&gt;\n      &lt;div class=&quot;card-content&quot;&gt;\n        &lt;h3&gt;Kart Başlığı&lt;/h3&gt;\n        &lt;p&gt;Kısa açıklama metni. Bu alan ürün veya gönderi hakkında kısa bilgi sunar.&lt;/p&gt;\n        &lt;a href=&quot;#&quot;&gt;Devamını oku&lt;/a&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;!-- İhtiyaca göre daha fazla kart ekleyin --&gt;\n  &lt;/div&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n      \u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>styles.css\u003C/th>\u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\n/* Temel düzen */\n.cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1rem; }\n.card { flex: 1 1 280px; max-width: 320px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; }\n.card img { width: 100%; height: auto; display: block; }\n.card-content { padding: 1rem; }\n.card h3 { margin: 0 0 .5rem 0; font-size: 1.125rem; }\n.card p { margin: 0 0 1rem 0; color: #555; line-height: 1.4; }\n.card a { display: inline-block; padding: .5rem .75rem; background: #0069d9; color: #fff; border-radius: 4px; text-decoration: none; }\n.card:hover { transform: translateY(-6px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }\n\n/* Mobil: kartlar tek sütuna geçer */\n@media (max-width: 600px) {\n  .card { flex: 1 1 100%; max-width: none; }\n}\n      \u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\n\u003Ch3>Kodu adım adım açıklama\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>.cards\u003C/strong>: Kartları sarmalayan konteyner. \u003Cem>display:flex\u003C/em> ve \u003Cem>flex-wrap\u003C/em> ile satır akışı ve sarma kontrol edilir.\u003C/li>\n  \u003Cli>\u003Cstrong>.card\u003C/strong>: Her kartın kapsayıcısı. \u003Cem>flex: 1 1 280px\u003C/em> kuralı, kartların esnek olduğunu, ancak sıkıştıklarında en az 280px genişlik talep ettiğini belirtir.\u003C/li>\n  \u003Cli>\u003Cstrong>Görseller\u003C/strong>: \u003Cem>img\u003C/em> yüzde genişlik ile ayarlanır (width:100%), böylece kartın genişliğine uyar.\u003C/li>\n  \u003Cli>\u003Cstrong>Medya sorgusu\u003C/strong>: \u003Cem>@media (max-width:600px)\u003C/em> ile küçük ekranlarda kartlar tek sütuna geçer ve daha iyi okunur.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>İyi uygulama ipuçları\u003C/h3>\n\u003Cul>\n  \u003Cli>Her görsel için \u003Cstrong>alt\u003C/strong> etiketi sağlayın; bu erişilebilirlik ve SEO için önemlidir.\u003C/li>\n  \u003Cli>Butonlar/a linkleri için klavye odak durumlarını belirtin (örn. \u003Ccode>outline\u003C/code> veya gölgelendirme) böylece kullanıcılar sekme ile de ulaşabilir.\u003C/li>\n  \u003Cli>Görselleri optimize edin; gerekiyorsa \u003Cstrong>srcset\u003C/strong> ve \u003Cstrong>sizes\u003C/strong> kullanarak farklı ekran yoğunluklarına uygun görüntüler sunun.\u003C/li>\n  \u003Cli>Geçişler için kısa süreli \u003Cem>transition\u003C/em> eklemek kullanıcı deneyimini yumuşatır.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Hover etkileşimi ve odak durumu (örnek)\u003C/h3>\n\u003Cp>Kullanıcı fareyle üstüne geldiğinde veya link klavye ile odağa geldiğinde küçük bir yükselme etkisi ekleyebilirsiniz. Aşağıdaki CSS satırları buna örnektir (zira yukarıdaki styles.css içinde yer alır):\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>.card:hover\u003C/strong> — kartı hafifçe yukarı taşıma ve gölge arttırma.\u003C/li>\n  \u003Cli>Odak için: \u003Cem>.card a:focus { outline: 3px solid rgba(0,123,255,0.25); outline-offset: 2px; }\u003C/em>\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Alternatif düzen: CSS Grid\u003C/h3>\n\u003Cp>Flexbox yerine CSS Grid ile otomatik sığdırma yapmak isterseniz, şu küçük kural işinizi görür:\u003C/p>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>Grid örneği (styles.css)\u003C/th>\u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\n.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 1rem; }\n/* .card stilleri aynı kalır */\n      \u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\u003Cp>Bu satır, ekrana göre otomatik olarak kaç sütun olacağını belirler; küçük ekranlarda kartlar alt alta gelir, geniş ekranda yan yana yerleşir.\u003C/p>\n\n\u003Ch3>Erişilebilirlik ve performans kontrol listesi\u003C/h3>\n\u003Cul>\n  \u003Cli>Her \u003Cem>img\u003C/em> için anlamlı \u003Cstrong>alt\u003C/strong> metin ekleyin.\u003C/li>\n  \u003Cli>Linklerin ve butonların klavye odak (tab) durumlarını görünür yapın.\u003C/li>\n  \u003Cli>Renk kontrastını kontrol edin (metin / arkaplan oranı).\u003C/li>\n  \u003Cli>Gerektiğinde \u003Cem>loading=\"lazy\"\u003C/em> ekleyin ve \u003Cem>width/height\u003C/em> öznitelikleriyle CLS (layout shift) azaltın.\u003C/li>\n  \u003Cli>Mobilde dokunmatik hedeflerin yeterli büyüklükte olduğundan emin olun (ör. 44–48px önerisi literatürde yaygındır).\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Test &amp; dağıtım checklist\u003C/h3>\n\u003Col>\n  \u003Cli>Farklı ekran genişliklerinde manuel test (tarayıcıın geliştirici araçları ile).\u003C/li>\n  \u003Cli>Gerçek cihazlarda dokunmatik testleri yapın.\u003C/li>\n  \u003Cli>Performans: sayfa yükleme hızını ve görsel boyutlarını kontrol edin.\u003C/li>\n  \u003Cli>Erişilebilirlik: klavye ile gezinme ve ekran okuyucu testi yapın.\u003C/li>\n\u003C/ol>\n\n\u003Ch3>İleri seviyeye geçiş: etkileşim ve animasyonlar\u003C/h3>\n\u003Cp>Daha gelişmiş etkileşimler için parallax, flip-card veya içerik rotasyonu gibi teknikleri araştırabilirsiniz. Bu tür varyasyonlara örnekler ve uygulamalar için kaynaklara bakabilirsiniz; örneğin parallax/flip kart örnekleri \u003Ca href=\"https://www.bytewebster.com/frontendprojects/responsive-parallax-flipping-cards-using-html-and-css\">Bytewebster\u003C/a> adresinde, hover etkileşimleriyle ilgili düzenlemeler ise \u003Ca href=\"https://www.rustcodeweb.com/2023/10/responsive-card-with-hover-interactions-using-html-css-.html\">RUSTCODE\u003C/a> üzerinde gösterilmiştir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Kaynaklar ve ileri okumalar\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.codewithrandom.com/2023/01/01/how-to-create-responsive-card-using-html-css-card-using-css/\">Codewithrandom — Create Responsive Card Layout Using HTML and CSS\u003C/a> (örnek yapı ve açıklamalar için referans).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://github.com/topics/responsive-cards\">GitHub Topics — responsive-cards\u003C/a> (farklı projeler ve uygulama örnekleri).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.bytewebster.com/frontendprojects/responsive-parallax-flipping-cards-using-html-and-css\">Bytewebster — Parallax Flipping Cards\u003C/a> (ileri düzey varyasyonlar).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.rustcodeweb.com/2023/10/responsive-card-with-hover-interactions-using-html-css-.html\">RUSTCODE — Responsive Card With Hover Interactions\u003C/a> (hover/etkileşim örnekleri).\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Sıkça Sorulan Sorular (SSS)\u003C/h3>\n\u003Ch4>Kartlar neden bazı ekranlarda üst üste geliyor?\u003C/h4>\n\u003Cp>Genellikle bunun nedeni konteynerin veya kartların sabit genişliklerle tanımlanmasıdır. \u003Cstrong>flex: 1 1 280px\u003C/strong> gibi bir kural, kartların esnek olmasını ve gerektiğinde bir satırdan diğerine taşınmasını sağlar. Alternatif olarak CSS Grid ve \u003Cem>minmax()\u003C/em> kullanabilirsiniz.\u003C/p>\n\n\u003Ch4>Görsellerin farklı ekranlarda doğru görünmesini nasıl sağlarım?\u003C/h4>\n\u003Cp>Görseller için \u003Cstrong>width=\"100%\" height=\"auto\"\u003C/strong> kullanmak temel çözümdür. Ayrıca \u003Cem>srcset\u003C/em> ve \u003Cem>sizes\u003C/em> ile farklı çözünürlüklere uygun dosyalar sunabilirsiniz.\u003C/p>\n\n\u003Ch4>Kartları daha erişilebilir yapmanın en hızlı yolu nedir?\u003C/h4>\n\u003Cp>Her görsele anlamlı \u003Cstrong>alt\u003C/strong> metin ekleyin, link ve butonlara odak durumları tanımlayın ve başlıkları (h3 vb.) doğru kullanın. Erişilebilirlik testleri için otomatik araçların yanında manuel testler de yapın.\u003C/p>\n\n\u003Ch4>Bu örneği projemde nasıl kullanabilirim?\u003C/h4>\n\u003Cp>Kodu kopyalayıp kendi HTML/CSS dosyalarınıza yapıştırarak başlayabilirsiniz. Görselleri, renkleri ve yazı tiplerini marka gereksinimlerinize göre özelleştirin. Daha fazla kart veya içerik eklerken düzenin korunmasına dikkat edin.\u003C/p>\n\n\u003Chr>\n\n\u003Cp>\u003Cstrong>Not:\u003C/strong> Örnek, temel bir şablon sunar; gerçek projelerde tarayıcı uyumluluğu, performans ve erişilebilirlik testlerini yapmanız önerilir. Daha derin örnekler ve varyasyonlar için kaynaklardaki uygulamalara bakabilirsiniz.\u003C/p>\n","Temel HTML & CSS: Başlangıç için responsive kart örneği | Kı","Bu rehber, HTML ve CSS kullanarak adım adım responsive bir kart bileşeni oluşturmayı, temel HTML yapısını, CSS stillerini ve mobil uyumlu hale getirme ipuçlarıy","HTML & CSS Mini Örnekleri, responsive kart örneği, basit html css örnek, kolay css örnekleri, responsive card example","temel-html-css-baslangic-icin-responsive-kart-ornegi","2026-05-05T11:19:46.000Z",{"id":16,"title":17,"slug":18},203,"HTML & CSS Mini Örnekleri","html-css-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/cb5186ef12a5d859883fd525aaed4cda.jpg","/media/blog/cb5186ef12a5d859883fd525aaed4cda_thumb.jpg","/media/blog/cb5186ef12a5d859883fd525aaed4cda.webp","/media/blog/cb5186ef12a5d859883fd525aaed4cda_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,993,0,"5 dk okuma süresi","/blog/html-css-mini-ornekleri/temel-html-css-baslangic-icin-responsive-kart-ornegi",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/cb5186ef12a5d859883fd525aaed4cda.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/temel-html-css-baslangic-icin-responsive-kart-ornegi",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/html-css-mini-ornekleri/temel-html-css-baslangic-icin-responsive-kart-ornegi",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/html-css-mini-ornekleri",{"@type":102,"position":114,"name":7,"item":65},4]