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.

Bootstrap 4: nouvelles fonctionnalités et cool que vous allez adorer

La prochaine version majeure du framework Bootstrap est au coin de la rue. La version alpha peut déjà être téléchargée depuis le site Web de développement de Bootstrap, et le code source est également disponible sur Github.Twitter Bootstrap est actuellement le framework frontend le plus populaire. Il per

(Conseils techniques et de conception)

50 Tutoriels de boutons CSS3 pour les concepteurs [2017]

Dans cet article, nous allons passer en revue quelques tutoriels choisis avec soin pour les boutons que vous pouvez mettre sur votre site en utilisant uniquement CSS3 .Certains de ces boutons jouent avec des couleurs, des dégradés ou des formes tandis que d'autres sont programmés pour animer avec des actions de survol ou de clic, ce qui donne des effets comme si on les poussait vers le bas; étendre, rétrécir ou changer de cadre pour révéler plus d'informations. Tout c

(Conseils techniques et de conception)