HTML ve CSS3 kullanarak İstatistik UI Paneli Oluşturma | Web Tasarım, Kurumsal Kimlik, Logo Tasarımı, Katalog, Tuzla 
HTML ve CSS3 kullanarak İstatistik UI Paneli Oluşturma

HTML ve CSS3 kullanarak İstatistik UI Paneli Oluşturma


 
Bu yazıda, HTML ve CSS3 kullanarak bir İstatistik Paneli oluşturacağız. Bu eğitici yazı için Google Fontları, özellikle de "Roboto" yı kullanacağız.
 

HTML

 
 
Bir sarmalayıcıya veya bir container ihtiyacımız var, bunu "istatistikler paneli" olarak adlandıracağız. Başlık ve takvim görünümleri içeren bir başlık bulacağız. Aşağıdakiler üç kategori yeni kullanıcı, tekrarlayan kullanıcılar, sayfa görüntüleme ve bir SVG görüntüsü ekleyeceğimiz bir veri tablosu oluşturacağız.
 
Bu HTML yapısı için aşağıdaki kodu kullanacağız.
 
Kodlar:

 

CSS

 
 
HTML bölümünü bitirdik, şimdi CSS bölümüne devam edelim. Her şeyden önce tam yüksekliğinden emin olalım ve panelimizin merkezlenmesini istiyoruz, bunun için flexbox kullanacağız.
 
Kodlar:
 
 
 
 
Şu andan itibaren pek çok durumda flexbox'ı kullanacağımızın farkına varacaksınız, çünkü basit ve kullanımı kolaydır. Panelimizi merkezli 750 × 400 yapalım, biraz yuvarlak köşeler ve bazı gölgeler ekleyelim.
 
Kodlar:
 
 
 
Büyük, paneli iki bölüme bölün, biri üst, biri gövde olacak. Başlığı önce bir başlık ve takvim görünümü düğmeleri ile yapalım ve onları flexbox kullanarak hizalayalım.
 
Kodlar:
 
 
 
Burada soldaki bazı kullanıcı kategorileri ve sağda bir veri çizelgesi var. İlk olarak, panel gövdesine 340 piksel bir yükseklik verelim ve alt öğeler için esnek görüntü gösterebiliriz.
 
Kodlar:
 
 
 
Solda üç kategori var. Onların bir başkasının üstünde olmasını istiyoruz ve bunun için yine flexbox kullanıyoruz. Ayrıca her kategoriye bir stil verelim.
 
Kodlar:
 
 
 
Sağ tarafında, bazı verilere sahip bir grafiğe sahip olacağız, ancak önce kullanıcıların bir grafik veya diyagramda kullanılan sembolleri daha iyi anlamaları için yapalım. Buna, grafikte kullanılan üç mobil işletim sistemi dahildir.
 
Aşağıdaki satırları ekleyerek grafik bölümünü ve açıklamayı stil oluşturun:
 
 
Kodlar:
 
 
 
 
 
 
Şimdi SVG'yi, oluşturduğumuz grafik konteyneri içindeki HTML'ye ekleyelim:
 
Kodlar:
 
 
 
İşte böyle görünüyor:
 
 
 
 
Şimdi, grafiğe veri eklemeliyiz, HTML'de aşağıdaki satırları ekleyin:
 
Kodlar:
 
 
 
Onları mutlak grafikte göstereceğiz ve aşağıdaki CSS satırlarını ekleyerek biraz stil edeceğiz:
 
Kodlar:
 
 
 
İşte görünüyor:
 
 
 
Ancak bazı elementleri canlandırdığımızda daha iyi görünecektir. Animasyon yapalım ve önce, fareyle üzerine bir kenarlık vererek takvim görünüm düğmelerine animasyon uygulayalım:
 
Kodlar:
 
 
 
Şimdi madde işareti istatistiklerini biraz ölçeklendirelim ve üzerine efsanenin arka plan rengini koyalım:
 
Kodlar:
 
 
 
Grafiğin büyümesine, çizgilerin ve istatistiklerin bundan sonra gösterilmesini sağlamak için kullanıcıların sayfayı açtığında gerçekleşmesine izin verelim. Bunun için @keyframes kullanıyoruz. Bu nedenle aşağıdaki satırları ekleyin:
 
Kodlar:
 
 
 
 
 
 
 
 
 YUKARI