Étiquette : css

Publié le

Effet ombré discret et chattoyant

Mettre un ombré sur une image ou un bloc permet de le mettre immédiatement en relief. Encore faut-il savoir doser la force et profondeur.

Simple et discret

.card .card-image, .card .header, .card-profile .card-avatar, .card-testimonial .card-avatar img, .card-raised, .img-raised, .iframe-container iframe {
 -webkit-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
 box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.card-plain .card-image {
 margin: 0;
 border-radius: 3px;
}
.card .card-image {
 overflow: hidden;
 position: relative;
}

Ce qui donne le résultat suivant :

Publié le

Icone de scroll animée en CSS

Un petit snippet pour créer une icone de scroll animée en CSS, pour accompagner les utilisateurs après un splashscreen ou sur un site parallax.
C’est malin, c’est simple et c’est joli.

Le code

<div class="w-scroll-button w-button-1" style="border-color:#000000;color:#000000">
 <a href="#scroll">
 <i></i>
 </a>
</div>

et les css qui vont avec :

@-webkit-keyframes scrollButtonFadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-10px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
 
@keyframes scrollButtonFadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-10px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}

.scrollButtonFadeInDown {
 -webkit-animation-name: scrollButtonFadeInDown;
 animation-name: scrollButtonFadeInDown;
}
.w-scroll-button {
 position: absolute;
 z-index: 10;
 display: inline-block;
 left: 50%;
 bottom: 50px;
 width: 100px;
 border-color: #fff;
 color: #fff;
 margin-left: -50px;
 text-align: center;
}

.w-scroll-button.w-button-1 a {
 display: inline-block;
 border-width: 1px;
 border-style: solid;
 border-color: inherit;
 color: inherit;
 width: 22px;
 height: 36px;
 border-radius: 20px;
 overflow: hidden;
}

.w-scroll-button.w-button-1 a i::before {
 display: block;
 content: '';
 border-style: solid;
 border-left-width: 1px;
 border-color: inherit;
 color: inherit;
 border-radius: 2px;
 height: 3px;
}

.w-scroll-button.w-button-1 a i {
 display: inline-block;
 position: absolute;
 left: 50%;
 top: 10px;
 height: 8px;
 width: 4px;
 margin-left: -2px;
 border-color: inherit;
 color: inherit;
 -webkit-animation: scrollButtonFadeInDown 1.2s infinite both;
 animation: scrollButtonFadeInDown 1.2s infinite both;
}

Le résultat