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

Tutorial para realizar con Photoshop CS2 un texto que se escribe alrededor de una circunferencia. El texto se adapta a la forma del círculo by desarrolloweb.com

Fuente, por Miguel Angel Alvarez


Existen tutoriales complicados con técnicas para conseguir con Photoshop que un texto se adapte a una circunferencia. Esas técnicas eran necesarias de utilizar porque Photoshop no tenía una manera directa de hacer que un texto se adapte a un círculo o una curva en general. Ahora con CS2 es posible hacer esto y conseguir un texto editable que se adapta a un trazo. En este artículo haremos un círculo y el texto se escribirá siguiendo la circunferencia. Pero en realidad esto se puede hacer con cualquier tipo de trazo.Primero creamos un archivo nuevo, en el que vamos a dibujar una circunferencia con la herramienta elipse. Esta circunferencia nos servirá para adaptar el texto que vamos a escribir más tarde.

herramienta elipse

Seleccionamos la mencionada herramienta elipse y dibujamos una circunferencia. El tamaño será el deseado. Pero para la prueba vamos a hacer una elipse suficientemente grande para trabajar con espacio.

En nuestra lista de capas tendremos el fondo y la elipse.

creamos una elipse

Entonces tomamos la herramienta de texto. Al situarnos sobre el lienzo, nuestro puntero se transforma en el típico cursor para mostrar que se va a insertar un texto (se muestra el típico puntero de texto, que es una línea vertical con una línea pequeña horizontal abajo y arriba). Si nos situamos con el puntero en la misma línea de la elipse veremos como el puntero se transforma en un cursor de texto especial, como el que podemos ver en la siguiente imagen:

En ese punto hacemos clic para empezar a escribir un texto. Veremos que el texto que vamos escribiendo se va colocando rodeando el círculo. Para ello, las letras se van adaptando al recorrido de la elipse. El resultado será algo como lo siguiente:

Seguramente tengamos que editar la posición del texto, para situarlo en un lado u otro del perímetro de la elipse. Esto lo tenemos que hacer con la herramienta de selección directa.

Herramienta de seleccion directa

Ahora nos situamos con el puntero encima del texto. Veremos que el puntero se transforma como en un guión para escribir texto, en el que aparece al lado una flecha, apuntando a uno u otro lado del puntero. Entonces podemos pinchar y arrastrar para mover una guía para recolocar el texto dentro del trazado de la curva.

Si queremos, podemos conseguir así mover el texto para que se coloque siguiendo la curva, pero por la parte de dentro en lugar de la de fuera. Para ello simplemente habrá que arrastrar la posición de la guía para dentro, o fuera, del trazo.

El texto podemos colocarlo dentro del círculo

Con esto tenemos nuestro texto alrededor de un círculo. Hay que señalar que este texto es perfectamente editable, por lo que fácilmente podremos cambiar el tamaño del texto, el color, la fuente, etc. Como cualquier otro texto simple de Photoshop. De esta manera conseguirmos adaptar el texto y que este sea totalmente editable.

La elipse luego podemos eliminarla o ocultarla para que no salga en la imagen. El trazado ahora queda asociado al texto, por lo que es indiferente lo que hagamos con la silueta de la elipse.

resultado final del testo que se adapta a un círculo

Esta es la manera más simple que existe de adaptar un texto a una circunferencia. Espero que haya sido sencillo de entender.

Ahora puedes ver un vídeo sobre este tutorial, que hemos preparado en DesarrolloWeb.com