Scurtă descriere


Site-ul artweber oferă resurse pentru PhotoShop cum ar fi psd-uri ( Bannere , Logo , Avatare , și coperte pentru Facebook , YouTube ) Iar pentru a-ți realiza propriile creații oferim resurse PhotoShop ( Font-uri , Gradient-uri , Wallpapere , Stil-uri și multe altele ) și pentru site-uri oferim diferite Script-uri , Index-uri.

1661
Resurse
1607
Utilizatori
78
Comentarii
5
Ani online

Forumul ArtWeber Cerere Lucrare Inregistreaza-te Resurse Premium Cum să Downloadez
Meniu
5 Resurse întâmplătoare
    1368

    PSD - No-Avatar..

    119

    Password Sharing..

    1002

    PSD - Avatar..

    1269

    Find-Link 0.5.0..

    109

    Index -..

Tutoriale
    765

    2 variante de buton Back to top

    766

    Zăpadă cu ajutorul CSS3 animație

    690

    Modificați culoarea barei de adrese din browserul Google Chrome Mobil

    958

    Două tonuri Photoshop Tutorial

    1310

    Cum faci redirect HTTP la HTTPS

Iti place ceea ce facem
Da
Nu
Nu-ma intereseaza
Parteneri
Rețele sociale

Cine este conectat

2 vizitatori pe site. dintre ei:
Oaspeți2
Lista utilizatorilor
yumkakatu A fost online 29 minute în urmă
qpro A fost online 12 ore în urmă
botikaa2231 A fost online 14 ore în urmă

Premium
Fii și tu mai deosebit
0

Slideshow CSS

Gregory Web Master » HTML & CSS
Slideshow CSS


Un slideshow în css , cu diferite efecte.

HTML
<div class="block image1">
  <div class="layer"></div>
  <div class="p-container">
     <p class="img-p"> Description 1 </p>
   </div>
</div>
 
<div class="block image2">
  <div class="layer"></div>
  <div class="p-container">
     <p class="img-p"> Description 2 </p>
   </div>
</div>
 
<div class="block image3">
  <div class="layer"></div>
  <div class="p-container">
     <p class="img-p"> Description 3 </p>
   </div>
</div>


CSS

.block {
  width: 10%;
  height: 300px;
  display: inline-block;
  background-color: #E83F6F;
  cursor: pointer;
  position: relative;
  -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  -o-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  transition: width .5s ease-in-out, background-color .5s ease-in-out;
  text-align: center;
}
 
.block:hover {
  background-color: #2274A5;
  width: 30%;
  -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  -o-transition: width .5s ease-in-out, background-color .5s ease-in-out;
  transition: width .5s ease-in-out, background-color .5s ease-in-out;
}
 
.block:hover .img-p {
  opacity: 1;
  -webkit-transition: opacity .5s .51s ease-in-out;
  -moz-transition: opacity .5s .51s ease-in-out;
  -ms-transition: opacity .5s .51s ease-in-out;
  -o-transition: opacity .5s .51s ease-in-out;
  transition: opacity .5s .51s ease-in-out;
}
 
.block:hover .layer {
  opacity: .5;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}
 
.layer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  opacity: 0;
}
 
.img-p {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  color: #FFF;
  text-align: left;
  line-height: 1.6em;
}
 
.p-container {
  width: 80%;
  position: relative;
  top: 35%;
  margin-left: 5%;
}
 
.image1 {
  background-image: url(1.jpg);
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
 
.image2 {
  background-image: url(2.jpg);
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
 
.image3 {
  background-image: url(3.jpg);
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
 
@media (max-width: 768px) {
 
.block {
  width: 100%;
  height: 200px;
  -webkit-transition: height .5s ease-in-out;
  -moz-transition: height .5s ease-in-out;
  -ms-transition: height .5s ease-in-out;
  -o-transition: height .5s ease-in-out;
  transition: height .5s ease-in-out;
}
 
.block:hover {
  width: 100%;
  height: 400px;
  -webkit-transition: height .5s ease-in-out;
  -moz-transition: height .5s ease-in-out;
  -ms-transition: height .5s ease-in-out;
  -o-transition: height .5s ease-in-out;
  transition: height .5s ease-in-out;
}
}
 
@media (min-width: 768px) {
 
.block { width: 15%; }
 
}
 
@media (min-width: 992px) {
 
.block { width: 10%; }
 
}

Download Slideshow CSS


Link direct:
BB-code link:
HTML link:

Atenție!
Acest material a fost furnizat de artweber.ro doar în scop informativ. Administrația nu este responsabilă pentru conținutul acesteia
Dacă dețineți drepturile de autor la acest material/resursa contactați imediat un administrator.
CSS, Slide
Stimate vizitator, esti pe site ca utilizator neînregistrat.
Vă recomandăm să vă Înregistrați.
informație
Ai vrea sa lasi un comentariu? Conectați-vă la contul dvs. pentru a lăsa comentarii. Nu ai cont? Aveți posibilitatea să creați un cont gratuit acum.