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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>PS4 Download UI with Pure CSS</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="ps4-download-ui-with-pure-css">PS4 Download UI with Pure CSS</h1>
<p>2021-06-20</p>
<p>Overall, I’m fairly impressed with the user interface design of Sony’s PS4 system OS. It’s minimal and keeps the content front and center. Even with it’s sometimes spotty performance hiccups, I’ve come to enjoy interacting with it.</p>
<p>One of the key UI items I’ve always been a fan of is the download progress view under the <code>Notifications</code> settings. So I figured I’d try my hand at recreating this with pure CSS. Here is the final result:</p>
<p><img src="/public/images/ps4-loading.png" alt="PS4 loading screen bar" /></p>
<p><a href="https://codepen.io/bradleytaunt/pen/qBroORG">Live CodePen Example</a></p>
<p>Although I’ve added some of my own improvements (typography spacing, tweaks to the progress bar animation) - the concept it still pretty close to the original.</p>
<p>But enough chit-chat, let’s walkthrough how to make it!</p>
<h2 id="the-html">The HTML</h2>
<p>As with most of my demos, the HTML is very minimal and straightforward. The PS4 system OS download view needs to show the following:</p>
<ol>
<li>The game’s title</li>
<li>Full game size, amount downloaded and time remaining</li>
<li>Visual progress bar</li>
</ol>
<p>So we will place the game’s title inside our <code>h2</code> with a class of <code>title</code> (shocking, I know). The details about game size, downloaded amount and time remaining gets placed under a parent <code>div</code> with an accompanying <code>details</code> class. Finally, we create our progress bar by including a parent <code>div</code> with a class of <code>progress</code> that contains a child <code>div</code> with a class of <code>inner-progress</code>.</p>
<p>Pretty clean and easy to understand.</p>
<pre><code><div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/PlayStation_logo.svg" alt="PS4" class="logo">
<h2 class="title">Detroit: Become Human</h2>
<div class="details">
<p>Update File</p>
<p>13.45/17.50 GB (21 Minutes Left)</p>
</div>
<div class="progress">
<div class="inner-progress"></div>
</div>
</div>
</code></pre>
<h2 id="the-css">The CSS</h2>
<p>Now it’s time to utilize all those classes in the HTML above to craft our PS4 UI recreation. I’ll break this section down into digestible chunks to avoid overwhelming you by vomiting out a bunch of CSS spaghetti.</p>
<p>First we’ll add a bunch of QOL improvements to help better showcase the demo (adding custom fonts, center content etc.).</p>
<p>This part is completely <em>optional</em>:</p>
<pre><code>/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400&display=swap');
/* Gradient background styling, height overrides */
body {
background: linear-gradient(#226AB6 0%, #144E8A 100%) no-repeat;
color: white;
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
height: 100vh;
}
/* Wrapper to center content */
.wrapper {
margin: 0 auto;
max-width: 800px;
padding: 4rem 0 0;
}
/* Optional PS4 logo */
.logo {
display: block;
filter: invert(1);
margin: 0 0 2rem 0;
opacity: 0.5;
width: 60px;
}
</code></pre>
<p>Now for the styling that <em>actually matters</em>. First we will style the game’s title and accompanying details (<code>flexbox</code> to the rescue again!):</p>
<pre><code>h2.title {
font-weight: 400;
margin: 0;
}
.details {
display: flex;
justify-content: space-between;
margin: 0.2rem 0 0;
}
.details p {
margin: 0;
}
</code></pre>
<p>Not a whole lot of code to get things looking proper, eh? Next we move on to the progress bar. This is <em>slightly</em> more interesting since we are going to utilize the <code>before</code> pseudo element - which sounds more complex than it actually is. Pay close attention to the pseudo element and how it calls the <code>progress-bar-shine</code> animation - more on that later.</p>
<pre><code>.progress {
background: #226AB6;
border: 1px solid white;
height: 15px;
margin: 2rem 0 0;
position: relative;
width: 100%;
}
.progress:before {
animation: progress-bar-shine 2.5s infinite;
background: linear-gradient(to left, white 0%, transparent 100%);
border-radius: 10px;
content:'';
filter: blur(8px);
height: 100%;
opacity: 0.8;
position: absolute;
transform:translateX(0);
width: 50px;
}
.inner-progress {
background: white;
height: 100%;
opacity: 0.6;
width: 450px;
}
</code></pre>
<p>Almost finished! We just need to animate that <code>before</code> pseudo element with a simple <code>keyframes</code> at-rule:</p>
<pre><code>@keyframes progress-bar-shine {
to {
transform:translateX(450px);
opacity:0;
}
}
</code></pre>
<h2 id="wrapping-up">Wrapping Up</h2>
<p>Although far from perfect, this experiment still explores what can be created (or in this case, <em>re</em>created) in the browser using just pure CSS. Remember, you don’t have to reach for JavaScript just because you can!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
