HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

fuente: http://www.falconmasters.com/web-design/efecto-parallax-sencillo/

Por aqui os dejo el javascript (necesita cargar libreria jquery)


$(document).ready(function(){
$(window).scroll(function(){
var barra = $(window).scrollTop();
var posicion = (barra * 0.80);
$('#paralax').css({'background-position': '0 -' + posicion + 'px'});
});
});

y este sera nuestro DIV


<div id="paralax" style="background-image: url(img/banner-2.jpg);background-repeat:repeat;background-attachment: fixed;height: 565px;width: 100%;background-size: cover;background-position:center;"></div>
});

HTML & CSS: DIV banner y texto desaparece por debajo del contenido web

Buenas a tod@s

Por exigencia del guion necesito hacer un banner o un slide de imagen + texto que al hacer scroll para ver el resto de la web se quede fijo en su posicion desapareciendo por debajo del resto del contenido de la web … frase rara lo se, mal explicado lo se tambien. Probar este codigo y entendereis por donde van los tiros y si alguno de vosotros sabe decirme como se llama esto os agradeceria eternamente que me lo dijerais!

CSS:


#main-header { /* banner que se quedara por debajo del contenido al hacer scroll */
	position:fixed; /* Hacemos que la cabecera tenga una posición fija */	
	z-index: 1;
}

#main-content{ /* contenedor principal */
	z-index: 9999;
	position:relative;
	}

HTML


<body>
        
<div id="main-header">BANNER + TEXTO</div>
	
<section id="main-content">BLA BLA BLA BLA</section>

</body>

Espero haberle servido de ayuda a alguien mas que a mi mala memoria, la proxima vez que me tope de nuevo con esta necesidad ya vengo a tiro fijo

Un saludo !

How to Create a Realistic Burnt Text Effect in #Photoshop by @tutsplus

How to Create a Realistic Burnt Text Effect in #Photoshop by @tutsplus

fuente: https://design.tutsplus.com/tutorials/super-easy-realistic-burnt-text-effect–cms-27501

how-to-create-a-realistic-burnt-text-effect-in-photoshop-by-tutsplus

This tutorial will show you how to use two layer styles to create a super easy, but very realistic burnt-in-leather text effect. Let’s get started!

This text effect was inspired by the many Layer Styles available on GraphicRiver.

The following assets were used during the production of this tutorial:

Leer artículo completo

#CSS3: Texto con sombra usando text-shadow + Shadow Filter by @nGeeksCom

Fuente: ngeeks.com

Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.

La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.

Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.

Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:

.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}

Si no tuviéramos una hoja de estilos en nuestra página web, podemos ponerla en el head de la siguiente manera:

<style type="text/css">
<!--
.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}
-->
</style>

Para aplicar la sombra a un texto dentro del contenido de la página ponemos por ejemplo:

<p class="shadow">Ejemplo de texto con sombra</p>

Y este sería el resultado si le aplicamos la sombra a un texto con formato de título (h4):

Ejemplo de texto con sombra

Después podemos cambiar los valores de la sombra para que quede a nuestro gusto, sin olvidar que tendremos que hacer los cambios en las dos propiedades, intentando que la sombra sea similar en ambos navegadores.

Valores de text-shadow

Color de la sombra. (Ejemplo: #666666)
Desplazamiento de la sombra sobre el eje X. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
Desplazamiento de la sombra sobre el eje Y. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
Cantidad de efecto blur de la sombra. (Ejemplo: 3px)Atributos de Shadow Filter

Color de la sombra (Ejemplo: color=’#666666′)
Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)
Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)

Crear fácilmente texto 3D con CSS3 by @html5facil

Fuente: html5facil.com

Aun que CSS3 no tiene una propiedad directamente para hacer esto, hay desarrolladores que utilizan el ingenio para combinarlas y crear cosas sorprendentes de las cuales aprenderán en este momento a Crear fácilmente texto 3D con CSS3 y que sea aplicable a sus proyectos.

Crear fácilmente texto 3D con CSS3

¿Dónde lo puedo aplicar?

La propiedad se llama text-shadow y obviamente es aplicable a todo tipo de etiqueta que contenga texto, títulos, párrafos,  etc.

Nota: También es aplicable a fuentes personalizadas (@font-face).

 

CSS3 soporta capas

Una de las ventajas de CSS3 son las capas, por ejemplo, en la propiedad backgroundpuedo decirle que primero aplique un fondo de color rojo y después coloque sobre el fondo una imagen png, en el caso de text-shadow serian capas de sombra.

Nota: Entre mas capas tenga, mayor grosor tendrá el texto.

Ejemplo:

1
2
3
h1 {
  text-shadow: parametros_capa_1, parametros_capa_2, parametros_capa_n;
}

 

Sintaxis básica de text-shadow

Parámetros :

  1. Desplazamiento de la sombra sobre el eje X en relación al texto, Valores positivos o negativos.
  2. Desplazamiento de la sombra sobre el eje Y en relación al texto, Valores positivos o negativos.
  3. Cantidad de efecto blur o desenfoque de la sombra.
  4. Color de la sombra en hexadecimal o RGB.

 

Ahora si, efecto 3D en el texto

Aplicando todo lo que se explico anteriormente podemos empezar a jugar con los valores y obtener diferentes resultados ajustando al gusto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
  color:#FFF;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Nota: Recuerden anteponer las extensiones propietarias de CSS3-webkit-, -moz-, -o-, -ms- (Microsoft).

Y claro, dejamos el link de descarga del ejemplo aqui y el ejemplo en demostración aqui.

#css tutorial para expandir div con animacion y superposicion by @codrops

Fuente:  tympanus.net/codrops

Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay.

We want to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element. Clicking an element will create a cut-out effect, revealing another layer that will expand.

This is how we’ll do it: we will first create a list of items that will look like metro-style boxes:

expandingoverlay1

Each one of the boxes will contain an element (overlay) that will be of position fixed. This element will actually spread over all the page but we won’t see it because the opacity will be set to 0. When we click on a box, we’ll use clip: rect() to crop the respective part of the inner fixed element. Then we will animate the clip to reveal all the width and height of the overlay which is our entire viewport:

ExpandingOverlay2

Clicking on the close button will reverse the effect and the overlay will minimize to the list item’s size and disappear.

Ir a tutorial | Ver Demo | Descargar