Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial Trucos con CSS parte I
#1
Saludos, me presento en este mi primer post, soy ingeniero de computación venezolano de 21 años.

Vengo a enseñarles hoy 2 "trucos" con CSS que estoy casi seguro que a muchos les gustaría.

1. Fondos con Elementos Multiples y Gradiente.

Este efecto es muy sencillo, simplemente deben usar la propiedad de CSS

background-image y asignarles varias imagenes url sin fondo separadas por comas, además pueden agregarle un fondo mediante una url o un fondo gradiente utilizando por ejemplo la propiedad radial-gradient.

para más información sobre los gradientes en CSS 3 visitar la web de w3school

ejemplo (esto aplica 2 imagenes sin fondo png y como fondo un gradiente circular con 2 tonalidades azules):

Código:
background-image: url("http://blog.thornyeternity.com/wp-content/uploads/2011/08/drop_transparent.png") , url("http://3.bp.blogspot.com/-NmwQtO0RONE/UTd6zsi_hzI/AAAAAAAADTA/R4JRkjwOtBI/s1600/circles+(12).png")
           , radial-gradient(circle, #1082e2, #0f2a9d);

2. Efecto Parallax

Este efecto es más fácil de lo que muchos piensan, en este caso crearemos un archivo .HTML y otro .CSS, como pueden observar en el codigo HTML contiene 3 clases CSS llamadas bloque, parallax y imagen-1. (Los códigos de ejemplo están debajo)

La clase bloque simplemente es para dar formato a las secciones donde aplicaremos el efecto parallax.

La clase parallax es donde aplicaremos el efecto utilizando (comienza con .bloque.parallax para que se aplique a los elementos que contengan las clases bloque y parallax):

Código:
.bloque.parallax{
           height: 600px; /* Altura de 600px */
           background-repeat: no-repeat; /* Para que no se repita la imagen de fondo */
           background-position: 50% 50%; /* Para que la imagen de fondo se centre en horizontal y vertical */
           background-size: cover; /* Para que aparezca correctamente y muestre en la totalidad del espacio disponible */
           background-attachment: fixed; /* Para generar el efecto parallax, permite que la imagen no se mueva al mismo tiempo que el scroll */
       }

La clase imagen-1 es simplemente la imagen de fondo donde aplicamos el efecto parallax, en este caso el ejemplo será (que aplicara solo a los elementos que contengan la clase llamada parallax y imagen-1):

Código:
.parallax.imagen-1{
           background-image: url("https://pixabay.com/static/uploads/photo/2016/01/06/09/03/bokeh-1123768_960_720.jpg");
       }

A continuación los códigos de ejemplo.

HTML

Código:
<div class="bloque parallax imagen-1">
       <div class="contenedor">
           <h1>Seccion 1</h1>
       </div>
   </div>

   <div class="bloque">
       <div class="contenedor">
           <h2>Lorem ipsum</h2>
           <p>
               Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
           </p>
       </div>
   </div>

CSS
Código:
       .bloque h2 {
           margin-bottom:40px;
       }

       .bloque h1{
           text-align: center;
           margin: 0;
           font-size: 160px;
           line-height: 600px;
       }

       .bloque p{
           margin-bottom: 40px;
           font-size: 16px;
       }

       .bloque.parallax{
           height: 600px;
           background-repeat: no-repeat; /* Para que no se repita la imagen de fondo */
           background-position: 50% 50%; /* Para que la imagen de fondo se centre en horizontal y vertical */
           background-size: cover; /* Para que aparezca correctamente y muestre en la totalidad del espacio disponible */
           background-attachment: fixed; /* Para generar el efecto parallax, permite que la imagen no se mueva al mismo tiempo que el scroll */
       }

       .parallax.imagen-1{
           background-image: url("https://pixabay.com/static/uploads/photo/2016/01/06/09/03/bokeh-1123768_960_720.jpg");
       }
       .contenedor {
           max-width: 960px;
           margin: 0 auto;
       }

Estos 2 efectos se encuentran en mi CodePen > http://codepen.io/JancoBH/pen/PNNawP para mayor apreciación

Esto fue todo si les gustaría que siguiera con estos tutoriales o otros (tengo conocimientos en AngularJS, Jquery, JavaScript, Bootstrap. etc) no duden en comentar o preguntar. ¡Me gusta!
#2
Hola
Muchas Gracias por tu contribución - Lo aplicaré en mis próximos desarrollos - Siembre es útil esta información
Canpios
#3
(10-03-2016, 05:40 PM)canpios escribió: Hola
Muchas Gracias por tu contribución - Lo aplicaré en mis próximos desarrollos - Siembre es útil esta información
Canpios

De nada espero que te sirva, pronto creare las otras partes Gran sonrisa


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 458 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
  Trucos Javascript canpios 4 425 30-01-2015, 06:17 AM
Último mensaje: garcon
  como dominar CSS sin salir del escritorio parte 1 postnix 20 2,183 02-06-2014, 12:33 PM
Último mensaje: piinbook
  50 Herramientas de Diseño Web Gratis! [Parte 3] lukas 2 734 03-07-2013, 09:45 PM
Último mensaje: lukas
  50 Herramientas de Diseño Web Gratis! [Parte 1] lukas 2 472 18-06-2013, 10:59 PM
Último mensaje: fercol
  50 Herramientas de Diseño Web Gratis! [Parte 2] lukas 0 525 18-06-2013, 07:35 PM
Último mensaje: lukas
Guiño 3 Trucos CSS Junior 7 592 13-06-2013, 03:39 PM
Último mensaje: pugozo
  Guía de Referencia Rápida de CSS 3 [Parte 1] Static-X 14 2,086 13-04-2013, 11:05 PM
Último mensaje: Infamer
  Manual de lenguaje HTML (Parte III) DiosOne 2 1,021 01-04-2013, 08:49 PM
Último mensaje: DiosOne
  Manual de lenguaje HTML (Parte II) DiosOne 1 670 01-04-2013, 11:03 AM
Último mensaje: global2013



Usuarios navegando en este tema: 1 invitado(s)