Scripts

Crear sección liquida expansible, con esquinas redondeadas usando CSS + mootools toggle effect

1 Comentario Scripts, Diseño Web

sliuidexpan.jpg

Un agradable tutorial en woork que explica como diseñar una bonita sección expansible con esquinas redondeadas en su parte superior izquierda, superior derecha, inferior izquierda, inferior derecha, utilizando CSS y a la cual le añadiremos un efecto que queda realmente bien “Efecto Toggle basado en mootools”, que nos permite básicamente esconder o volver a mostrar el contenido de dicha sección. Me pareció una forma muy practica para mostrar nuestro “about”, pero prácticamente aplicado de la forma correcta quedara bien con casi todo lo que deseemos usarlo.

Ver mi Demo - Descarga Mi demo - Ver demo Original - Ampliar info en woork

Instalar:
Descargamos los archivos necesarios, y realizamos el llamado correspondiente a ellos. Añadiendo dentro de nuestra etiqueta < head > el siguiente código.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="mootools.svn.js"></script>
  2. <script type="text/javascript">
  3. window.addEvent('domready', function(){
  4.     var mySlide = new Fx.Slide('section');
  5.    
  6.     $('toggle').addEvent('click', function(e){
  7.         e = new Event(e);
  8.         mySlide.toggle();
  9.         e.stop();
  10.     });
  11. });
  12.  
  13. </script>

Y por ultimo nuestro html, donde añadiremos el contenido.

PLAIN TEXT
HTML:
  2. <a href="#" id="toggle">My Section</a>
  3. </span></h2>
  4. <div id="section">
  6. <!-- Your content here -->
  7. </div>
  8. </div>

En base a esto, con un poco de CSS se pueden lograr cosas muy bonitas y funcionales. En el ejemplo que he modificado y dejado para que descarguen, podrán ver un poco el código por dentro que seguramente les dará un poco de ideas. De todas formas, siéntanse libres de usarlo tal como esta.

Compartelo

Menu inspirado en los efectos producidos por MooTools usando jQuery

Sin comentarios Scripts, Diseño Web

menumoojque.jpg

Un agradable menú inspirado en los efectos logrados por MooTools, salvo que esta vez basado en jQuery. El tutorial es muy simple de seguir, aunque podremos descargar el ejemplo completo para estudiarlo desde casa, conocer como funciona, o para usar rápidamente en tus proyectos.

Ver Demo - Mas info y descarga nettuts

Compartelo

Generar vistas previas y tooltip con jquery

2 comentarios Scripts, Diseño Web

previusjquerylink.jpg

Seguramente conocerán Snap Shots, un servicio online que nos permite generar vistas previas de los enlaces que se dirigen a una Web determinada. Pues hoy en cssglobe puedo ver un simple Script jQuery que nos permitirá básicamente lograr algo similar, pero personalizado a nuestro gusto y sin necesidad de contar con servicios externos, algo que siempre es una ventaja. Con este script podremos generar tooltip-burbuja como pop-ups y vistas previas, algo que será útil para mostrar las previas de ciertos enlaces externos o bien como alternativa para mostrar nuestro porfolio desde nuestro sidebar.

Mas info y descarga cssglobe - Tooltip and Image Preview Using jQuery
Instalación:
Lo primero será descargar nuestras librerías y realizar las llamadas desde nuestro encabezado, copiamos y pegamos el siguiente código dentro de nuestras etiquetas < head > …..< / head >

PLAIN TEXT
JavaScript:
  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="main.js" type="text/javascript"></script>

Uso
Generar tooltip simples - DEMO
Un poco de estilo

PLAIN TEXT
CSS:
  1. /*  */
  2.  
  3. #tooltip{
  4.     position:absolute;
  5.     border:1px solid #333;
  6.     background:#f7f5d1;
  7.     padding:2px 5px;
  8.     color:#333;
  9.     display:none;
  10.     }   
  11.  
  12. /*  */

Luego, Añadimos la clase "tooltip" a nuestros link y utilizamos el atributo “title” para añadir información que mostraremos al generar nuestros tooltip.

PLAIN TEXT
HTML:
  1. <a href="http://xyberneticos.com" class="tooltip" title="Visitar xyberneticos">Demo tooltip simple </a>

Usandolo en imagenes - DEMO
estilo

PLAIN TEXT
CSS:
  1. #preview{
  2.     position:absolute;
  3.     border:1px solid #ccc;
  4.     background:#333;
  5.     padding:5px;
  6.     display:none;
  7.     color:#fff;
  8.     }

Luego, Añadimos la clase "preview" a nuestros imágenes. Vale recordar utilizar dos imágenes, una como miniatura y otra en tamaño real.

PLAIN TEXT
HTML:
  1. <a href="1.jpg" class="preview"><img src="1s.jpg" alt="Miniatura" /></a>

Para añadir una descripción a nuestras imágenes, volvemos a hacerlo utilizando el atributo “title”

PLAIN TEXT
HTML:
  1. <a href="1.jpg" class="preview" title="Aquí estará tu descripción"><img src="1s.jpg" alt=" thumbnail" /></a>

Generar screenshot: similar ha snapshots - DEMO

PLAIN TEXT
CSS:
  1. #screenshot{
  2.     position:absolute;
  3.     border:1px solid #ccc;
  4.     background:#333;
  5.     padding:5px;
  6.     display:none;
  7.     color:#fff;
  8.     }

Uso
Añadimos la clase "screenshot" a nuestros enlaces, y la propiedad “rel” para llamar nuestra imagen. Rel ="cssg_screenshot.jpg"

PLAIN TEXT
HTML:
  1. <a href="http://www.xyberneticos.com" class="screenshot" rel="xyber_screenshot.jpg">xyberneticos</a>

Para añadir una descripción, nuevamente damos uso a la propiedad “title”

PLAIN TEXT
HTML:
  1. <a href="http://www.xyberneticos.com" class="screenshot" rel="xyber_screenshot.jpg" title="xyberneticos: recursos y tips">xyberneticos</a>

Compartelo

Simple slide panel - Practica forma para añadir información adicional

2 comentarios Scripts, CSS, Diseño Web

slidepanel.jpg

Simple slide panel, es otra practica forma para añadir contenido o información adicional sobre nuestra empresa, nosotros o sobre los perfiles en los cuales participamos en Internet. Posee un efecto simple pero muy atractivo, y lo mejor es que siempre llama la atención de alguna forma. Seguramente habrán visto varios slide de este tipo, donde la idea es hacer clic sobre un vinculo (boton) que accionara nuestro slide, mostrando todo el contenido en el, con un efecto de desplazamiento (arriba / abajo) similar al de una persiana de oficina.

Ver Demo - Descarga ejemplo - Referencia webdesignerwall
Instalación:
Descargamos jquery y realizamos como de costumbre la llamada a nuestra librería de nuestro encabezado (Head)

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="jquery.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.  
  6.     $(".btn-slide").click(function(){
  7.         $("#panel").slideToggle("slow");
  8.         $(this).toggleClass("active"); return false;
  9.     });
  10.    
  11.     
  12. });
  13. </script>

Añadimos un poco de estilo (style.css)

PLAIN TEXT
CSS:
  1. /**********************************************
  3. *   Estilos para nuestro panel superior          *
  5. ***********************************************/
  6. #panel {
  7.     background: #754c24 url(images/panel.jpg) repeat;
  8.     height: 250px;
  9.     display: none;
  10. }
  11.  
  12.  
  13. .slide {
  14.     margin: 0;
  15.     padding: 0;
  16.     border-top: solid 4px #422410;
  17.     background: url(images/btn-slide.gif) no-repeat center top;
  18. }
  19. .btn-slide {
  20.     background: url(images/white-arrow.gif) no-repeat right -50px;
  21.     text-align: center;
  22.     width: 144px;
  23.     height: 31px;
  24.     padding: 10px 10px 0 0;
  25.     margin: 0 auto;
  26.     display: block;
  27.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  28.     color: #fff;
  29.     text-decoration: none;
  30. }
  31. .active {
  32.     background-position: right 12px;
  33. }
  34.  
  35.  
  36. /**********************************************
  38. *  Estilos para nuestra foto            *
  40. ***********************************************/
  41.  
  42. #profileImage  { float:left; width:105px; margin: 30px 15px 15px 15px;}
  43. #profileImage img { border: 2px solid #422410; }
  44. div#profileText   { float:right; width:350px; color:#fff;}
  45. div#profileText   a { color:#F68A1A;}
  46.  
  47. /**********************************************
  49. *  Estilos para nuestros Iconos de perfiles   *
  51. ***********************************************/
  52. .blog {
  53.     font-size: 11px;
  54.     padding-left: 17px;
  55.     margin-left: 2px;
  56.     margin-bottom: 5px;
  57.     background:url(images/blog.gif) bottom left no-repeat;
  58.     List-style:none;
  59. }
  60. ..... etc

Contenido

PLAIN TEXT
HTML:
  1. <div id="panel">
  2.  
  3.         <div id="profileImage">
  4.             <img src="images/nikko.jpg" alt="">
  5.         </div>   
  6.     <div id="profileText">
  7.                 <h2>About</h2>
  8.  Hola mi nombre es Nikko, xyberneticos es mi blog personal. Vivo en argentina, actualmente desarrollador Freelance. 
  9.         <img src="images/perfiles.gif" alt="">
  10.     <ul>
  11.                     <li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
  12.                 <li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
  13.  
  14.         <li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
  15.         <li class="flickr">My Photos <a href="http://www.flickr.com/photos/xyberneticos/">Flickr</a></li>
  16.         <li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
  17.         <li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
  18.             
  19.         </ul>
  20.    
  21.     </div>

Compartelo

NETTUTS - Tutoriales y tips sobre desarrollo

2 comentarios Scripts, Tutoriales, Diseño Web

netsus.jpg

NETTUTS es un blog muy reciente que estará enfocado al desarrollo web y tips de gran utilidad, sin duda es un blog que promete mucho. Si notan un diseño similar al de PSDTUTS, es precisamente porque son ellos quienes están detrás de este blog. Tan solo lleva días online, pero ya podremos encontrar algunos tips muy interesantes, por ejemplo:

tabsnetsus.jpg

Crear Tabs usando CSS y jQuery - Una de las formas mas simples de introducir mucho contenido en una sección reducida, es mediante la utilización de “tabs”, en Nettuts podremos encontrar un tutorial muy completo para crear bonitos tabs que podremos usar posteriormente en nuestros proyectos. Si buscas algo simple será muy útil, pero les recomiendo el ejemplo en el cual se ha utilizado jQuery, porque posee unos efectos realmente extraordinarios.

Ver Demo - Mas Info Create a Slick Tabbed Content Area using CSS & jQuery

netpaypal.jpg

Crear formularios de pagos Paypal - Un tips muy agradable que le servirá a aquellos que desean tener desde sus web un formulario integrado a su cuenta paypal, y el cual permita recibir los montos de una forma mas directa o simple. Tips útil para recibir donación o vender.

Ver demo y mas Info Creating a PayPal Payment Form

Via css-tricks

Compartelo

Spoiler Revealer – Ocultar contenido adicional con jquery

3 comentarios Scripts, Diseño Web

spoiler.jpg

Fade-in Spoiler Revealer, es una agradable técnica que veo en css-tricks, en la cual usando jQuery podremos ocultar o mostrar toda la parte de un texto y sustituirla por un " revelar contenido adicional" o “seguir leyendo”. Inclusive al Mostar el contenido oculto, se produce un efecto desvanecimiento que lo hace ver muy bonito. Queda en ustedes, pensar en que proyecto en el cual trabajan podrá ser realmente útil.

Ver Demo - Descarga Ejemplo - Mas Info css-tricks
Instalacion
Añadimos a nuestro encabezado

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2.    
  3.     <script type="text/javascript">
  4.     $(document).ready(function() {
  5.        
  6.         $("span.spoiler").hide();
  7.        
  8.          $('<a class="reveal">Reveal Spoiler&gt;&gt;</a> ').insertBefore('.spoiler');
  9.    
  10.         $("a.reveal").click(function(){
  11.             $(this).parents("p").children("span.spoiler").fadeIn(2500);
  12.             $(this).parents("p").children("a.reveal").fadeOut(600);
  13.         });
  14.  
  15.     });
  16.     </script>

Uso

PLAIN TEXT
HTML:
  1. <p>texto, texto, texto<span class="spoiler">Contenido oculto........</span></p>

Compartelo

Image Cross Fade Transition

4 comentarios Scripts, CSS, Diseño Web

fadetransi.jpg

En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.

Ver Demo - Descarga Ejemplo - Mas info jqueryfordesigners - Mas demos 1, 2, 3

Tecnica con jQuery
En nuestro encabezado

PLAIN TEXT
JavaScript:
  1. <script src="js/jquery.js" type="text/javascript"></script>
  2.  
  3.     <script type="text/javascript">
  4.     <!--
  5.    
  6.     $(function () {
  7.         // find the div.fade elements and hook the hover event
  8.         $('div.fade').hover(function() {
  9.             // on hovering over find the element we want to fade *up*
  10.             var fade = $('> div', this);
  11.  
  12.             // if the element is currently being animated (to fadeOut)...
  13.             if (fade.is(':animated')) {
  14.                 // ...stop the current animation, and fade it to 1 from current position
  15.                 fade.stop().fadeTo(250, 1);
  16.             } else {
  17.                 fade.fadeIn(250);
  18.             }
  19.         }, function () {
  20.             var fade = $('> div', this);
  21.             if (fade.is(':animated')) {
  22.                 fade.stop().fadeTo(3000, 0);
  23.             } else {
  24.                 fade.fadeOut(3000);
  25.             }
  26.         });
  27.     });
  28.    
  29.     //-->
  30.     </script>

Un poco de CSS

PLAIN TEXT
CSS:
  1. .fade {
  2.   position: absolute;
  3.   top: 100px
  4.   left: 100px
  5. }
  6.  
  7. .fade div {
  8.   position: absolute;
  9.   top: 0;
  10.   left: 0;
  11.   display: none;
  12. }

Nuestra estructura

PLAIN TEXT
HTML:
  1. <h2> Tecnica jQuery</h2>
  2. <div class="fade">
  3.   <a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
  5.     <a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
  6.   </div>
  7. </div>

TECNICA con CSS

PLAIN TEXT
CSS:
  1. img.fade {
  2.   opacity: 1;
  3.   -webkit-transition: opacity 1s linear;
  4. }
  5.  
  6. img.fade:hover {
  7.   opacity: 0;
  8. }

PLAIN TEXT
HTML:
  1. <h2> Tecnica CSS</h2>
  2.       <span style="position: relative;">
  3.     <img src="2.jpg" />
  4.     <img
  5.       style="position: absolute; left: 0px;"
  6.       src="1.jpg" class="fade" />
  7. </span>

Compartelo

Menu Kwicks con jQuery

3 comentarios Scripts, Diseño Web

kwicks.jpg

Debo admitir que a lo largo del tiempo he conoció cantidad de menú que podríamos usar en nuestros proyectos. Cantidad de diseños y sobre todos efectos. Algo así como un menú adecuado para cada proyecto que nos encontremos encarando. Pero dentro de todos los que he probado o dentro de todos los diseños que me han gustado, uno de los que mas ha llamado mi atención es aquel que podremos encontrar en la Web oficial de MooTools, el cual posee un efecto denominado “kwicks” y el cual en una oportunidad comente aquí (basado en MooTools). Pero hoy acabo de encontrar este mismo menú, que se caracteriza por generar un desplazamiento al estilo de marcianas horizontales, pero esta vez realizado en base a jQuery. El efecto sigue siendo igual de extraordinario, lo que me recuerda que de una vez por todas, lo debería usar en mi porfolio personal. Si aun no entienden de lo que hablo, tan solo vean el menú citado en el ejemplo.

Ver Demo - Descarga Ejemplo - MAs Informacion jeremymartin

Instalación:
Alojamos los archivos necesarios en nuestro servidor, y realizamos las llamadas correspondientes a nuestros archivos.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  3. <script type="text/javascript" src="jquery.kwicks.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $().ready(function() {
  7.     $('#menukwicks .kwicks').kwicks({
  8.         maxWidth: 205,
  9.         spacing:  5
  10.     });
  11. });
  12. </script>

damos estilo

PLAIN TEXT
CSS:
  1. .kwicks {
  2.     list-style: none;
  3.     position: relative;
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7.  
  8. .kwic