Herkese merhaba! Bugün CSS ile yepyeni bir tasarım yapmayı anlatacağım. Tasarımın içeriği, CSS ile konumlandırma ve border-radius özelliklerini ele alıyor. Bir kitap kapağını CSS’e entegre ederek bu özellikleri daha detaylı bir şekilde ele alalım. Önceikle 400px genişliğinde ve 525px yüksekliğinde bir çalışma alanı oluşturuyorum. Daha sonra CSS kodlarımı yazmaya başlıyorum. İsterseniz tek seferde tüm CSS ve HTML kodlarını paylaşıp daha sonra kodlar üzerinden anlatıma devam edelim.

Tüm kodlar için buraya tıklayınız.

Şimdi teker teker kodları inceleyim.

arkaplan sınıfına tanımladığım konumlandırma kodları:

position:absolute; /* Konumlandırma başlangıç */
top:50%; /* Dikeyde ortada olması için */
left:50%; /* Yatayda ortada olması için */
margin-left:-200px; /* Genişliğin yarısı */
margin-top:-262.5px; /* Yüksekliğin yarısı */


cizgi sınıfındaki transparanlık değeri:
background-color:transparent; /* Arkaplan transparan */
border:1px solid #000; /* 1px çerçeve - cizgi görünümünde */


kitap-adi sınıfındaki border-radius değeri:
border:solid 5px #000;
-moz-border-radius: 20px; /* Mozilla */
-webkit-border-radius: 20px; /* Safari ve Chrome */
border-radius: 20px; /* Nesnenin köşelerini 5px ovalleştirir */


Sadece bu kodların açıklamsını yapmamın nedeni, bu anlatımın önemli kodları olmasından kaynaklanıyor. (:

Sormak istediğiniz bir kısım, kod açıklamsı vb. var ise yorum kısmından yorum bırakabilirsiniz.

Dipnot: Kitabın gerçek kapağı bu şekilde değil! (: Gerçek kitap tasarımına buraya tıklayarak bakabilirsiniz.

Kitap Tasarımı'nı İndir

Kitap Tasarımı'nı Önizle

Kitap Tasarımı‘nın kaynak dosya şifresi: www.ugurdalkiran.com

Kaynak: http://ugurdalkiran.com/css-ile-kitap-tasarimi-yapimi.html