hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



سلايد شو css3 فقط
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: سلايد شو css3 فقط




حصرياً وبدون استخدام الجيكويري او الجافا سكربت اقدم لكم سلايدشو باستخدام css3 , html فقط

للمعاينة المباشرة

[اضغط هنا]

ناتي الى الاكواد وكالعادة بدون اي مقابل Wink

كود الصفحة كاملة
الكود:

<style type="text/css"">

body{
  background: #ccc;
  width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.slider{
  background: #222 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-1.jpg);
  position: relative;
  width: 900px;
  height: 300px;
  cursor: pointer;
  overflow: hidden;
  border: solid 7px #111;
}

.slides{
  width: 800px;
  height: 300px;
  float: left;
  position: absolute;
  transition: margin .3s linear;
}

.slides:nth-child(1){
  background: #222 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-10.jpg);
 
}

.slides:nth-child(2){
  background: #333 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-5.jpg);
  margin-left: 150px;
}

.slides:nth-child(3){
  background: #444 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-7.jpg);
  margin-left: 300px;
}

.slides:nth-child(4){
  background: #555 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-6.jpg);
  margin-left: 450px;
}

.slides:nth-child(5){
  background: #666 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-2.jpg);
  margin-left: 600px;
}

.slides:nth-child(6){
  background: #777 url(http://azik.me/wp-content/uploads/2012/10/nature-q-c-900-300-1.jpg);
  margin-left: 750px;
}

.slides:hover{
  margin: 0 50px 0 50px;
  position: absolute;
  z-index: 99998;
  transition: .1s linear;
}

.slides:hover .title{
  transform: translateY(-140px);
  transition: .5s linear;
}

.title{
  background: rgba(255, 255, 255, .7);
  margin: 30px;
  padding: 20px;
  border-radius: 5px;
  position: absolute;
  bottom: -150px;
}

q{
  font-size: 16px;
  font-style: italic;
}

.author{
  margin: 0 0 0 20px;
}

::selection{
  background: #222;
  color: #fff;
}

.github img{
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  z-index: 99999;
}

h3{
  font-family: "Courier";
  color: #111;
  text-align: right;
  position: absolute;
  bottom: -10px;
  right: 10px;
}

h3 a{
  color: #111;
  text-decoration: none;
}

</style><div class="slider">
  <div class="slides">
    <p class="title"><q>Come forth into the light of things, let nature be your teacher.</q>
      <span class="author">William Wordsworth </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>Look deep into nature, and then you will understand everything better.</q>
      <span class="author">Albert Einstein </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>A bird doesn't sing because it has an answer, it sings because it has a song.</q>
      <span class="author">Lou Holtz </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>The butterfly counts not months but moments, and has time enough. </q>
      <span class="author">Rabindranath Tagore </span>
    </p> 
  </div>
  <div class="slides">
    <p class="title"><q>There are always flowers for those who want to see them.</q>
      <span class="author">Henri Matisse </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>Green is the prime color of the world, and that from which its loveliness arises.</q>
      <span class="author">Pedro Calderon</span>
    </p>
  </div>
</div>

<h3>follow me
  <a href="https://twitter.com/HDagash" target="_blank">@HDagash</a>
</h3>

ما عليك هو النسخ واللصق اينما احببت ظهوره في موقعك
نعود لفنجان القهوة kahow
في امان الله احبتي

و




كن بالقرب :
follow me @HDagash


التعليقات
لا يوجد حالياً أي تعليق

تفضّل شارك بتعليقك

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع :: عالم الاكواد :: اكواد الـ html واكواد css موحدة لجميع النسخ-