Mintik posted
3 year ago

Font Awesome ile hazırlanmış mp3 player tasarımı

mp3 player
İlk bakışta bunun bir mp3 player  olduğunu zannedebilirsiniz. Ama tahmin ettiğiniz gibi bu bir mp3 player örneği değil maalesef. Tabi ki biraz uğraşarak html5 audio elementi için kullanabilirsiniz. Yalnız dediğim gibi bir mp3 çalar değil. Tasarım açısından oldukça başarılı ve güzel görünen bir örnek. Kendinize  göre  düzenleyip değişik  uygulamalarda kullanmak isterseniz  bence bin bir türlü değişik tasarım örneği yapabilirsiniz bununla.

Bir online  mağazanız var ve mouse ürün resminin  üzerine geldiği anda ürün resmi kaysın ve arkasından fiyat etiketi yada sepete ekle bölümleri olsun istiyorsanız bu örneği özelleştirerek kendi sitenize uygun hale getirebilirsiniz. Sadece online alış veriş siteleri için kullanılacak diye bir kaide yok. Aklıma ilk online mağazalar geldiği için böyle söyledim. Kişisel blog sitenize de  uyarlayabilirsiniz. Mouse üzerine gelince resim kaysın arkasında devamını oku linki çıksın yada sosyal paylaşım ikonları çıksın gibi tasarımlarda da kullanabilirsiniz.

Jean Baptiste tarafından hazırlanmış olan bu örnekte Css3 ve jQuery kullanılmış. Mp3 player ikonları da Font Awesome’den alınmış. Css3 ile  bu örnekte perspective değeri kullanılmış. Mouse cd resminin üzerine geldiğinde 3D şeklinde katlanması için. Webkit destekli tarayıcılarda sorunsuz bir şekilde çalışıyor. Webkit desteklemeyen tarayıcılar da ise Css margin kullanılmış cd resmi sola kaysın diye. Bildiğiniz  gibi en dandik tarayıcılar bile margin destekliyor.

Mp3 playerdeki butonlara tıkladığınızda adeta gerçekmiş gibi butonlar içeri batıyor ve duruyor. Tekrar tıkladığınızda butanlar eski haline geliyor. Tıklandığında butonun içeride basılı halde durmasını  sağlamak için de jQuery Toggle kullanılmış. Bu sayede jQuery Togglenin ne olduğunu bilmeyenler öğrenmiş oldular.

 Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js Css dosya  adresleri : 

	<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/css/font-awesome.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

 JavaScript : 

	<script>
	$(function(){
		$('a.btn1').click(function(){
			$('a.btn1').toggleClass('active');
		});
		$('a.btn2').click(function(){
			$('a.btn2').toggleClass('active');
		});
		$('a.btn3').click(function(){
			$('a.btn3').toggleClass('active');
		});
		$('a.btn4').click(function(){
			$('a.btn4').toggleClass('active');
		});
	});
	</script>

 Css : 

body {
  background: #3C404B;
  font-family: 'Lato';
  text-align: center;
}
hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
h3 {
  text-align: center;
  color: #FFF;
  text-shadow: -1px 0 0 #4d4d4d;
}
span {
  color: #FFF;
  text-shadow: -1px 0 0 #4d4d4d;
  padding: 5px;
  line-height: 200px;
}
.player .block1,
.player .block2 {
  background: url('img/cd.jpg');
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.player,
.playerslide {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}
.player:before,
.playerslide:before {
  content: '';
  box-shadow: 0px 0 20px rgba(0, 0, 0, 0.6);
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  z-index: 1;
}
.player [class*="block"],
.playerslide [class*="block"] {
  -webkit-transition: all .5s;
  display: inline-block;
  width: 50%;
  height: 100%;
  -webkit-transform: perspective(500) rotatey(0deg);
  -moz-transform: perspective(500) rotatey(0deg);
  -o-transform: perspective(500) rotatey(0deg);
  -ms-transform: perspective(500) rotatey(0deg);
  transform: perspective(500) rotatey(0deg);
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  -o-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}
.player .block1,
.playerslide .block1 {
  position: relative;
  z-index: 4;
  -webkit-background-size: 200% 100%;
  -moz-background-size: 200% 100%;
  background-size: 200% 100%;
}
.player .block2,
.playerslide .block2 {
  position: relative;
  z-index: 3;
  background-size: 200% 100%;
  background-position: right;
  -webkit-transition: all .5s;
}
.player .block2:after,
.playerslide .block2:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(to right, rgba(63, 63, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -moz-linear-gradient(to right, rgba(63, 63, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(to right, rgba(63, 63, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(to right, rgba(63, 63, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(63, 63, 63, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.player:hover .block2:after,
.playerslide:hover .block2:after {
  opacity: 1;
}
.player:hover .block2,
.playerslide:hover .block2 {
  -webkit-transform: perspective(500) rotatey(-65deg);
  -moz-transform: perspective(500) rotatey(-65deg);
  -o-transform: perspective(500) rotatey(-65deg);
  -ms-transform: perspective(500) rotatey(-65deg);
  transform: perspective(500) rotatey(-65deg);
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3);
  -webkit-background-size: 200% 100%;
  -moz-background-size: 200% 100%;
  background-size: 200% 100%;
  background-position: right;
  z-index: 4;
}
.player div,
.playerslide div {
  vertical-align: top;
}
.player .bplayer,
.playerslide .bplayer {
  float: right;
  top: -200px;
  display: inline-block;
  width: 25%;
  height: 100%;
  position: relative;
  z-index: 2;
  background: #E5E5E5;
}
.player .bplayer a,
.playerslide .bplayer a {
  display: block;
  width: 100%;
  text-align: center;
  height: 50px;
  padding-top: 30%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 100%;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 0 #FFF;
  background: -webkit-linear-gradient(to right, rgba(224, 224, 224, 0.4) 0%, rgba(135, 135, 135, 0.4) 100%);
  background: -moz-linear-gradient(to right, rgba(224, 224, 224, 0.4) 0%, rgba(135, 135, 135, 0.4) 100%);
  background: -o-linear-gradient(to right, rgba(224, 224, 224, 0.4) 0%, rgba(135, 135, 135, 0.4) 100%);
  background: -ms-linear-gradient(to right, rgba(224, 224, 224, 0.4) 0%, rgba(135, 135, 135, 0.4) 100%);
  background: linear-gradient(to right, rgba(224, 224, 224, 0.4) 0%, rgba(135, 135, 135, 0.4) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(155, 155, 155, 0.5);
}
.player .bplayer a:hover,
.playerslide .bplayer a:hover {
  background: -webkit-linear-gradient(to right, rgba(224, 224, 224, 0.6) 0%, rgba(135, 135, 135, 0.6) 100%);
  background: -moz-linear-gradient(to right, rgba(224, 224, 224, 0.6) 0%, rgba(135, 135, 135, 0.6) 100%);
  background: -o-linear-gradient(to right, rgba(224, 224, 224, 0.6) 0%, rgba(135, 135, 135, 0.6) 100%);
  background: -ms-linear-gradient(to right, rgba(224, 224, 224, 0.6) 0%, rgba(135, 135, 135, 0.6) 100%);
  background: linear-gradient(to right, rgba(224, 224, 224, 0.6) 0%, rgba(135, 135, 135, 0.6) 100%);
  color: rgba(0, 0, 0, 0.5);
}
.player .bplayer a:active,
.playerslide .bplayer a:active,
.player .bplayer a.active,
.playerslide .bplayer a.active {
  -webkit-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #1a1a1a;
  background: -webkit-linear-gradient(to right, rgba(224, 224, 224, 0.8) 0%, rgba(135, 135, 135, 0.8) 100%);
  background: -moz-linear-gradient(to right, rgba(224, 224, 224, 0.8) 0%, rgba(135, 135, 135, 0.8) 100%);
  background: -o-linear-gradient(to right, rgba(224, 224, 224, 0.8) 0%, rgba(135, 135, 135, 0.8) 100%);
  background: -ms-linear-gradient(to right, rgba(224, 224, 224, 0.8) 0%, rgba(135, 135, 135, 0.8) 100%);
  background: linear-gradient(to right, rgba(224, 224, 224, 0.8) 0%, rgba(135, 135, 135, 0.8) 100%);
  border-top: 1px solid #cccccc;
  border-bottom: 0;
}
.player .bplayer a:active:first-child,
.playerslide .bplayer a:active:first-child,
.player .bplayer a.active:first-child,
.playerslide .bplayer a.active:first-child {
  border: 0;
}
.player.rounded:before,
.playerslide.rounded:before {
  border-radius: 10px;
}
.player.rounded .block1,
.playerslide.rounded .block1 {
  border-radius: 10px 0 0 10px;
}
.player.rounded .block2,
.playerslide.rounded .block2 {
  border-radius: 0 10px 10px 0;
}
.player.rounded .bplayer,
.playerslide.rounded .bplayer {
  border-radius: 0 12px 12px 0;
  overflow: hidden;
}
.player.rounded .bplayer a:first-child,
.playerslide.rounded .bplayer a:first-child {
  border-radius: 0 10px 0 0;
}
.player.rounded .bplayer a:last-child,
.playerslide.rounded .bplayer a:last-child {
  border-radius: 0 0 10px 0;
}
.player.rounded .progress,
.playerslide.rounded .progress {
  width: 92%;
  margin-left: 4%;
  border-radius: 0 0 10px 10px;
}
.player.rounded .progress .bar,
.playerslide.rounded .progress .bar {
  border-radius: 0 0 10px 10px;
}
.player.flat a,
.playerslide.flat a {
  background: rgba(224, 224, 224, 0.4);
}
.player.flat a:hover,
.playerslide.flat a:hover {
  background: rgba(224, 224, 224, 0.6);
}
.player.flat a:active,
.playerslide.flat a:active,
.player.flat a.active,
.playerslide.flat a.active {
  background: rgba(224, 224, 224, 0.8);
}
.player .progress,
.playerslide .progress {
  width: 100%;
  height: 3px;
  position: relative;
  box-shadow: inset 0 0 10px #000;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.player .progress.active,
.playerslide .progress.active {
  opacity: 1;
}
.player .progress .bar,
.playerslide .progress .bar {
  height: 100%;
  background: #cc0000;
}
.playerslide {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}
.playerslide .block1 {
  -webkit-transition: all .5s;
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 4;
  background: url('img/cd.jpg');
  background-size: 100%;
  box-shadow: 0px 0 20px rgba(0, 0, 0, 0.6);
}
.playerslide:hover .block1 {
  left: -25%;
}
.playerslide div {
  vertical-align: top;
}
.playerslide.rounded .block1 {
  border-radius: 10px;
}
.playerslide.rounded:hover .block1 {
  border-radius: 10px 0 0 10px;
}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

WebKit Tarayıcıları İçin

<body>
	<hr>
	<h3>-Webkit-</h3>
	<hr>
	<div class="player"><!--
	 --><div class="block1"><span>normal</span></div><!--
	 --><div class="block2"></div><!-- 
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
 	<div class="player rounded"><!--
	 --><div class="block1"><span>rounded</span></div><!--
	 --><div class="block2"></div><!-- 
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
  	<div class="player flat"><!--
	 --><div class="block1"><span>flat</span></div><!--
	 --><div class="block2"></div><!-- 
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
   	<div class="player flat rounded"><!--
	 --><div class="block1"><span>flat rounded</span></div><!--
	 --><div class="block2"></div><!-- 
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div><hr><hr>
	<h3>Cross-Browser</h3>
	<hr>
		<div class="playerslide"><!--
	 --><div class="block1"><span>slide</span></div><!--
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
	<div class="playerslide rounded"><!--
	 --><div class="block1"><span>rounded</span></div><!--
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
  	<div class="playerslide flat"><!--
	 --><div class="block1"><span>flat</span></div><!-- 
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
   	<div class="playerslide flat rounded"><!--
	 --><div class="block1"><span>flat rounded</span></div><!--
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="fa fa-play"></i></a>
			<a href="#" class="btn2"><i class="fa fa-stop"></i></a>
			<a href="#" class="btn3"><i class="fa fa-pause"></i></a>
			<a href="#" class="btn4"><i class="fa fa-share-square-o"></i></a>
		</div><!--
 --></div>
</body>

 Bütün Tarayıcılar İçin

		<div class="playerslide"><!--
	 --><div class="block1"><span>slide</span></div><!--
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="icon-play"></i></a>
			<a href="#" class="btn2"><i class="icon-stop"></i></a>
			<a href="#" class="btn3"><i class="icon-pause"></i></a>
			<a href="#" class="btn4"><i class="icon-share-alt"></i></a>
		</div><!--
 --></div>
	<div class="playerslide rounded"><!--
	 --><div class="block1"><span>rounded</span></div><!--
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="icon-play"></i></a>
			<a href="#" class="btn2"><i class="icon-stop"></i></a>
			<a href="#" class="btn3"><i class="icon-pause"></i></a>
			<a href="#" class="btn4"><i class="icon-share-alt"></i></a>
		</div><!--
 --></div>
  	<div class="playerslide flat"><!--
	 --><div class="block1"><span>flat</span></div><!-- 
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="icon-play"></i></a>
			<a href="#" class="btn2"><i class="icon-stop"></i></a>
			<a href="#" class="btn3"><i class="icon-pause"></i></a>
			<a href="#" class="btn4"><i class="icon-share-alt"></i></a>
		</div><!--
 --></div>
   	<div class="playerslide flat rounded"><!--
	 --><div class="block1"><span>flat rounded</span></div><!--
	 --><div class="bplayer">
			<a href="#" class="btn1"><i class="icon-play"></i></a>
			<a href="#" class="btn2"><i class="icon-stop"></i></a>
			<a href="#" class="btn3"><i class="icon-pause"></i></a>
			<a href="#" class="btn4"><i class="icon-share-alt"></i></a>
		</div><!--
 --></div>

 

Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail
Continue with Google
Continue with X