Efectele originale folosind CSS

Posibilităţile de folosire CSS3 încep să fie aplicate din ce in ce mai mult şi într-un fel, sunt infinite. Opţiunile sunt numeroase şi, în general, destul de simplu de aplicat.

Aici, voi prezenta un exemplu, dar restul pot fi vizualizate în demo on-line sau descărcate direct pe PC.

Toate au o structură similară în cadrul unui DIV cu anumite clase CSS (viev), se adaugă o imagine a cărei dimensiune defineşte restul proprietăţilor şi apoi un alt DIV va rămâne ascuns (mask), şi al cărui conţinut poate fi variabil.

<div class="view">
<img src="URL_IMAGEN" />
<div class="mask">
<h4> Titlu </h4>
<p> Text descriere </p>
<a href="#" class="info"> Citeste mai departe </a>
</div>
</div>

Evident, CSS este ceea ce contează şi este ... lung, deoarece, din păcate, se repetă multe proprietăţi pe care browsere, încă nu s-au decis să le unifice.

<style>
.view { /* DIV principal care are aceias dimensiune ca si imaginea utilizata, in acest caz este de 420x300 */
border: 10px solid #FFF;
cursor: pointer;
height: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 420px;
}
.view img { /* imagine */
display: block;
position: relative;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se anima cant trece mouseul peste imagine */
-moz-transform: rotate(720deg) scale(0);
-webkit-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask { /* DIV ascuns cu textul */
background-color: #ABC;
height: 300px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 420px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask { /* */
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.view h4 { /* titlul care ramane ascuns */
background-color: rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
position: relative;
font-family: Georgia;
font-size: 20px;
margin: 20px 0 0 0;
padding: 5px 0;
text-shadow: 0 3px 1px #000;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* apare titlul */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* textul care ramane ascuns */
color: #000;
font-family: Tahoma;
font-size: 13px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #FFF;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* apare textul */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* link-ul care ramane ascuns */
background-color: #456;
border-radius: 5px;
box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
color: #FFF;
display: inline-block;
padding: 7px 14px;
text-decoration: none;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #FFF;
}
.view:hover a.info { /* apare link-ul */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>

Castiga bani cu INFINI

Infini Global Network este un concept pe care il poti folosi pentru a-ti crea bunastarea si confortul la care visezi utilizand puterea combinatiei network-marketing si internet. Comunitatea Infini Global Network este o afacere ce mi s-a parut a fi o oportunitate exceptionala.

Citeste mai departe