xkdvnfdlkgnvdfklgndlkrgnlkf

Ver el tema anterior Ver el tema siguiente Ir abajo

xkdvnfdlkgnvdfklgndlkrgnlkf

Mensaje por Admin el Sáb Ago 08, 2015 12:27 am

;} #contcuerpo {background-color: #006B53;width: 450px;margin: 10px;font-family: tahoma;font-size: 12px;padding: 5px;padding-top: 9px;border-radius: 20px 20px 0px 0px;line-height: 17px;} #titulos {font-size: 26px; color: #006B53;background-color: #34D2AF;padding-right: 45px;padding-left: 8px; border-radius: 0px 10px 10px 0px;font-family: Megrim;} #contuto .codebox dt {color: silver;border-bottom: 2px solid #00A480;} #contuto .codebox dd code {color: silver;background: #1F7B67;padding: 3px; margin-top: -3px;} #contuto .codebox dt a {color: silver;transition: all 0.75s linear 0s;-webkit-transition: all 0.75s linear 0s;} #contuto .codebox dt a:hover{color: gray;} #contuto .codebox dd code::selection {background-color: #1F7B67; color: black;} #contuto .codebox dd code::-moz-selection {background-color: #1F7B67; color: black;} #contuto strong {color: cyan;} #contuto a {color: PaleTurquoise;font-variant: normal;-webkit-transition: all 0.5s; transition: all 0.5s;position: relative;} #contuto a:hover {color: Turquoise;} #contuto a::before { content:"";background-color: cyan; color: black; padding: 5px;position: absolute;font-size: 10px;top: -34px;border-radius: 5px;display: block;width: 100px;text-align: center;opacity: 0;-webkit-transition: all 0.5s; transition: all 0.5s;} #contuto a:hover::before {opacity: 1;} #contuto a[href*=css-efectos]:hover::before {content:"Efectos CSS";} #contuto a[href*=efecto-acordeon]:hover::before {content:"Efecto acordeón";} #contuto a:hover::after {content:"";width: 0;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 14px solid cyan;position: absolute; top: -10px;left: 10px;}</style><br /><style>#hiperop1:hover #opencima1{opacity: 0;} #hiperop2:hover #opencima2{opacity: 0;transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear;} #opencima2{transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear;} #rohiper1:hover #roencima1{transform:rotate(405deg);-ms-transform:rotate(405deg);-moz-transform:rotate(405deg);-webkit-transform:rotate(405deg);-o-transform:rotate(405deg);height:0px;width:0px;overflow: hidden;transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear; margin: 0px 100px 200px 100px; opacity: 0.5;} #roencima1{transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear;width: 200px; height: 200px;} #lahiper1:hover #ladebajo1{margin-left: -200px; position: relative;transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear;} #lahiper1 {margin-left: 210px;} #ladebajo1 {transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear;}</style><br /><br /><br /><link href='http://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'><br /><div id="contuto"><div id="contitol"><br /><span id="titulos">Creación de módulos con efecto</span><div id="contcuerpo">Saludos y bienvenidos a este tutorial, hoy aprenderemos a crear pequeños sectores que pueden ser tan aplicables a un widget como a una tablilla, con una pequeña tapa que, al pasar el mouse, desaparecerá mágicamente.<br />Pero, antes de nada, ya deberían haber leído los tutoriales de CSS básico de Pyrite, así como tener un buen dominio del HTML, ya que este tutorial requiere de unos conocimientos un poco variados.</div><br /><span id="titulos">El esqueleto</span><div id="contcuerpo">Para empezar, debemos crear un esqueleto el cual siempre será el mismo. Se trata de dos cuadrados, con dos colores bien diferenciados. Uno encima del otro. Para conseguir esto, debemos hacer lo siguiente.<br /><dl class="codebox"><dt>Código:</dt><dd><code>&lt;div id=&quot;hiper&quot;&gt;&lt;div id=&quot;debajo&quot;&gt;este irá debajo&lt;/div&gt;&lt;div id=&quot;encima&quot;&gt;este irá encima&lt;/div&gt;&lt;/div&gt;</code></dd></dl>Con este code, podemos ver tres divs diferentes, uno que es mayor, y que los envuelve, (hiper) y otros dos, que serán los que de verdad son importantes (encima y debajo).<br />Pero, solo con esto no podemos crear algo. ¿Qué es lo que nos falta? El CSS, por supuesto.<br /><dl class="codebox"><dt>Código:</dt><dd><code>#debajo {background-color: LightSeaGreen; height: 200px; width: 200px;} #encima {background-color: DarkCyan; height: 200px; width: 200px;}</code></dd></dl>Con esto, debería quedarnos una cosa parecida a esta:<br /><dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content"><div id="prueba11" style="background-color: LightSeaGreen; height: 200px; width: 200px">debajo</div><div id="prueba12" style="background-color: DarkCyan; height: 200px; width: 200px; color: chocolate">encima</div></div></dd></dl>Pero, ¿Qué ha pasado? Nos aparecen en columna. Para ponerlos uno encima del otro, debemos añadir las siguientes líneas:<br />“position: relative; margin-top: 200px;” <br />Es muy importante que estas se apliquen TAN SOLO al que va encima y, además, el margin-top, debe ser igual a la altura de los cuadrados.<br />Nos dejaría algo así:<br /><dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content"><div id="prueba21" style="background-color: LightSeaGreen; height: 200px; width: 200px">debajo</div><div id="prueba22" style="background-color:DarkCyan; height: 200px; width: 200px; position: relative; margin-top: -200px; color: chocolate">encima</div> </div></dd></dl></div><br /><span id="titulos">La creación</span><div id="contcuerpo"><dl class="codebox spoiler"><dt style="cursor: pointer;">Desaparece poco a poco (opacity):</dt><dd><div class="spoiler_content">Esta será la opción más sencilla de todas, al pasar el mouse el div de encima desaparecerá poco a poco hasta que solo se vea la parte de abajo. Una cosa así:<br /><dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content"><div id="hiperop1"><div id="opdebajo1" style="background-color: LightSeaGreen; height: 200px; width: 200px">debajo</div><div id="opencima1" style="background-color: DarkCyan; height: 200px; width: 200px; position: relative; margin-top: -200px; color: orange">encima</div></div></div></dd></dl> ¿Cómo lo hemos hecho? Muy fácil, en el CSS, solo debes poner: <br /><dl class="codebox"><dt>Código:</dt><dd><code>#hiper:hover #encima{opacity: 0;}</code></dd></dl>Esto quiere decir que, cuando pases el mouse sobre "hiper" el div "encima" obtendrá las siguientes propiedades. ¡Y ya lo tendrás! Aunque... ¡Esto es como un golpe en la cara! Más antiestético que un elefante con flores (?) Así que si quieren hacer una transición. Es decir, que sea suave, deberán añadir las siguientes líneas al CSS: <br /><dl class="codebox"><dt>Código:</dt><dd><code>transition: all XXs tt delay;-moz-transition: all XXs tt delay;-webkit-transition: all XXs tt delay;</code></dd></dl>Estas propiedades son explicadas por Pyrite en un <a href="http://www.oursourcecode.net/t314-propiedades-basicas-de-css-efectos">tutorial</a>. Así que no me explayaré demasiado. "XX" corresponde a lo que debe durar la transición. "tt" corresponde a la forma en la que se llevará la función a cabo (para más información, véase el tutorial de Pyrite dado más encima) y el delay es el tiempo que tardará en empezar.<br />Nosotros, vamos a hacer que tarde 1 segundo, sea linear (es decir, normal) y sin ningún delay. (La razón por la cual hay tantas líneas es por la compatibilidad de navegadores, tan solo se debe repetir los valores en cada una y todo el mundo lo verá bien)<br /><dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content"><div id="hiperop2"><div id="opdebajo2" style="background-color: LightSeaGreen; height: 200px; width: 200px">debajo</div><div id="opencima2" style="background-color:DarkCyan; height: 200px; width: 200px; position: relative; margin-top: -200px; color: chocolate">encima</div></div></div></dd></dl> Y aquí termina este, espero que os haya gustado y lo podáis utilizar por todos lados <img src="http://illiweb.com/fa/i/smiles/icon_wink.gif" alt="Wink" longdesc="15" /></div></dd></dl><dl class="codebox spoiler"><dt style="cursor: pointer;">Con efecto acordeón:</dt><dd><div class="spoiler_content">Bueno, este es quizás el método más utilizado, el más vistoso y querido, pero como ya está explicado en otra parte, les voy a dejar el link porque si no me atribuiría un mérito que no es mío Solo sigan <a href="http://www.oursourcecode.net/t3813-tablas-con-efecto-acordeon" target="_blank">este</a> magnífico tutorial de Shiiri y podrán conseguir el efecto.</div></dd></dl><dl class="codebox spoiler"><dt style="cursor: pointer;">Desaparece rotando:</dt><dd><div class="spoiler_content">En esta sección, el div que ejerce de tapa desaparecerá dando vueltas sobre sí mismo a la vez que se vuelve más pequeño. <br /><dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content"><div id="rohiper1"><div id="rodebajo1" style="background-color: LightSeaGreen; height: 200px; width: 200px">debajo</div><div id="roencima1" style="background-color: DarkCyan; position: relative; margin-top: -200px; color: chocolate">encima</div></div></div></dd></dl>Vale, ahora deberemos ir con un poco de cuidado, ya que para conseguir este efecto, debemos aplicarlo algunas líneas. Para empezar, debemos escribir lo siguiente en el CSS: <br /><dl class="codebox"><dt>Código:</dt><dd><code>#hiper:hover #encima{codiguillo;}</code></dd></dl>Como antes, con este código, cada vez que pasemos el puntero sobre "hiper" el "codiguillo" será ejecutado. Ahora, empecemos con las propiedades. Para darle el efecto de giro, debemos escribir lo siguiente: <br /><dl class="codebox"><dt>Código:</dt><dd><code>transform:rotate(XXdeg);-ms-transform:rotate(XXdeg);-moz-transform:rotate(XXdeg);-webkit-transform:rotate(XXdeg);-o-transform:rotate(XXdeg);</code></dd></dl>Donde "XX" será el número de grados que el div rotará. Recomiendo usar más de 360, aunque todo dependerá del tiempo que tarde en hacerse. A más tiempo, más vueltas. En el ejemplo yo he usado 405 grados, una vuelta y 45 grados (un octavo de vuelta). Si hay tantas líneas, es por la misma razón que antes, la maldita compatibilidad. <br />Para hacer que desaparezca, debemos darle un valor igual a cero en el width y en el height. Pero, para que nos salga bien, es súper importante que en el HTML, no se haya escrito las dimensiones del div que va encima ya que entonces el código se reescribirá y no se hará pequeño XP <br />Finalmente, se le debe dar un valor de overflow: hidden, para que no se haga grande por culpa de la cantidad de texto que pueda haber. <br />Para añadir pequeños detalles, recomiendo agregarle un transition y un opacity para que sea más suave y agradable. <br />El código, finalmente, debería quedarte así: <br /><dl class="codebox"><dt>Código:</dt><dd><code>#hiper:hover #encima{transform:rotate(720deg);-ms-transform:rotate(720deg);-moz-transform:rotate(720deg);-webkit-transform:rotate(720deg);-o-transform:rotate(720deg);height:0px;width:0px;overflow: hidden;transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear; margin: 0px 100px 200px 100px; opacity: 0.5;}</code></dd></dl>(como pueden ver, le he dado un margin, esto era para que el div se fuera por la parte superior, en el medio. De lo contrario, se irá por la esquina superior-izquierda por defecto). <br />Y aquí termina otra forma de crear una sección con tapa. </div></dd></dl><dl class="codebox spoiler"><dt style="cursor: pointer;">Se desliza hacia un lado:</dt><dd><div class="spoiler_content">En esta parte, vamos a conseguir un efecto parecido al acordeón, aunque en lugar de salir hacia arriba o abajo, aparecerá por un lado. El efecto que se debe conseguir es el siguiente:<br /><dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content"><div id="lahiper1"><div id="ladebajo1" style="background-color: LightSeaGreen; height: 200px; width: 200px">debajo</div><div id="laencima1" style="background-color: DarkCyan; position: relative; margin-top: -200px; height: 200px; width: 200px; color: chocolate">encima</div></div></div></dd></dl> Este efecto, aunque no lo parezca, es muy fácil de conseguir. Tanto, que solo debemos modificar dos pequeñas cosas. La primera, cuando el puntero se encuentre sobre el div "hiper" debemos conseguir que el div "debajo" se deslice hacia un lado. Esto es tan fácil como darle un margin-left negativo (en el caso de que se quiera hacer salir hacia la izquierda) igual al ancho del div por el que se encuentra tapado. Después deberemos darle un margin-left positivo igual o mayor al ancho del div que se deslizará. Más que nada por precaución, no queremos que nuestro div se quede cortado por una pared.<br />Supongo que después de leer esto, os habréis quedado igual. ¡No os preocupéis! Mi falta de expresión será adornada con el código que os iluminará la mente. Este debería quedar así:<br /><dl class="codebox"><dt>Código:</dt><dd><code>#hiper:hover #debajo{margin-left: -200px; position: relative;transition: all 1s linear;-moz-transition: all 1s linear;-webkit-transition: all 1s linear;} #hiper {margin-left: 200px;}</code></dd></dl>Como podéis ver, acabo de añadir las dos líneas que he explicado más arriba. Además, claro, de añadirle un transition para que no se haga de golpe.</div></dd></dl></div><div id="contcuerpo">Y aquí termina este tutorial. Espero que les haya sido de ayuda a todos. Si en algún momento se me ocurren más módulos de este tipo, ya crearé una nueva sección. Pero recuerden, deben ser ustedes los que inventen las cosas ;)No se vale hacer copiar y pegar o me enfadaré y me transformaré en pera (?)</div></div></div></div></div><br /><br />

Admin
Admin

Mensajes : 2
Fecha de inscripción : 27/06/2015

Ver perfil de usuario http://probandoforos.foroactivo.mx

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.