Trucos CSS para la página de inicio de su tema Origin

A continuación hay una serie de trucos de CSS para ayudarlo a personalizar su página de inicio de Origin Theme . Cada ejemplo a continuación tiene una vista previa animada y un bloque de CSS personalizado necesario para lograr el efecto. Como siempre, le recomendamos que agregue todo el CSS personalizado a través de un tema secundario o el cuadro de CSS personalizado en ePanel.

Proyecto Hover – Fundido de entrada

El CSS a continuación modificará la información del proyecto para que se desvanezca al pasar el cursor, con un desvanecimiento inverso cuando el cursor se desplace.

.image-info {
    opacity: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
 
.entry-image:hover img, .entry-image.et_hover img, .entry-image:hover .image-info, .entry-image.et_hover .image-info {
    opacity: 1.0;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
}

Proyecto Hover – Fade Up

El CSS a continuación modificará la información del proyecto para que se desvanezca hacia adentro y hacia arriba al pasar el mouse, con una animación inversa cuando el cursor se desplace.

.image-info {
    opacity: 0;
    top: 5px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
 
.entry-image:hover img, .entry-image.et_hover img, .entry-image:hover .image-info, .entry-image.et_hover .image-info {
    opacity: 1.0;
    top: 0;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
}

Proyecto Hover – Acercar

El CSS a continuación modificará la información del proyecto para que se desvanezca y se acerque al pasar el mouse, con una animación inversa cuando el cursor se desplace.

.image-info {
    opacity: 0;
    -webkit-transform: scale(.98);
    -moz-transform: scale(.98);
    -o-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
 
.entry-image:hover img, .entry-image.et_hover img, .entry-image:hover .image-info, .entry-image.et_hover .image-info {
    opacity: 1.0;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
}

Proyecto Hover – Sin sombra

De forma predeterminada, la superposición de información aparece con una sombra paralela. Si lo desea, el CSS a continuación eliminará la sombra predeterminada. El siguiente ejemplo se combina con el ejemplo anterior de «Fundido de entrada», pero se puede combinar con cualquier modificación adicional o sin ella.

.image-info {
    -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
    -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}

Color personalizado de proyecto

El CSS a continuación le permite establecer un color personalizado para la superposición de información del proyecto. El siguiente ejemplo se combina con el ejemplo anterior de «Fundido de entrada», pero se puede combinar con cualquier modificación adicional o sin ella.

.image-info {
    background: #465A78; /* overlay HEX color */
    background: rgba(70, 90, 120, 0.9); /* overlay RGBA color */
    -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
    -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
}

Pasar el cursor por la navegación

El CSS a continuación modifica el estado de desplazamiento del elemento de navegación predeterminado. Vea el efecto de desplazamiento a continuación.

#top-menu .link_bg {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

Navegación fija

De forma predeterminada, la navegación lateral en Origin se desplaza hacia arriba y hacia abajo con el contenido de la página. Si lo desea, el CSS a continuación creará una navegación fija. Si tiene mucho contenido en su barra lateral, no se recomienda este efecto porque la cantidad de contenido visible en su barra lateral está limitada por la altura del navegador del usuario.

@media screen and (min-width: 1024px) {
    #info-area { position: fixed; }
}

Si le gustó este consejo temático, dé un paseo por el blog para obtener más de nuestros recursos gratuitos y háganos saber cuál debería ser nuestro próximo consejo temático.