Bienvenido, invitado Ingresar o Registrarse
| | MARCADOR
| LENGUAJE:
 


marcador:
RSS 1.0     RSS 2.0

Vistas Totales: 3183 - Respuestas Totales: 9

PUBLICADO POR: ChaKaL on 05/12/2013 23:06:31


                                                       efectos  experimentales css3

                                                                          by

                                                                     3N1GM4


bueno esta vez les traigo unos efectos con los que eh estado trabajando para los perfiles aun no estan del todo terminados y aun ando experimentando con ellos pero aqui se los comparto por si les gustaria usarlos estudiarlos o como simple curiosidad.

PD:los gif se ven muy bruscos pues no estan bien escuadradas las imagenes solamente las hice rapido para poder dar una idea de como se ven 


                        MENU INCLINADO QUE ROTA AL PASAR EL MOUSE




/* menu*/


#outer2 .menu{

background-color:#333;

padding:0; 

margin:40px auto 80px auto; 

list-style:none; 

height:35px; 

width:100px; 

overflow:hidden;

border-top:1px solid #FF0000; 

border-bottom:1px solid #ccc;

border-radius:10px;

transform:rotate(30deg);

-ms-transform:rotate(30deg); 

-webkit-transform:rotate(30deg);

}



 #outer2 .menu2 {display:block; 

background-color:#483D8B;

float:left; 

width:100px; 

line-height:50px; 

text-align:center; 

font-family:arial, sans-serif; 

font-size:13px;

 text-decoration:none; 

font-weight:bold;

 border-right:1px solid #333; 

border-left:1px solid #ccc;

border-radius:10px;

-moz-transition: 0.25s;

-ms-transition: 0.25s;

-o-transition: 0.25s;

-webkit-transition: 0.25s;

transition: 0.25s;

background-image: -moz-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));

background-image: -ms-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));

background-image: -o-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));

background-image: linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));

}








PUBLICADO POR: ChaKaL on 05/12/2013 23:16:45


               IMAGENES DE LA SECCION DE VIDEOS ROTANDO





/* girando videos */



@-webkit-keyframes girando {

from,20% { -webkit-transform: rotateY(0deg);   }

30%,40%   { -webkit-transform: rotateY(90deg);  }

50%,60%   { -webkit-transform: rotateY(180deg); }

70%,80% { -webkit-transform: rotateY(270deg); }

90%,to { -webkit-transform: rotateY(360deg); }

}


@-moz-keyframes girando {

from,20% { -moz-transform: rotateY(0deg);   }

30%,40%   { -moz-transform: rotateY(90deg);  }

50%,60%   { -moz-transform: rotateY(180deg); }

70%,80% { -moz-transform: rotateY(270deg); }

90%,to { -moz-transform: rotateY(360deg); }

}


td div.border2 {

   margin: 10px auto;

   -webkit-perspective: 700px;

   -moz-perspective: 700px;

   perspective: 700px;

}


td div.border2 table {

margin: 10px auto;

width: 100px;

padding: 0px;

-webkit-animation-name: girando;

       -moz-animation-name: girando;

animation-name: girando;

-webkit-animation-timing-function: ease-in-out;

-moz-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-duration: 5s;

-moz-animation-duration: 5s;

animation-duration: 5s;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

}



Volver Arriba




PUBLICADO POR: Crucigrama on 05/13/2013 11:17:42


Oohhh!! Chakalito muy buen post 

Me pregunto... " /* girando videos */ "... si tambièn servirà para las imagenes 

( es que... es que soy re preguntona )





--------------------------------------------------------------
Volver Arriba




PUBLICADO POR: ChaKaL on 05/13/2013 18:36:34



Crucigrama escribió:

Oohhh!! Chakalito muy buen post 

Me pregunto... " /* girando videos */ "... si tambièn servirà para las imagenes 

( es que... es que soy re preguntona )



en teoria si deberia funcionar  solamente cambiando el nombre del elemento  pero ya luego are unas pruebitas a ver que pasa pero cuando te refieres a imagenes a cuales te refieres  a todas ?

Volver Arriba




PUBLICADO POR: ChaKaL on 05/15/2013 14:57:42



Candy escribió:

Me gusta mucho todo esto que nos enseñas,y estoy pendiente que dejas de nuevo por estos rumbos 

Muchas gracias chakal


de nada candy yo lo hago con mucho gusto es una de las cosas que mas me gusta hacer es mi hobbie y me da gusto que haya personas a quien  les guste eso de diseñar paginas como a mi y ya ire poniendo otras expermentos a ver que les parecen y si gustan y tienen alguna idea en mente  podrian decirla tal vez podriamos hacer algo juntos segun sus gustos saluditos xaos xaos

Volver Arriba




PUBLICADO POR: ChaKaL on 05/15/2013 18:30:13


                                         menu dock


quien no conoce la famosa barra dock aquella que la hizo popular la empresa apple al implementarla en su sistema  creo que esa famosa barra dock es una de las cosas que mas me gusto de apple con su efecto de agrandarse y flotar hacia arriba cuando le pasabas el cursor


bueno pues basandome en esa famosa barra me dije mmmm y porque no tratar de hacer un menu con ese famoso efecto de la barra dock y pues me di a la tarea de ver si se podia logre hacer algo parecido aunque con una sola imagen  ya luego ire modificandola para tratar de usar una imagen diferente para cada pestaña del menu bueno a continuacion les dejo la imagen de como se ve y su codigo para que puedan probarlo




/* menu*/


#outer2 { 

background: transparent; 

padding-bottom:25px;

}


#outer2 .menu{

background: transparent;

background-image:url(http://i.imgur.com/FpZWVIn.png);

background-position:center;

padding:0 auto;

height:64px; 

width:64px; 

border:none;

border-radius:70px;

overflow:hidden;

-webkit-transition-duration: 0.5s;


}



#outer2 .menu2{

background: transparent;

background-image:url(http://i.imgur.com/FpZWVIn.png);

background-position:center;

border:none;

padding:0 auto;

margin:5px;

height:64px; 

width:64px; 

overflow:hidden;

border-radius:70px;

transform:scale(1.5,1.5) translateY(-25px);

-ms-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transition-duration: 0.5s;


}


#outer2 .menu a { color: #FF3300; }


#outer2 .menu2 a { color: #FF0000; }



Volver Arriba




PUBLICADO POR: ChaKaL on 06/03/2013 15:32:29


voy a tratar de probar que roten las imagenes en otras partes de la pagina aunque al parecer afecta a otras partes que no me habia fijado ya hare pruebas y los pondre por aqui 

Volver Arriba




PUBLICADO POR: ChaKaL on 10/09/2013 22:31:15


                           Menu secundario

en esta  ocasion pondre uhn codigo simple  espara poner imagenes al menu secundario de la pagina vamos a usar dos imagenes distintas  la primera de un ojo cerrado y la segunda con el ojo abirto para que al pasar el cursor de el efecto de que abre el ojo pero cada quien puede tener su propio ingenio y crear otras alternativas sin tanto blah blah les dejo la imagen del menu para que vean de que hablo y a continuacion  el codigo 



/*menu secundario*/


.item2 {

position:relative;

height:65px; 

float:left;

width:85px; 

background:transparent;

background-repeat:no-repeat;

background-image:url(http://i.imgur.com/vRgzDwU.png);

background-position:center;

border:transparent;

margin:0px;


 }


.item{

position:relative;

height:65px; 

float:left;

width:85px; 

background:transparent;

background-repeat:no-repeat;

background-image:url(http://i.imgur.com/xbzX7xu.png);

background-position:center;

border:transparent;

margin:0px;

 }

Volver Arriba




PUBLICADO POR: Crucigrama on 10/13/2013 20:52:36


Besos Gusi lindo 

Mas que darte la gracias por estos aportes que haces, te felicito por  ser tan curioso e investigar para luego enseñarnos esas técnicas ancestrales jejeje 

Pues yo decore mi perfil, no me quedo precisamente perfecto, pero ya se cun poco más como es el asunto  .

Dejo un pequeño aporte de unos tubes.... o imágenes en .png para estos menesteres 

( ya se, Gusi, ya se..... que las imagenes son muy rositas jajajaja, pero tratare dejar un surtido para la mayoría de gustos )

http://mundopetsociety.wordpress.com/2011/09/15/spoilers-pet-society-semana-de-realeza-gotica/


http://mundopetsociety.wordpress.com/2011/10/


http://mundopetsociety.wordpress.com/tag/food/

http://papillondereve.centerblog.net/rub-tubes-halloween--13.html

https://www.iconfinder.com/search/?q=christmas

http://marcosscrap.blogspot.com/2011/09/scrap-hallowen.html

http://galaxytube.centerblog.net/rub-tube-halloween-.html

http://lascosasdejuampa1.blogspot.com/2011/11/imagenes-para-photoscape-de-terror-4.html

https://www.iconfinder.com/search/?q=halloween

http://es.fordesigner.com/maps/3695-0.htm

http://www.fondosdepantallaymuchomas.com/search/label/Gifs%20y%20glitters%20de%20Velas

http://imagenesygifsdenavidad.blogspot.com/2010/10/iconos-de-navidad-png-grandes_3645.html

http://www.softicons.com/free-icons/holidays-icons/xtal-icons-by-jairo-boudewyn/christmas-wreath -icon

http://papillondereve.p.a.pic.centerblog.net/533ade7a.png

http://papillondereve.centerblog.net/rub-tubes-voitures-.html


http://tianlang71.blog.163.com/blog/static/21382612120130284319404/

http://marie4liberte.centerblog.net/rub-mes-tubes-fleurs-et-fruits-.html





--------------------------------------------------------------
Volver Arriba




PUBLICADO POR: Crucigrama on 01/02/2014 00:29:50


Holis  Gusiiiiii,  muacksss  !!

Dejo este link de una pag que por casualidades de la vida consegui,  con  interesantes efecto






--------------------------------------------------------------
Volver Arriba
12/13/2017



*** Redplanetachat ***
redplanetachat