The purpose of this site is to build an active community for UIMinds, PHP, HTML, JavaScript, Jquery Developers and UI/UX Designers to Network, Exchange ideas and talk about Code, Architecture, Innovation, and open source in general. Share the Open Source, Examples, Inspirations and best practices.

Thursday, October 13, 2016

Create a Statistics UI Panel Using HTML & CSS3

In this article, we are going to create a Statistics Panel using HTML and CSS3. We’re going to use Google Fonts for this tutorial, specifically “Roboto.”

HTML

First, let’s create our HTML structure.

We need a wrapper or a container, we’ll name it “stats-panel.” We’ll have a header, with a title and calendar views. Plus, a body which will include: three categories new users, recurring users, page views; and a data chart, where we will include an SVG image.

For this HTML structure we’re going to have the following code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<divclass="panel">

<divclass="panel-header">

<h3class="title">Statistics</h3>

<divclass="calendar-views">

<span>Day</span>

<span>Week</span>

<span>Month</span>

</div>

</div>

<divclass="panel-body">

<divclass="categories">

<divclass="category">

<span>New Users</span>

<span>1.897</span>

</div>

<divclass="category">

<span>Recurring Users</span>

<span>127</span>

</div>

<divclass="category">

<span>Page Views</span>

<span>8.648</span>

</div>

</div>

<divclass="chart">

<divclass="operating-systems">

<spanclass="ios-os">

<span></span>iOS

</span>

<spanclass="windows-os">

<span></span>Windows

</span>

<spanclass="android-os">

<span></span>Android

</span>

</div>

<!-- Place the stats numbers here -->

<!-- Place the SVG here -->

</div>

</div>

</div>

CSS

Great, we’re done with the HTML part, now let’s stick to the CSS part. First of all, let’s make sure that the body has full height and we also want our panel to be centered, for this, we’re gonna use flexbox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

* {

box-sizing: border-box;

}

html, body {

height: 100%;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

font-family: 'Roboto', sans-serif;

background: #efefef;

overflow: hidden;

}

You’ll notice that we’ll use flexbox in many situations from now on because is simple and easy to use.

Now that our panel is centered, but what panel? Let’s make it together. Let’s make it 750×400, add some rounded corners, and some shadows.

1

2

3

4

5

6

7

8

.panel {

width: 750px;

height: 400px;

background: #838CC7;

box-shadow: 1px2px3px0pxrgba(0,0,0,0.10);

border-radius: 6px;

overflow: hidden;

}

Great, divide the panel in two sections, one will be the header and one the body.

Let’s make the header first, with a title and the calendar view buttons; align them using flexbox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.panel-header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 030px;

height: 60px;

background: #fff;

}

.title {

color: #5E6977;

font-weight: 500;

}

.calendar-views span {

font-size: 14px;

font-weight: 300;

color: #BDC6CF;

padding: 6px14px;

border: 2pxsolidtransparent;

}

Let’s go forward and style the body. Here we have some user categories on the left and a data chart on the right. First, let’s give the panel body a height of 340px and make it display flex for child elements.

1

2

3

4

.panel-body {

display: flex;

height: 340px;

}

Great, on the left are three categories. We want them to be one above another, and for this we use flexbox, again. Let’s also give to each category a style.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.categories {

display: flex;

flex-direction: column;

justify-content: space-between;

flex-basis: 25%;

padding: 39px0px41px26px;

}

.category {

display: flex;

flex-direction: column;

}

.category span:first-child {

font-weight: 300;

font-size: 14px;

opacity: 0.6;

color: #fff;

margin-bottom: 6px;

}

.category span:last-child {

font-size: 32px;

font-weight: 300;

color: #fff;

}

Cool! On the right side of the body we’re going to have a chart with some data, but first let’s make a legend on the top, for users to better understand the symbols used in a chart or diagram. This will include the three mobile operating systems used in the chart.

Style the chart section and the legend by adding the following lines:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

.chart {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

flex-grow: 2;

position: relative;

}

.operating-systems {

display: flex;

justify-content: space-between;

width: 215px;

margin-top: 30px;

margin-bottom: 50px;

}

span[class*="-os"] {

font-size: 14px;

font-weight: 300;

font-size: 14px;

color: #c3c6e4;

}

span[class*="-os"] span {

width: 9px;

height: 9px;

display: inline-block;

border-radius: 50%;

margin-right: 9px;

}

.android-os span {

background: #80B354;

}

.ios-os span {

background: #F5A623;

}

.windows-os span {

background: #F8E71C;

}

This is what we’ve accomplished.

Looks great, right?

Now let’s add the SVG on the HTML inside the chart container that we’ve created:

Now, we need to add data to the chart, some stats, in a bullet format. In HTML add the following lines:

1

2

3

4

5

6

7

8

9

<divclass="android-stats">

453.67<span></span>

</div>

<divclass="ios-stats">

<span></span>453.67

</div>

<divclass="windows-stats">

<span></span>453.67

</div>

We’ll display them absolute on the chart and style them a little bit by adding the following lines of CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

div[class*="-stats"] {

position: absolute;

color: #fff;

font-size: 12px;

display: flex;

opacity: 0;

animation: showstats 0.6s linear 1.8s;

animation-fill-mode: forwards;

}

div[class*="-stats"] span {

height: 12px;

width: 12px;

margin: 07px;

background-color: #fff;

border: 2pxsolidtransparent;

border-radius: 50%;

}

.android-stats {

bottom: 155px;

right: 230px;

}

.ios-stats {

bottom: 83px;

left: 133px;

}

.windows-stats {

bottom: 133px;

right: 62px;

}

Here’s how it looks:

Not bad, right? But wouldn’t be better if we animated some elements? Let’s animate it.

First, let’s animate the calendar view buttons by giving them a border on hover:

1

2

3

4

5

.calendar-views span:hover {

border: 2pxsolid#BDC6CF;

cursor: pointer;

border-radius: 15px;

}

Now let’s make the bullet stats scale a little bit and have the legend background color on hover:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

div[class*="-stats"] span:hover {

transform: scale(1.4) rotate(0.02deg);

border: 2pxsolid#fff;

cursor: pointer;

transition: transform 0.2s ease-in-out;

}

.android-stats span:hover {

background: #80B354;

}

.ios-stats span:hover {

background: #F5A623;

}

.windows-stats span:hover {

background: #F8E71C;

}

Awesome! Let’s allow the chart to grow/scale and the lines and the stats to appear/show after that, this will happen when the user opens the page. For this we use @keyframes. So add the following lines: