Experiment: Realistic Ipod with CSS3

For today’s post, I got inspired by Ahmed El Gabri and his article CSS3 Gradients Coffee cup. I figured if you could make a coffee cup, you could make just about anything with CSS3! For example, today I created a realistic Ipod just with CSS3 and no images at all.

First of all, I recommend to do this with canvas; I just used CSS3 in order to better understand the gradient property in Safari and Chrome (webkit) and have some fun during the process of learning :) .

Second of all, if you are going to check it out and want to get the full effect, I recommend Firefox, Safari or Chrome because they really support the gradients.

Lastly, feel free to read some of my other CSS3 tutorials to get a back ground on how it works!

HTML

 <div id="ipod">
    <div id="screen">
      <ul>
        <li>IPod</li>
        <li>Music</li>
        <li>Photos</li>
        <li>Extras</li>
        <li>Settings</li>
        <li>Shuffle Songs</li>
      </ul>
    </div>
    <div id="button"> <span id="menub" class="btn">Menu</span> <span id="prevb" class="btn">«</span> <span id="nextb" class="btn">»</span> <span id="playpauseb" class="btn">›</span>
      <div id="centerbutton"></div>
    </div>
  </div>

CSS

#ipod {
	margin:0 auto 0 auto;
	height:423px;
	padding-top:23px;
	width:198px;
	background:-moz-linear-gradient(left, #798382, #e5e7e6 5%, #e5e7e6 95%, #798382 100%);
	background: -webkit-gradient(linear, left top, right top, from(#798382), color-stop(0.06, #e5e7e6), color-stop(0.94, #e5e7e6), to(#798382));
	-moz-box-shadow: 0px 5px 25px gray; /* Firefox */
	-webkit-box-shadow: 0px 5px 25px gray; /* Safari and Chrome */
	box-shadow: 0 0 25px gray;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #999;
}
#screen {
	width:150px;
	height:110px;
	border:3px solid #415053;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	font-size:13px;
	background:#eaf7ff;
	font-weight:bold;
	padding:0;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
#screen ul {
	display:block;
	padding:0;
	cursor:pointer;
	margin:0;
}
 #screen ul :nth-child(1) {
 text-align:center;
}
 #screen ul :nth-child(1):hover {
 background:none;
color:black;
}
#screen li {
	list-style:none;
}
 #screen ul li:nth-child(2) {
 background:#0b91d0;
 color:#ffffff;
}
 #screen ul:hover li, #screen ul:nth-child(2) {
 background:none;
 color:#000;
}
#screen ul li:hover {
	background:#0b91d0;
	color:#ffffff;
}
#button {
	width:150px;
	height:150px;
	-moz-border-radius:150px;
	-webkit-border-radius:150px;
	border-radius:150px;
	border:1px solid gray;
	margin:70px auto;
	background:#fbfcfe;
}
#centerbutton {
	width:70px;
	height:70px;
	-moz-border-radius:70px;
	-webkit-border-radius:70px;
	border-radius:70px;
	border:1px solid gray;
	margin:40px auto;
	background:-moz-linear-gradient(100% 50%, #e2e4e3, #ebedec);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2e4e3), to(#ebedec));
}
#menub {
	position:absolute;
	margin:10px auto 0 55px;
}
#prevb {
	position:absolute;
	margin:60px auto 0 10px;
	font-size:20px;
}
#nextb {
	position:absolute;
	margin:60px auto 0 130px;
	font-size:20px;
}
#playpauseb {
	position:absolute;
	margin:120px auto 0 70px;
}
.btn {
	font-weight:bold;
	color:#b5bfc8;
}

Final demo.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182