0

Hola estoy tratando de dar el estilo a mi footer, de la imagen que muestro dando la sensación de realismo, como si la hierba creciera hacia arriba. He pensado en que diera impresión de movimiento como un git, no se si eso sera posible, con javascript o bootstrap. O debo poner una imagen o git de fondo. He buscado alguna pista de como dar esa apariencia, u otra parecida sin lograrlo. ¿ Alguna idea de como puedo conseguirlo ? Gracias.

introducir la descripción de la imagen aquí

footer {
    background-color: #404040;
}

footer {
	text-align: center;
	padding: 50px 0 30px ;
	
}

footer p {
	color: #f8f8f8;
	font-size: 14px;
}

footer a.totop {
	color: #fff;
	margin-bottom: 30px;
}
footer a.totop:focus {
	outline: 0;
}
<title>document</title>
</head>

<body>
    <ul>
        <li class="active">
            <a href="#intro">Casa</a>
        </li>
        <li>
            <a href="#about">Sobre mi</a>
        </li>
        <li>
            <a href="#service">Servicios</a>
        </li>
        <li>
            <a href="#works">Trabajos</a>
        </li>

        <li>
            <a href="#contact">Contacto</a>
        </li>
    </ul>

                            <h2 >Hola</h2>

        <div class="container">
            <div class="row">

                    <div class="text-center">
                        <p>
                            Lorem ipsum dolor sit amet, vis tale malis tacimates et, graece doctus omnesque ne est, deserunt pertinacia ne nam. Pro eu
                            simul affert referrentur, natum mutat erroribus te his
                        </p>
                        <p>
                            Ne mundi fabulas corrumpit vim, nulla vivendum conceptam eu nam. Ius ex principes complectitur, ex quo duis suscipit. Ius
                            fastidii reprimique no. Sadipscing appellantur pri ad. Oratio moderatius definitiones cum ex,
                            mea ne brute vivendum percipitur.
                        </p>
                        <a href="#service" class="btn btn-skin btn-scroll">What we do</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="section-heading text-center">
        <h2 class="h-bold">hola</h2>

        <h5>Web Design</h5>

        <p>
            Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
        </p>


        <h5>Web Design</h5>

        <p>
            Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
        </p>


        <p>
            Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
        </p>

                        <h5>Graphic design</h5>
                   
                        <p>
                            Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
                        </p>
 

    </section>

    <footer>
        <a href="#">Adios</a> Email</p>
    </footer>
</body>

</html>

1 respuesta 1

2

Creo que te refieres a un GIF, en vez de GIT, si entendí bien, solo debes agregarlo al footer como fondo solo usando CSS, así:

.pie_pagina
{
   background-image: url(pasto-animacion.gif);
   /*Estos estilos te los recomiendo*/
   background-position: center bottom; /*Para que la imagen aparezca desde abajo*/
   background-size: auto 100px; /*o las medidas que quieras darle a la imagen*/
   background-repeat: repeat-x; /*Para que solo se repita a los lados y no hacia arriba*/  
}

Ahora, un gif es algo pesado y sobretodo si es muy realista, te recomiendo que busques un compresor o un estilo más flat (de colores planos) porque pesa menos. También puede ser bueno que si lo vas a hacer tu mismo (el gif), lo hagas mejor usando sprites.

Te doy un ejemplo rápido, de como puedes hacerlo. (Si la imagen tarda en cargar. ya sabes porque es)

footer{
  background-image: 
    url('https://static1.squarespace.com/static/55b6470ae4b022e9ea88408d/t/561d64c1e4b09810cb5dbbae/1444766985860/CROP-Grass.gif?format=2500w');
    background-position: 50% 25vh;
    background-color: lightgray;
    /*La siguiente medida es porque no encontre una imagen como la que quieres tu*/
    background-size: 50% auto;
    background-repeat: repeat-x;
    min-height: 50vh;
}




/*Esto lo puedes ignorar*/
*{
margin: 0; padding: 0;
}
body{
min-height: 100vh;
display:flex;
align-items: flex-end;
}
footer{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-family: verdana;
font-weight: bold;
}
<footer>

MIRA MI GIF DE HIERBAS

</footer>

12
  • 1
    Claro que puede reducirse, recuerda que te mencione esta propiedad: background-size: auto 100px;*/ yo en mi demo use 100% auto, pero puedes usar la medida que mejor se acomode por ejemplo 3em 10em o cover que lo que hace es que el fondo sin importar el tamaño siempre ocupará el 100% de todo el contenedor. Commented el 11 feb. 2018 a las 13:42
  • 1
    Por cierto, ya encontraste el GIF como lo necesitabas? Porque ya con la imagen podría cuadrar mejor como quedaría. Commented el 12 feb. 2018 a las 16:19
  • 1
    Pero añade la imagen o la url de como quieres imitar el efecto, estoy pensando quizás en una solución svg, pero no estoy seguro si es como quieres. Commented el 12 feb. 2018 a las 18:37
  • 1
    A que te refieres con recortar el footer? Si es por la imagen recuerda que existe la propiedad background-position: basta con que le pongas que empieza desde arriba, así: top center o que le pongas en el tamaño, que cubra la totalidad del alto background-size: 100% 100%; o que sobrepase el alto background-size: 100% 150%;, igual no entiendo mucho a que te refieres, puedes poner una imagen? Commented el 12 feb. 2018 a las 22:53
  • 1
    Para que quede a la mitad del alto, sería: background-size: auto 50% y para que recorte la parte de abajo sería: background-position: 50% 50%; Commented el 13 feb. 2018 a las 0:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.