Cloud menu con animación en dos capas con 6 elementos con modal. Realizado solo con CSS3. See the Pen Cloud menu. by Mariano J. (@didac) on CodePen. HTML: Primera capa: dentro de la class ".menu", tenemos un input type checkbox. Segunda capa: Todos los elementos del menú, en este caso seis, se muestran con "transition-delay" y dan paso a una modal con diferentes opciones. Clone, change name, download, delete, etc. CSS de la nub ...
Los botones "hamburguesa" (hamburguer button), son usados principalmente para los menús desplegables, sea en vista responsive o no. Es algo sencillo y podemos valorar alternativas al movimiento en X habitual. Con jQuery y toggleClass on click, se añade o se quita la class "on" a cada elemento. Con CSS3 y con "transform", se modifica la posición original de cada div. See the Pen 9 hamburguer button menu by Mariano J. (@didac) on Co ...
SPC Plast, fue una de las primeras webs corporativas que he realizado del lado front. En los primeros trabajos se pulen los errores y se mejora con cada línea de código. Fue realizada en la empresa webpac, con un template propio, uno de los cometidos por los que fui contratado, fue para ampliar y mejorar una plantilla anterior y convertirlo en el template estándar de la empresa. Valorando todas las opciones para ...
Wipe Hover Effect, en castellano quiere decir "efecto cortinilla" con hover, como ya he dicho en otros ejemplos, Este tipo de efectos son decorativos, pero nos ayudan a enfatizar enlaces u otros elementos de nuestra web y darles un contenido extra con "before". See the Pen owezoe by Mariano J. (@didac) on CodePen. El HTML es muy sencillo, solo un href, con las class "btn". class "btn": .btn { display: inline-block; padding ...
Efecto Overlay hover con transición desarrollado únicamente con CSS. Este tipo de efectos son puramente decorativos, pero si se trata de un link, sirve para enfatizarlos en la web. En este caso, se aplica sobre una imagen, el texto del enlace tiene un background, que ocupa el 50%, al hacer hover, este ocupa el 100% con transición. See the Pen Overlay hover effect by Mariano J. (@didac) on CodePen. Tres ele ...
Web corporativa Politel, realizada con Bootstrap desde cero, integrada en Wordpress, sus contenidos son 100% editables desde el CMS. Blog, categorías de productos, formularios, alta de usuario, ofertas de empleo, redes sociales, mapa de Google editable, etc. En el front, destaca por varios efectos hover, que mas adelante iré desglosando. Por ejemplo en la sección Sobre nosotros a la altura del footer. Entro otros. El front y el b ...
Es habitual que necesitemos mostrar mucha información en un espacio reducido, (texto, imágenes, gráficos, videos, etc.), pero nos vemos en la obligación de no distorsionar el diseño original. See the Pen Profile card with accordion jQuery by Mariano J. (@didac) on CodePen. La mejor solución, es usar “accordion jquery”, El contenido se muestra en bloques que se despliegan verticalmente. Primero definimos el HTML: La et ...
Menú circular con animación en dos capas con 6 elementos. Realizado solo con CSS3. See the Pen Circular menu by Mariano J. (@didac) on CodePen. HTML: Primera capa: dentro de la class “menu”, tenemos un input type checkbox, y en el label ponemos el icono o texto que deseamos. Segunda capa: Todos los “href” del menú, en este caso seis enlaces, se muestran con "transition-delay". ...
Error 404 página no encontrada. Habitualmente muchas empresas descuiden esta sección, o incluso utilicen la plantilla básica que ofrecen los CMS de Wordpress por ejemplo, esto es una gran error. Si el usuario acaba en esta sección, es la oportunidad de ofrecerle de forma creativa y original nuevo e inesperado contenido. En mi anterior trabajo para la empresa de publicidad SR.Burns, para la Web de Florette Espa&nti ...
Landing formulario Ajax Específicamente creada para solucionar las dudas de los clientes potenciales de la empresa Politel, mientras desde Pamicom construimos su web. Realizada con Bootstrap, destaca el CSS y su formulario con AJAX y PHP El titulo "¡En construcción!" esta creada con una animación que lo hace aparecer y desaparecer con un efecto de desenfoque. <h1 class="display&qu ...