Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
84 lines (47 sloc) 5.14 KB
layout title date author comments category tags
post
HTML5 ve CSS3 kullanarak (Flexbox ile) Card yapalım
2017-06-08 16:30
engin.polat
true
Web
html5
css3
flexbox
card

Bu makalede aşağıdaki görselde de görebileceğiniz kartlardan yapacağız. Kartları sadece HTML5 ve CSS3 kullanarak kodlayacağız.

Böylece #3 numaralı istek makale kapanmış olacak :)

Not : Issues sayfasında varolan makale isteklerini görebileceğinizi, hatta yeni makale isteğinde bulunabileceğinizi biliyor muydunuz?

Öncelikle projeyi kendi bilgisayarımızda oluşturabilmek için nodejs.org adresinden en güncel NodeJs kurulumunu indirelim ve bilgisayarımıza kuralım.

Kurulum bittikten sonra hemen projemiz için yeni bir dizin oluşturalım, Command Prompt penceresi açalım ve aşağıdaki komutu çalıştıralım;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=http-server.cmd"></script>

Eğer bilgisayarınıza daha önce http-server npm paketini kurmadıysanız öncelikle aşağıdaki komutu çalıştırarak http-server paketini kurmanız gerekiyor;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=npm-install.cmd"></script>

Proje için oluşturduğumuz dizinde bir index.html bir de index.css dosyası oluşturalım, index.html dosyası içerisine aşağıdaki html kodlarını yazalım;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=card.html"></script>

Card nesnemizin parçaları;

Şimdi index.css dosyasını açarak stil vermeye başlayabiliriz.

İlk olarak body elementinin font'unu Segoe UI yapalım ve http://localhost:8080/ adresini açalım ve aşağıdaki gibi bir sayfa gördüğümüzden emin olalım;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=style-body.css"></script>

Şimdi index.css dosyasına aşağıdaki kodu ekleyelim;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=style-card.css"></script>

Eklediğimiz .card css class'ı sayesinde bütün card nesnesini genişliği 150px olan bir çerçeve içerisine almış olduk;

Sırada başlığı düzeltmek var, index.css dosyasını açalım ve aşağıdaki kodu ekleyelim;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=style-card-header.css"></script>

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Sırada, card nesnesinin asıl parçası var, hemen index.css dosyasını açalım ve aşağıdaki kodları ekleyelim;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=style-card-main.css"></script>

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Son olarak, icon ve açıklama alanının stilini de ekleyelim;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=style-icon-description.css"></script>

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Bütün index.css dosyası aşağıdaki gibi olmalı;

<script src="https://gist.github.com/polatengin/961fc44835c97c317899ea2a1dc28aee.js?file=index.css"></script>

Tüm Material Icon listesini Material Icons sayfasında bulabilirsiniz. Değişik renkler ve değişik icon'lar ile sizler de istediğiniz gibi bir card tasarımı yapabilirsiniz.

Not : Bu makalenin orjinalini Build a Minimalist HTML Card in just 53 lines of code (with Flexbox) adresinden okuyabilirsiniz