[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-basit-html-css-kart-tasarimi-icin-7-kisa-ornek":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},39675,"Basit HTML & CSS: Kart Tasarımı İçin 7 Kısa Örnek","Bu makale, projelerinizde hızlıca kullanabileceğiniz 7 kısa HTML ve CSS kart örneği sunar; her örnek kısa kod parçacıkları, responsive ipuçları ve uygulama adımları içerir.","\u003Ch2>Basit HTML & CSS: Kart Tasarımı İçin 7 Kısa Örnek\u003C/h2>\n\u003Cp>Bu rehberde, küçük ve etkili \u003Cstrong>kolay kod örnekleri\u003C/strong> ile 7 farklı kart tasarımını göreceksiniz. Amacımız hızlıca kopyalayıp proje dosyanıza yapıştırabileceğiniz, okunabilir ve responsive \u003Cem>html css örnekleri\u003C/em> sunmaktır. Kartlar minimalden animasyona, neon parıltısından profile kadar farklı amaçları kapsar.\u003C/p>\n\u003Cp>Not: Responsive düzenler ve modern düzen teknikleri için \u003Ca href=\"https://odevcim.com/html-css-odevi/\">Flexbox/Grid kullanımı\u003C/a> faydalı referanslardır. Etkileşimli hover ve animasyon fikirleri için örnekleri \u003Ca href=\"https://www.makuistudio.com/animated-cards.html\">UI Studio\u003C/a> sitesinde görebilirsiniz. Neon ve parlak efektler hakkında ilham almak için \u003Ca href=\"https://ui.digrart.jp/tr/snippets/cards/neon-glow-card/\">Neon Glow örnekleri\u003C/a> yararlı olacaktır.\u003C/p>\n\u003Chr>\n\u003Ch3>1. Temel Kart — Minimal Tasarım\u003C/h3>\n\u003Cp>Kısa ve temiz bir kart: başlık + açıklama. Hızlıca yerleştirmek için uygundur.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><div class=\"card\">\u003Cbr>  <h3>Başlık</h3>\u003Cbr>  <p>Kısa açıklama.</p>\u003Cbr></div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.card { background:#fff; border-radius:8px; padding:16px; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:transform .18s ease, box-shadow .18s ease; }\u003Cbr>.card:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.12); }\u003C/p>\n\u003Cul>\n  \u003Cli>Kullanım: içerik listeleri, blog kartları.\u003C/li>\n  \u003Cli>Responsive: .card { max-width:340px; width:100%; } yaparak kapsayıcıya uyum sağlayın.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>2. Görsel Odaklı Kart — Üst Görsel\u003C/h3>\n\u003Cp>Ürünün ya da gönderinin görselini vurgulamak için kullanılır.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><div class=\"card image-card\">\u003Cbr>  <img src=\"/path/to.jpg\" alt=\"Ürün görseli\">\u003Cbr>  <div class=\"body\">\u003Cbr>    <h4>Ürün adı</h4>\u003Cbr>    <p>Kısa bilgi.</p>\u003Cbr>  </div>\u003Cbr></div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.image-card img { width:100%; height:auto; display:block; border-top-left-radius:8px; border-top-right-radius:8px; }\u003Cbr>.image-card .body { padding:12px; }\u003C/p>\n\u003Cul>\n  \u003Cli>Tavsiye: görsel boyutlarını mobil için optimize edin; büyük resimler cihazda yavaş yüklenebilir.\u003C/li>\n  \u003Cli>Erişilebilirlik: <img> için açıklayıcı \u003Cem>alt\u003C/em> metni ekleyin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>3. Profil Kartı — Avatar ve Bilgi\u003C/h3>\n\u003Cp>Kullanıcı profilleri, ekip sayfaları veya küçük biyografi kartları için uygundur.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><div class=\"profile-card\">\u003Cbr>  <img src=\"/avatar.jpg\" alt=\"Kullanıcı adı\">\u003Cbr>  <h4>Ad Soyad</h4>\u003Cbr>  <p>Kısa pozisyon/özgeçmiş</p>\u003Cbr></div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.profile-card { text-align:center; padding:18px; border-radius:10px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.06); }\u003Cbr>.profile-card img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:10px; }\u003C/p>\n\u003Cul>\n  \u003Cli>Mobil uyum: metin boyutlarını medya sorgularıyla küçük ekranlarda düşürün.\u003C/li>\n  \u003Cli>Odak (focus) erişilebilirliği için butonlar/profil linklerine görünür odak stili ekleyin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>4. Ürün Kartı — Grid ile Düzen\u003C/h3>\n\u003Cp>Birden çok ürünü listelemek için container içinde grid kullanan kart tasarımı örneği. Modern projelerde \u003Cstrong>Flexbox\u003C/strong> ve \u003Cstrong>Grid\u003C/strong> esneklik sağlar (bkz: \u003Ca href=\"https://odevcim.com/html-css-odevi/\">referans\u003C/a>).\u003C/p>\n\u003Cp>\u003Cstrong>HTML (container)\u003C/strong>\u003Cbr><div class=\"cards\">...kartlar burada...</div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }\u003C/p>\n\u003Cul>\n  \u003Cli>auto-fit + minmax ile kartlar ekran genişliğine göre akıllıca çoğalır/azalır.\u003C/li>\n  \u003Cli>Her kart içinde küçük görsel, başlık, fiyat ve buton bulunabilir.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>5. Hover ile Animasyonlu Kart\u003C/h3>\n\u003Cp>Hover ve küçük animasyonlar kartlara derinlik katar. Animasyon örnekleri için ilham almak isterseniz \u003Ca href=\"https://www.makuistudio.com/animated-cards.html\">UI Studio\u003C/a> sayfasına bakabilirsiniz.\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.card { transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; }\u003Cbr>.card:hover { transform:translateY(-12px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.14); }\u003C/p>\n\u003Cul>\n  \u003Cli>Performans: sadece transform ve opacity ile animasyon yapmak çoğu durumda daha verimlidir.\u003C/li>\n  \u003Cli>Dokunmatik cihazlarda hover olmayacağını unutmayın; dokunmatik etkileşim için farklı tetikleyiciler düşünün.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>6. Neon Parıltılı Kart — Vurgulu Stil\u003C/h3>\n\u003Cp>Vurgu kartları, promosyon veya dikkat çekmek istediğiniz içerikler için uygundur. Neon/ışık efekti örnekleri için ilham: \u003Ca href=\"https://ui.digrart.jp/tr/snippets/cards/neon-glow-card/\">Neon Glow\u003C/a>.\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.neon-card { background:#0b0f1a; color:#e6f7ff; padding:20px; border-radius:10px; box-shadow:0 0 8px rgba(0,255,255,0.08), 0 0 30px rgba(255,0,200,0.04); border:1px solid rgba(255,255,255,0.04); }\u003Cbr>.neon-card h3 { text-shadow:0 2px 8px rgba(0,255,255,0.12); }\u003C/p>\n\u003Cul>\n  \u003Cli>Kontrast: neon stiller yüksek kontrast gerektirebilir; okunabilirlik test edin.\u003C/li>\n  \u003Cli>Animasyon eklemek isterseniz kutu gölgesinin opaklığını CSS animasyonla değiştirin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>7. Değişkenlerle (CSS Variables) Esnek Kart\u003C/h3>\n\u003Cp>Tek bir kart sınıfını tema değişkenleriyle hızlıca özelleştirin. Bu yöntem hem bakım kolaylığı sağlar hem de farklı renk varyasyonları oluşturmayı kolaylaştırır.\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>:root { --card-bg:#fff; --card-radius:12px; --card-shadow:0 8px 20px rgba(0,0,0,0.08); }\u003Cbr>.card { background:var(--card-bg); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:16px; }\u003C/p>\n\u003Cul>\n  \u003Cli>Projede tema değiştirme (ör. dark/light) için CSS değişkenleri kullanın.\u003C/li>\n  \u003Cli>JavaScript ile değişkenleri runtime'da değiştirmek, interaktif temalar için uygundur.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch3>Hızlı Uygulama Adımları\u003C/h3>\n\u003Col>\n  \u003Cli>HTML yapısını oluşturun: semantik başlık ve paragraf etiketleri kullanın.\u003C/li>\n  \u003Cli>Tek bir ortak .card sınıfı yaratın ve ortak stilleri buraya koyun.\u003C/li>\n  \u003Cli>Grid veya Flexbox ile kart container düzenini kurun (bkz: \u003Ca href=\"https://odevcim.com/html-css-odevi/\">Flexbox/Grid örnekleri\u003C/a>).\u003C/li>\n  \u003Cli>Görselleri boyutlandırın ve responsive için \u003Cem>srcset\u003C/em> veya modern görüntü servisleri kullanın.\u003C/li>\n  \u003Cli>Performans: gereksiz gölge/filtre kullanımını sınırlayın ve CSS dosyalarını minify edin.\u003C/li>\n\u003C/ol>\n\u003Ch3>Erişilebilirlik ve Test Kontrol Listesi\u003C/h3>\n\u003Cul>\n  \u003Cli>Renk kontrastını kontrol edin; metin her zaman okunur olmalı.\u003C/li>\n  \u003Cli>Görseller için açıklayıcı \u003Cem>alt\u003C/em> metin ekleyin.\u003C/li>\n  \u003Cli>Klavyeyle gezinti: kart içindeki linkler ve butonlar odaklanabilir olmalı.\u003C/li>\n  \u003Cli>Mobil test: farklı ekran boyutlarında kartların kırılmadığından emin olun.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cp>Bu örnekler küçük projeler, prototipler veya eğitim amaçlı çalışmalarda kullanılmak üzere hazırlandı. Daha fazla varyasyon ve animasyon örnekleri için kaynaklardaki koleksiyonlara göz atabilirsiniz (örnek koleksiyon: \u003Ca href=\"https://github.com/Rakeshs-bit/cards-craft\">GitHub - cards-craft\u003C/a>).\u003C/p>\n\u003Cp>\u003Cstrong>Son not:\u003C/strong> Kodları canlı siteye almadan önce tarayıcı konsolu ve mobil test araçlarıyla deneyin; gerektiğinde küçük ayarlar yaparak görsel uyumu sağlayın.\u003C/p>","Basit HTML & CSS: Kart Tasarımı İçin 7 Kısa Örnek — Kolay k\u0000","7 kısa ve uygulanabilir HTML/CSS kart örneği: minimal kart, görsel kart, profil kartı, ürün kartı, hover animasyonları, neon efekt ve responsive düzen. Her örne","kolay kod örnekleri, html css örnekleri, basit web tasarım örnekleri, responsive kart css, html css snippetleri, kart tasarımı","basit-html-css-kart-tasarimi-icin-7-kisa-ornek","2026-11-01T08:22:08.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/f3e6228eaed621c11bd11836c7742751.jpg","/media/blog/f3e6228eaed621c11bd11836c7742751_thumb.jpg","/media/blog/f3e6228eaed621c11bd11836c7742751.webp","/media/blog/f3e6228eaed621c11bd11836c7742751_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,902,0,"5 dk okuma süresi","/blog/html-css-mini-ornekleri/basit-html-css-kart-tasarimi-icin-7-kisa-ornek",[],["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/f3e6228eaed621c11bd11836c7742751.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/basit-html-css-kart-tasarimi-icin-7-kisa-ornek",{"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/basit-html-css-kart-tasarimi-icin-7-kisa-ornek",["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]