A menudo nos resulta muy complicado explicar y aprender cómo funciona un parallax. Pues bien os voy a presentar una opción más cutre del efecto de parallax. Se trata de mover el fondo de la web en el sentido contrario al de la navegación, ahí va el código:
<script type=”text/javascript”>
window.onscroll = scroll;
function scroll(){
var sc = 5*window.pageYOffset/2-700;
document.getElementById(‘body’).style.backgroundPosition = ‘right ‘+sc+’px’;
}
</script>
Una forma sencilla y efectiva de embellecer tu web. Si queréis ver un ejemplo os dejo mi nuevo blog de vídeos diarios: RABODEMONO
Recientemente he iniciado un proyecto llamado WELIKELINKS. Se trata de una red social para compartir enlaces orientado al arte, diseño y creatividad. Bueno el caso es que se pueden hacer likes internos para los que el proceso es cargar un PHP que les paso por variables de URL los datos necesarios para guardar el ID de del enlace y la IP desde la que se ha hecho el like (para que no voten dos veces o al menos desde el mismo ordenador, algo es algo…). Me atormentaba el tema de andar con redirecciones y recargas de página, ¡así que busqué una solución!
Se me ocurrió ocultar en la parte superior del documento un iframe que cuando se hace el like carga todos los procesos internos para registrar el like. Su estilo tiene este aspecto:
iframe.process{
position: absolute;
top:0;
left:0;
width:10px;
height:10px;
z-index:-100000000;
opacity:0;
}
Luego lo único que tienen que cargar los enlaces de I like tiene que cargar con target del iframe en cuestión.
A menudo en cuestiones de HTML y CSS nos olvidamos de algunos tags usado hace tiempo, hasta que lo redescubres con propiedades nuevas y alucinantes. Éste es el caso de CSS-Tricks, ahí van algunas de las versiones del <hr>:
Continar Leyendo »
A menudo nos encontramos con que no podemos controlar si nos visitan con un iPhone o con iPad y las webs no se acaban de ver bien… Con la llegada de wordpress y sus plugins, hemos encontrado la manera de hacer versiones para dispositivos móviles. Pero la verdad es que es difícil cambiar el aspecto por defecto de estos templares a no ser que sean variaciones dentro del propio plugin.
La verdad es que la estructura no se vería mal en un iPhone si los estilos se adecuasen. Bien pues el siguiente código lo que hace es que en header selecciona un css u otro dependiendo del dispositivo con el que se accede a la página web.
Continar Leyendo »
La verdad es últimamente no hay que no aprenda algo nuevo y hoy es el día de las transiciones en links (cómo podéis ver en mi página principal http://mononelo.es). Es muy sencillo, pero aún al no estar unificados los códigos entres webkit, firefox y el normal y para ello tenemos que hacer lo de duplicar las propiedades por 4:
Continar Leyendo »
La verda es que podría reproducir el post de este fantástico blog para quedar bien y explicarlo en castellano, pero la verdad es que no lo haría tan bien como el original. Lo que sí os puedo prometer es, que ahora mismo estoy haciendo desde 0 mi propia plantilla de wordpress de portfolio llamada mymononelo y que cuando la acabe Continar Leyendo »
Hoy en día ya hay pocas cosas a las que no puedes dar estilos por CSS. Se pueden cambiar los colores de las tipos, los fondos, los bordes, hasta importar fuentes y redondear bordes… se puede hacer de todo. Pues hoy os presento cómo cambiar los estilos de un texto seleccionado con el cursor:
Continar Leyendo »
A continuación os presentaré 5 herramientas que he encontrado muy útiles si os dedicáis a tareas de diseño. Incluso creo que puede mejorar las comunicaciones entre directores de arte o diseñadores de interfaces web e implementadores web.
Continar Leyendo »
Lo que tenéis que hacer es crear un link con los estilos para que parezca un botón (cada uno tiene su técnica). Yo he cogido una imagen de fondo con los diferentes estados del botón y luego lo que hago es mover el fondo según el estado del botón:
Ahora bien lo que me interesa más explicaros es cómo configurar el link. El link tiene que llamar a una url determinada:
Continar Leyendo »
A menudo nos gustaría poder escribir en una web con una tipo determinada (no de sistema) sin necesidad de crear imágenes. Pues con CSS3 es posible, aunque la mayoría de sitios dan excesivo código. Yo mediante la experimentación he podido comprobar que hay algunas partes que si se omiten tarda menos en importar las tipos:
@font-face {
font-family: ‘CustomFont’;
src: url(‘ruta/de/la/fuente.otf’) format(‘formato’);
}
Continar Leyendo »
