CSS CARD 1 - SLAYT

Css ile slayt gibi kullanılabilecek bir kart uygulaması yapalım. Kart içindeki resmi bu uygulamada arka plan resmi olarak ekleyeceğiz..

HTML KODLARI 

Öncelikle kart için gerekli html öğeleri oluşturalım. Bunun için sayfaya;

• Tüm içeriği kapsayacak bir .card class'lı div,
• Turuncu label için bir span, 
• Yazılar içinde .content class'lı bir div

ekliyoruz.  Content class'lı div içierisnde H3 ve H6 etiketleri kullandım. Siz class isimlerini ve etiket seçimlerini  daha farklı yapabilirsiniz.  Ancak kartlar içerisinde H1 etiketini kullanmaktan kaçınmanız genel tasarım kuralları için iyi olacaktır.

HTML

	<div class="card">
		<span> CSS CARD </span>
		<div class="content">
			<h3>Lorem ipsum dolor sit amet,</h3>
			<h6>Lorem ipsum dolor </h6>
		</div>
	</div>

CSS BÖLÜMLERİ

Elemanlara ayrı ayrı CSS özelliklerini eklemeden önce tüm elemanların margin ve padding değerlerini sıfırlayıp , yazı tiplerini CALİBRİ yapalım..

	* {
			margin:0;
			padding:0;
			font-family:calibri; 
		}

EKRAN

BODY 

Kart'ın tasarımda daha güzel durması için , FLEX özellikleri ile  body içerisine ortaladım ancak siz eklemek zorunda değilsiniz. Body etiketi flex box olduğunda dikey hizalamanın (align-items) düzgün yanıt vermesi için , body yükseliğine 100vh ekliyoruz..

		body {
			background-color: #151515;
           color:#fff;
			display: flex;
			justify-content: center;
			align-items: center;
			height:100vh;

		}

EKRAN

.CARD (KAPSAYICI)

Kart elemanlarını kapsayan .CARD class'lı div için özellikleri ekleyelim. Genel özelliklerinin dışında , arka plan resminin div içerisine tam yerleşmesi için  COVER özelliğini ve  div içerisinde ABSOLUTE yerleşecek elemanlar olduğu içinde kapsayıcının POSITION özelliğini RELATIVE yapıyoruz. Ayrıca kart üzerine gelindiğinde yapının ölçekli bir şekilde büyümesi için TRANSFORM:SCALE özelliğini , kartın :hover sınıfına uyguluyoruz.

	.card {
			width:300px;
			border:1px solid #000; 
			position:relative;
			border-radius:1rem;
			overflow: hidden;
			height: 200px;
			background-image: url("http://www.erkanunlu.com.tr/resim/semsiye.jpg");
			background-size: cover;
			transition: .5s;
			cursor: pointer;
		}
      .card:hover {	transform: scale(1.2);}

EKRAN

SPAN (LABEL)

Kartın sol üstündeli label için (CSS CARD) span etiketi kullanmıştık. Etiketi  tam yerine konumlandırabilmek için ABSOLUTE position değeri verip , uygun top ve left değerleri (10px)  ile diğer temel özelliklerini ekliyoruz.

.card span {
			background-color:#da3d00 ;			
			position: absolute;
			top:10px;
			left:10px;
			padding:.3rem .5rem;
			font-size:.8rem;
			border-radius:5px;
			font-weight:bold;
		}

EKRAN

.CONTENT (YAZILAR)

KArt üzerinde 2 yazı var; biri başlık, diğeri ise mini açıklama yazısı.. Her iki yazıyı H3 ve H6 etiketleri ile ekleyip .CONTENT class'lı div içerisine almıştık. Yazılar kapsayıcının (.card) alt bölümün yerleşmiş. Dolayısı ile yine ABSOLUTE konumlandırma verip , uygun bottom ve left değerlerini ekliyoruz. Ayrıca , beyaz olan yazıların resim üzerindeki açık alanlarda okunurluğunu arttırmak için LİNEAR-GRADIENT ile transparan - siyah karışımı bir arka plan uyguluyoruz..

.card .content {
			width:100%;
			position: absolute;
			bottom: 0px;
			left:0px; 
			padding: 1rem;			
			color:#fff;
			background-image:linear-gradient(to bottom,transparent,#000);
		}

EKRAN

H6 (AÇIKLAMA YAZISI)

Son olarak, başlık yazısı ile dahada ayırt edilebilmesi için , açıklama yazısı olarak eklediğimiz H6 etiketi için , yazı rengini biraz grileştiriyoruz (#aaa).

CSS

.card .content h6 {color: #aaa;}

EKRAN

TÜM CSS KODLARI

Yukarıda adım adım eklediğimiz tüm CSS koldarını bir arada aşağıda bulabilirsiniz.

CSS

	* {
			margin:0;
			padding:0;
			font-family:calibri; 
		}

		body {
			background-color: #151515;
           color:#fff;
			display: flex;
			justify-content: center;
			align-items: center;
			height:100vh;
		}

		.card {
			width:300px;
			border:1px solid #000; 
			position:relative;
			border-radius:1rem;
			overflow: hidden;
			height: 200px;
			background-image: url("http://www.erkanunlu.com.tr/resim/semsiye.jpg");
			background-size: cover;
			transition: .5s;
			cursor: pointer;
		}
		.card:hover {	transform: scale(1.2);}
		
		.card span {
			background-color:#da3d00 ;
			position: absolute;
			top:10px;
			left:10px;
			padding:.3rem .5rem;
			font-size:.8rem;
			border-radius:5px;
			font-weight:bold;
		}
		.card .content {
			width:100%;
			position: absolute;
			bottom: 0px;
			left:0px; 
			padding: 1rem;			
			color:#fff;
			background-image:linear-gradient(to bottom,transparent,#000);
		}
		.card .content h6 {color: #aaa;}

Görüşmek üzere...