A Beautiful wall clock made with only Neumorphism CSS

So I was playing around with neomorphism CSS, and it resulted in this beautiful wall clock. You are permitted to copy the code and manipulate it; please give credit where due.

HTML

Copy Code


<html>
  <head>
    <title> Akin Neumorphism CSS Wall Clock </title> 
<link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="clock">
  <div class="frame-face"></div>
  <ul class="minute-marks">
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
  <div class="digital-wrap">
    <ul class="digit-hours">
      <li>23</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>
    </ul>
    <ul class="digit-minutes">
      <li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li>
    </ul>
    <ul class="digit-seconds">
      <li>20</li><li>21</li><li>22</li><li>23</li>
      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
      <li>18</li><li>19</li>
    </ul>
  </div>
  <ul class="digits">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ul>
  <div class="hours-hand"></div>
  <div class="minutes-hand"></div>
  <div class="seconds-hand"></div>
</div>
  </body>
</html>

CSS

Copy Code


body { 
background: #f2f2f2;
 }
ul { list-style:none; margin:0; padding:0 }

#clock { font-size:1em; position:relative 
}

#clock .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}

#watch .frame-face:before {
  content:'';
  width:29.4em;
  height:29.4em;
  border-radius:14.7em;
  position:absolute;
  top:.3em; left:.3em;
  border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
   border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
   border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}

#clock .digits {
  width:30em;
  height:30em;
  border-radius:15em;
  position:absolute;
  top:0; left:50%;
  margin-left:-15em;
}
#clock .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.8em 0 0 -.8em;
  font-weight:bold;
}
#clock .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#clock .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#clock .digits li:nth-child(3) { transform:translate(8em, 0) }
#clock .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#clock .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#clock .digits li:nth-child(6) { transform:translate(0, 8em) }
#clock .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#clock .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#clock .digits li:nth-child(9) { transform:translate(-8em, 0) }
#clock .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#clock .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#clock .digits li:nth-child(12) { transform:translate(0, -8em) }
#clock .digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#121314;
}
#clock .digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
   border-radius: 23px;
background: #f2f2f2;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
 
}
@keyframes hours { to {transform:rotate(335deg)} }
#clock .hours-hand {
  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  transform:rotate(-25deg);
  animation:hours 43200s linear 0s infinite;
}
#clock .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#clock .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}
@keyframes minutes { to {transform:rotate(422deg)} }
#clock .minutes-hand {
  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  transform:rotate(62deg);
  animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#clock .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  transform:rotate(120deg);
  animation:seconds 60s steps(60, end) 0s infinite;
}
#clock .seconds-hand:after {
  content:'';
  width:1.4em;
  height:1.4em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#clock .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}
#clock .digital-wrap {
  width:9em;
  height:3em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  border-radius: 15px;
background: #000;
box-shadow:  5px 5px 7px #d0d0d0,
             -5px -5px 7px #ffffff;
}
#clock .digital-wrap ul {
  float:left;
  width:2.85em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
}
#clock .digital-wrap ul:last-child { border:none }
#clock .digital-wrap li {
  font-size:1.5em;
  line-height:2;
  letter-spacing:2px;
  text-align:center;
  position:relative;
  left:1px;
}
#clock .digit-minutes li {
  animation:dsm 3600s steps(60, end) 0s infinite;
}
#clock .digit-seconds li {
  animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm {
  to { transform:translateY(-120em) }
}

If you are my student, and you want to use this with VsCode. The CSS file you create must be named styles.css per what is in the href “hyperlink reference.”

14 Comments

Lademmi says:

at

A brilliant work, you are a genius 👏😊

Darab says:

at

Uncountable gbosa for you Agba Akin. You Sabi this thing meh

Israel says:

at

upcoming star

Nulia says:

at

Awesome work you did there. I’m replicating this!

Roni says:

at

This is so firee. Didn’t know you could use animation to do this kind of thing

Maria says:

at

Wow!
Great work!

Muhammad Bashir Abubakar says:

at

wow….It’s quite beautiful

John says:

at

Well done boss. please I’m seeing some classes and i.d’s in the css that are not in the html code, please how did you do this. please can you explain to us on twitter? I’m one of your student please.
Thanks

lummy says:

at

good work boss

David Johnson says:

at

This is sublime.

Williams says:

at

Well done boss….thank you for all you do.

ihll wizard says:

at

beautiful

Teibo Sunday says:

at

I’m one of your students, and I appreciate your works but bro, I’m really getting confused and scared about all these codes. It feels like you didn’t even teach us most of what u used here.

I really do not want to loose interest but I’m afraid am getting closer to that.
😴

Jules Leyden says:

at

Great article! We are linking to this particularly great article on our site. Keep up the good writing.

14 Comments

Leave a Reply Cancel reply