Uygulama – CSS ile havalı bir kutu

Bu değerlendirmede, göz alıcı bir görünüme sahip kutular oluşturma konusunda biraz daha pratik yapacaksınız.

İlişkili olduğu konular : ders

Bu değerlendirmede, göz alıcı bir görünüme sahip kutular oluşturma konusunda biraz daha pratik yapacaksınız.

Başlangıç ​​noktası

Bu değerlendirmeyi başlatmak için şunları yapmalısınız:

  • HTML ve CSS dosyalarının yerel kopyalarını oluşturun. Bu dosyaları yeni bir dizinde index.html ve style.css olarak kaydedin.

Proje tanıtımı

Bu değerlendirmedeki görev havalı, süslü bir kutu oluşturmak ve CSS ile yaşayabileceğimiz eğlenceyi keşfetmek.

Genel görevler

  • CSS’yi HTML’ye uygulayın.

Kutuyu şekillendirme

Sağlanan <p> öğesine aşağıdaki stilleri uygulamanızı istiyoruz:

  • Büyük bir kutu için makul bir genişlik; örneğin 200 piksel.
  • Metni dikey olarak ortalayan büyük bir kutu için makul bir yükseklik.
  • Ortalanmış metin.
  • Yazı tipi boyutunda hafif bir artış, yaklaşık 17-18 piksel hesaplanmış stil. rem kullanın. Değeri nasıl hesapladığınız hakkında bir yorum yazın.
  • Tasarım için bir temel renk. Kutuya bu rengi arka plan rengi olarak verin.
  • Metin için aynı renk; siyah metin gölgesi kullanarak okunabilir hale getirin.
  • Oldukça ince bir kenarlık yarıçapı.
  • Temel renge benzer bir renge sahip, ancak biraz daha koyu bir gölgeye sahip 1 piksellik düz kenarlık.
  • Sağ alt köşeye doğru giden doğrusal yarı saydam siyah bir gradyan.
  • Çoklu kutu gölgeleri. Kutunun sayfadan biraz kalkık görünmesi için standart bir kutu gölgesi verin. Diğer gölgeler kutunun güzel yükseltilmiş 3D görünümünü eklemek için iç kutu gölgeleri olmalıdır – sol üstte yarı saydam beyaz bir gölge ve sağ altta yarı saydam siyah bir gölge.

Örnek

Aşağıdaki ekran görüntüsü, bitmiş tasarımın nasıl görünebileceğinin bir örneğini göstermektedir:

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

konular

Okumaya devam et!
Sonraki Yazı: CSS’de gelişmiş şekillendirme efektleri

Bu makale, kutu gölgeleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir dizi hileyi tanıtacak Kutu gölgeleri box-shadow bir öğenin kutusuna alt gölge uygulamanıza olanak tanır.

Normal Akış

Bu makalede, normal akışı, yani web sayfası öğelerinin düzenlerini değiştirmediyseniz kendilerini nasıl sıraladığını, inceleyeceğiz.

CSS Flexbox: Temel Kavramlar

Flexbox nedir? Genellikle flexbox olarak adlandırılan Esnek Kutu Modülü, bir düzen modeli sunarak öğeler arasında alan dağılımı ve güçlü hizalama yetenekleri içeren bir yöntem olarak tasarlanmıştır.

Sadece CSS ile bir “select” açılır listesini nasıl biçimlendiririz?

Sorunumuz şöyle, herhangi bir JavaScript olmadan, mümkün olduğunca bir forma stil vermem gerekiyor.

Uygulama – CSS ile havalı bir kutu

Bu değerlendirmede, göz alıcı bir görünüme sahip kutular oluşturma konusunda biraz daha pratik yapacaksınız.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

koddla
Tema Mundana by WowThemes.net.