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.

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.

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

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.

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