کانال ما در تلگرام
کد پوستر حرفه ای و زیبا

افکت پوستر با css به روی عکس

امروز میتوانید افکت ویژه ای به تصاویر خود دهید بطوری که عکس های شما مانند یک پوستر زیبا به نظر برسد. این کار با css صورت میگیره که جلوه زیبایی رو به تصویر میدهد. در ادامه میتوانید کد را دریافت کنید.

دمو

<style>  .w{  margin:0 auto;  margin-top:10%;  width:300px;  height:300px;  position:relative;  border:1px solid rgba(0,0,0,.1);  border-radius:1px;  background:white;  box-shadow:0 0 22px 1px rgba(0,0,0,.3);    }.w:after{  content:"";  width:70%;  left:15%;  bottom:10px;  z-index:-1;  height:40px;  position:absolute;  border-radius:150px/0px 0px 25px 25px;  box-shadow:0 3px 75px rgba(0,0,0,.6),0 6px 45px rgba(0,0,0,.6),0 0 65px rgba(0,0,0,.6);  }.glass{  width:100%;  height:100%;  position:absolute;  background:linear-gradient(135deg ,rgba(255,255,255,.8) 0px, rgba(255,255,255,.2) 200px, rgba(255,255,255,.0) 201px, rgba(255,255,255,.0) 300px);}.glass:before{  content:"";  width:100%;  height:1px;  position:absolute;  background:rgba(255,255,255,.5);  margin-top:0px;}.Artist{  text-shadow:1px 1px 2px rgba(0,0,0,.9);  z-index:1;  background:rgba(0,0,0,.6);  color:white;  display:inline-block;  position:absolute;  top:0;  left:0;  padding:5px 0px 5px 10px;  font:28px Myriad Pro;  margin-top:20px;  max-width:250px;}.Artist:before{  content:"";  position:absolute;  width:10px;  height:100%;  box-sizing:border-box;  margin-top:-5px;  margin-right:-15px;  right:0;  border-left:15px solid rgba(0,0,0,.6);  border-top:15px solid rgba(0,0,0,.6);  border-bottom:15px solid rgba(0,0,0,0);}.album{  text-shadow:1px 1px 2px rgba(0,0,0,.9);  font:11px Verdana;  background:rgba(0,0,0,.6);  color:white;  display:inline-block;  position:absolute;  bottom:0;  right:0;  max-width:250px;  margin-bottom:20px;  min-height:19px;  padding:5px 10px 5px 0px;}.album:before{  content:"";  position:absolute;  width:10px;  height:100%;  box-sizing:border-box;  margin-top:-5px;  margin-left:-15px;  left:0;  border-right:15px solid rgba(0,0,0,.6);  border-top:15px solid rgba(0,0,0,.6);  border-bottom:15px solid rgba(0,0,0,0);}</style><div class="w">  <div class="Artist">sepahna</div>  <div class="album">the best code by sepahna.ir</div>  <div class="glass"></div>  <img src="http://up.sepahna.ir/uploads/138151376441.jpg" /></div>

+5
نام:*
ایمیل:


جستجو در سایت
برند مورد علاقه شما
تقویم سایت
<    «  خرداد 1399  »    >
شیدسچپج
 12
3456789
10111213141516
17181920212223
24252627282930
31