Comment animer une bordure en pointillés avec CSS

Les bordures décorées peuvent orner n'importe quel élément de la page, mais les bordures CSS sont limitées quand il s'agit de style. Les développeurs proposent fréquemment des solutions telles que les bordures de dégradés CSS, les bordures SVG, les bordures multiples et bien d'autres pour imiter et améliorer l'apparence des bordures de boîte et de ses animations.

Aujourd'hui, nous allons nous pencher sur un hack plus simple pour les bordures en pointillés: l'animation de la bordure en pointillés. La bordure animée en pointillés sera créée en utilisant seulement le outline et la box-shadow, ne laissant aucune agitation au sujet des retombées, puisque le outline est soutenu à partir d'IE8. De cette façon, l'utilisateur pourra toujours voir les bordures contrairement au SVG ou au dégradé. Avec cela, vous pouvez également créer des tirets bicolores. Nous allons jeter un coup d'oeil.

Créer les frontières

Nous allons d'abord créer les frontières. Pour cela, nous allons utiliser un contour en pointillés et une ombre en forme de boîte.

 .banners {outline: 6px en pointillé jaune; boîte-ombre: 0 0 0 6px # EA3556; ...} 

Le outline aura besoin de toutes ses valeurs; largeur, type et couleur. La box-shadow seulement besoin de la valeur pour la propagation qui devrait être la même que la largeur du contour et sa couleur. Le contour et la boîte-ombre ensemble créeront l'effet des tirets bicolores.

Vous pouvez ensuite ajuster la largeur ou la hauteur de la boîte pour l'apparence de votre bordure souhaitée.

Animer les frontières

Pour notre premier exemple d'animation, nous ajouterons des animations d'images clés CSS à un ensemble de bannières dont les frontières s'animent continuellement, attirant l'attention. Pour l'effet d'animation, nous allons simplement échanger les couleurs du contour et de l'ombre de la boîte.

 @keyframes animateBorder {to {contour-couleur: # EA3556; boîte-ombre: 0 0 0 6px jaune; }} 

Vous pouvez cibler la couleur du contour à l'aide outline-color propriété main courante outline-color, cependant pour l'ombre de la case, vous devrez donner toutes les valeurs à la propriété raccourci pour l'instant.

Une fois l'animation prête, ajoutez-la à la boîte.

 .banners {outline: 6px en pointillé jaune; boîte-ombre: 0 0 0 6px # EA3556; animation: 1s animateBorder infini; ...} 

Transitions sur les frontières

Pour l'exemple de transition, nous allons ajouter des bordures aux images et animer celles en vol stationnaire. Vous pouvez également modifier la taille de la bordure pour différents effets.

 .photos {outline: 20px en pointillés # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transition: tous les 1s; ...} .photos: hover {outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; } 

Maintenant, passez la souris sur ces images pour voir votre CSS bordé de bordures dans toute sa gloire animée.

Et, c'est un emballage. Vous pouvez essayer de remplacer les bordures en pointillés par des pointillés, mais l'effet peut ne pas être aussi bon. Vous pouvez également modifier le type de contour pendant l'animation pour quelques effets supplémentaires.

10 applications de collaboration pour les chefs de projet

Les chances sont beaucoup de votre travail et les projets sont réalisés en ligne. Cependant, vous et votre patron pouvez avoir du mal à hiérarchiser les tâches qui sont plus importantes que les autres . Pour cette raison, il existe un besoin pour les gestionnaires d'utiliser plusieurs applications de collaboration en ligne. De

(Conseils techniques et de conception)

Ajouter le texte de marge volante à tous les sites Web facilement avec Marginotes

Les infobulles en ligne sont fantastiques mais parfois elles ne correspondent pas à certains contenus. La plupart des sites Web laissent un espace dans les marges le long du corps de la page, ce qui est parfait pour ajouter du contenu de type info-bulle sans les info-bulles .Entrez Marginotes, un plugin jQuery open source gratuit qui ajoute des notes personnalisées aux marges de votre page Web.

(Conseils techniques et de conception)