html-css

خدمت عزیزان بلاگرعرض میشودکه
+درهیچکدام ازقالب هاازکدهای اسکریپت وفلش وکدهایی که باخریدامکانات اختیاری بازمیشوند
استفاده نشده است
باتشکر

آخرین نظرات
  • ۲۰ شهریور ۹۶، ۱۹:۱۲ - یــاسـᓄـךּ ●‿●
    :)
  • ۱۷ تیر ۹۶، ۱۶:۱۶ - تنها ...
    تشکر
  • ۱۶ تیر ۹۶، ۲۲:۵۶ - تنها ...
    ممنون
چهارشنبه, ۳۱ خرداد ۱۳۹۶، ۱۰:۵۷ ب.ظ

اسلایدر عکس کشویی به صورت html5 و css3

چهارشنبه, ۳۱ خرداد ۱۳۹۶، ۱۰:۵۷ ب.ظ
اسلایدرکشویی بدون جاوااسکریپت

این اسلایدر کاملا با html5 و css3 ساخته شده و به هیچ عنوان java script و یا … به کار نرفته است . ضمنا این اسلایدر قابلیت درج توضیح مختصر برای هر عکس را دارا می باشد .

کدhtml

کدcss
.vms-sliding-gallery *{
margin:0;
padding:0;
border:none;
outline:none;
}
.vms-sliding-gallery{
width:980px;
height:350px;
overflow:hidden;
}
.vms-sliding-gallery ul{
width:100%;
height:100%;	
}
.vms-sliding-gallery ul li{
width:20%;
height:100%;
list-style-type:none;
float:left;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
position:relative;
}
.vms-sliding-gallery ul li img{
position:absolute;
z-index:1;
border-left:1px solid #fff;
}
.vms-sliding-gallery ul li figcaption{
position:absolute;
z-index:2;
bottom:5px;
left:5px;
width:80%;
height:30px;
background-color:rgba(0,0,0,0.7);
color:#fff;	
opacity:0;
text-align:center;
font-family:tahoma;
padding-top:5px;
transition:all 1s;
}
.vms-sliding-gallery ul li:hover figcaption{
opacity:1;
}	
.vms-sliding-gallery ul:hover li{
width:40px;
}
.vms-sliding-gallery ul li:hover{
width:820px;
}
موافقین ۴ مخالفین ۰ ۹۶/۰۳/۳۱
ali ghaleb

نظرات (۶)

تشککککرررر
۰۴ تیر ۹۶ ، ۲۲:۵۳ Mohsen Farajollahi シ
دمت گرم داداش :) خیلی عالی هست که آموزش مقدمات وب رو تو وبلاگ خودت برای کاربرای بیان میگذاری... ممنون ازت
درود . . .
۱۴ تیر ۹۶ ، ۱۰:۲۴ محمد رضا ..
به نام خدا
اگه تونستید بنده رو حتما دنبال کنید
بعد 
بک اسمس به سایتم دهید
که فالوتان کنم
با تشکر
^^^^^^^^^^^
ممنون
خسته نباشید! :)
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی