İçindekiler
Yemek tarifleriyle ilgili her şeyi yapan siteler veya web uygulamaları, yalnızca çekici değil, aynı zamanda kullanışlı, arkadaş canlısı ve kullanıcıların söz konusu tariflerde gösterilen talimatları yerine getirmesine olanak tanıyan bir tasarıma sahip olmalıdır.Özümüz tam olarak buysa, o zaman sitemizde veya web uygulamamızda yayınlanan tariflerin her biri için iyi tasarımlar yapmalıyız ve tasarımda saatlere ve saatlere ihtiyacımız olduğunu düşünüyor olsak da, gerçek şu ki bazı stillerle CSS ve iyi planlanmış bir yapı ile ihtiyacımız olanı elde edebiliriz.
HTML Kodu
Bizim HTML Oldukça basit olacak, style.css dosyamızı başlığımıza ekleyeceğiz ve onu bir makale etiketi ile bilgi bloğunu tanımlamanın yanı sıra bilgileri listeler halinde düzenleyeceğimiz bir dizi div'de yapılandıracağız:
kırmızı kadife
Tatlı
- 1
- 45 dakika
- Zorluk
- 560
Kırmızı kadife kek -İngilizce: Kırmızı kadife kek- koyu kırmızı, parlak kırmızı veya kırmızı-kahverengi renkli bir pastadır.
İçindekiler: Süt, un, yumurta, vanilya, renklendirici, şeker, tereyağı.
Buraya ayrıca her birinizin ihtiyacınıza göre değiştireceğiniz tarifimiz için görseli ekliyoruz bakalım .css dosyamız neler taşıyacak.CSS kodu
Yapımızı it .html içinde tanımlayarak sadece stillerimizi oluşturmamız gerekiyor. Bunun için olarak bilinen bazı özellikleri kullanacağız. kenar boşluğu, dolgu ve pozisyonlar. Buna ek olarak, gradyanlar veya gradyanlar gibi özellikleri kullanacağız. kutu boyutu, görelim:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; kutu boyutlandırma: kenarlık kutusu; } html {yükseklik: %100; } gövde {arka plan rengi: # 57abf2; arka plan görüntüsü: -webkit-doğrusal-gradyan (-225deg, # 19d3d1 %5, # 57abf2); arka plan görüntüsü: doğrusal gradyan (-45deg, # 19d3d1 %5, # 57abf2); yazı tipi ailesi: 'Açık Sans', sans-serif; yazı tipi boyutu: 1rem; } img {maks-genişlik: %100; yükseklik: otomatik; dikey hizalama: alt; } .recipe-card {arka plan: #fff; kenar boşluğu: 4em otomatik; genişlik: %90; maksimum genişlik: 496 piksel; sol üst kenarlık yarıçapı: 5 piksel; sağ üst kenarlık yarıçapı: 5 piksel; sınır-alt-sol-yarıçap: 5 piksel; sınır-sağ-yarıçap: 5 piksel; } Buna ek olarak, belgemizin alt öğelerinin özelliklerini kullanacağız ve tarifimizde kullanacağımız simgeler için bir .svg kullanacağız ve bunları HTML'imize yerleştireceğiz:
.recipe-card .icon {ekran: satır içi; ekran: satır içi blok; arka plan resmi: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); arka plan tekrarı: tekrar yok; } .tarif-kartı .icon-kalori, .tarif-kartı .icon-kalori \: normal {arka plan-konumu: 0 0; genişlik: 16 piksel; yükseklik: 19 piksel; } .recipe-card .icon-clock, .recipe-card .icon-clock \: normal {background-position: 0 -19px; genişlik: 20 piksel; yükseklik: 20 piksel; } .recipe-card .icon-level, .recipe-card .icon-level \: normal {background-position: 0 -39px; genişlik: 16 piksel; yükseklik: 19 piksel; } .recipe-card .icon-play, .recipe-card .icon-play \: normal {background-position: 0 -58px; genişlik: 21 piksel; yükseklik: 26 piksel; } .recipe-card .icon-users, .recipe-card .icon-users \: normal {background-position: 0 -84px; genişlik: 18 piksel; yükseklik: 18 piksel; }Bu yapıldıktan sonra, tarifimizin nasıl görüneceğinin nihai sonucunu görelim.
BÜYÜT
yemek tarifi.zip 91.82K 415 İndirilenlerBu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz. 
