JSFiddle

  • Hover img - mostrar texto

    Ejercicio de propiedad hover sobre imagen para mostrar div.

    <ul>
    	<li>
    		<img src="http://lorempixel.com/800/600/sports/2">
    		<div class="info">
    			<h3>Título de la imagen</h3>
    			<p>Foto tomada por <a href="#">Autor/a</a></p>
    			<p><small>Tomada el 7 de enero de 2013 con una cámara Nikon ...</small></p></div></li></ul>
  • Javascript equivalencias con Jquery

    No-Library (pure JS), HTML, CSS, JavaScript

    <article>
      <h1>JavaScript equivalent to jQuery basics</h1>
      <p>... because loading 92Ko of jQuery to use less than 2% of it kind of sucks ...</p></article>
  • Menu desplegable - CIRCLE

    Ejercicio de CSS para menú desplegable mediante círculos.

    <div id="paper"></div>
    <div class="wrap">
    <a class="two" href="#">
        <img class="round" src="http://lorempixel.com/400/400/sports" alt="">
    </a>
    <a class="three" href="#">
        <img class="round" src="http://lorempixel.com/400/400/fashion" alt="">
    </a>
    <a class="one" href="#">
        <img  class="round"  src="http://lorempixel.com/400/400/technics" alt="">
    </a>
    
    
    <figure>
    	<img src="http://db.tt/FveX1nYo" alt="">
    </figure>
    </div> 	
    
  • CSS Bloques fluidos

    Ejercicio de bloques fluidos con display: inline-block;

    <div id="container">
    	<div class="bloque">
    		<div id="cuadrado" class="c-azul">Aquí se puede poner texo.</div>
    		<div id="triangulo" class="t-azul"></div>
    		<div class="foto foto01"></div>
    	</div> 
    	<div class="bloque">
    		<div id="cuadrado" class="c-rojo">&nbsp;</div>
    		<div id="triangulo" class="t-rojo"></div>
    		<div class="foto foto02"></div>
    	</div> 
    	<div class="bloque">
    		<div id="cuadrado" class="c-verde">&nbsp;</div>
    		<div id="triangulo" class="t-verde"></div>
    		<div class="foto foto03"></div>
    	</div> 
    </div>
  • CSS hover tooltips

    Tooltips de ayuda contextual en párrafos.

    Este texto será de ayuda <span class="field-tip">
        para entender un concepto,
        <span class="tip-content">Aquí tienes la ayuda!</span>
    </span> lo que mejora la experiencia del usuario.
    
    
  • triángulos css 1

    ejercicio css - triángulos

           <div class="triangle-left"></div>
            <div class="triangle-bottom"></div>
            <div class="triangle-right"></div>
            <div class="triangle-bottom"></div>
            <hr>
            <div class="item">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el ...</div>
  • css triángulos

    estudio de triángulos en css

    <div class="triangle"></div>
    <div class="triangle triangle-down"></div>
    <div class="triangle triangle-left"></div>
    <div class="triangle triangle-right"></div>
    
    <a class="triangle-before triangle-before-left" href="#">anterior</a>
    <a class="triangle-after triangle-after-right" href="#">siguiente</a>
  • JQUERY GMAP - Ejemplo #18 is the latest revision

    Obtener latitud y longitud para actualizar campos de entrada.

    var map;
    var markersArray = [];
    
    jQuery(document).ready(function() {
        var lat = parseFloat($('#LatTxt').val());
        var lon = parseFloat($('#LonTxt').val());
        var marker ...
  • GMAPS API GOOGLE #11 is the latest revision

    Para añadir puntos, utilizando directamente la api de google.

    var GoogleMap = function(container, options){
        var map = new google.maps.Map(container.get(0), options);
        
        function createMarker(markerPoint) {
          var point ...
  • GMAPS Puntos y listado

    Para añadir diversas direcciones en nuestra página de contacto, por poner un ejemplo.

    // Configuración del Mapa
    
    var map = new GMaps({
        div: '#mapaContenido',
        lat: 0,
        lng: 52,
        zoom: 12,
        width: '100%',
        height: '300px'
    });
    
    // Función ...