Wie man einen gestrichelten Rand mit CSS animiert

Verzierte Rahmen können ein beliebiges Element auf der Seite schmücken, CSS-Rahmen sind jedoch in Bezug auf den Stil begrenzt. Entwickler entwickeln häufig Lösungen wie CSS-Farbverlaufsränder, SVG-Rahmen, mehrere Rahmen und mehr, um das Erscheinungsbild von Rahmen und Animationen zu simulieren.

Heute werden wir einen einfacheren Hack für gestrichelte Grenzen betrachten: gestrichelte Rahmenanimation. Die animierte gestrichelte Umrandung wird nur mit outline und box-shadow, sodass keine Probleme mit Fallbacks entstehen, da outline ab IE8 unterstützt wird. Auf diese Weise kann der Benutzer die Grenzen immer noch sehen, anders als wenn SVG oder Gradient verwendet wird. Mit diesem können Sie auch zweifarbige Bindestriche erstellen. Lass uns einen Blick darauf werfen.

Erstellen der Grenzen

Wir werden zuerst die Grenzen schaffen. Dafür verwenden wir eine gestrichelte Umrandung und einen Box-Schatten.

 .banner {Umriss: 6px gestrichelt gelb; Kastenschatten: 0 0 0 6px # EA3556; ...} 

Die outline benötigt alle ihre Werte; Breite, Art und Farbe. Der box-shadow benötigt nur den Wert für die Breite, der der Breite und Farbe der Kontur entsprechen sollte. Sowohl der Umriss als auch der Box-Shadow zusammen erzeugen den Effekt von zweifarbigen Bindestrichen.

Sie können dann die Breite oder Höhe der Box für den gewünschten Rahmen an den Ecken anpassen.

Animieren der Grenzen

Für unser erstes Animationsbeispiel fügen wir CSS-Keyframe-Animationen zu einer Reihe von Bannern hinzu, deren Grenzen ständig animiert werden und Aufmerksamkeit erregen. Für den Animationseffekt tauschen wir einfach die Farben des Umrisses und des Boxschattens aus.

 @keyframes animateBorder {to {Umrissfarbe: # EA3556; Kastenschatten: 0 0 0 6px gelb; }} 

Sie können die Farbe der Umrisslinie mit der outline-color Langhandeigenschaft festlegen, für Boxschatten müssen Sie jedoch zunächst alle Werte der Stenografieeigenschaft zuweisen.

Sobald die Animation fertig ist, füge sie der Box hinzu.

 .banner {Umriss: 6px gestrichelt gelb; Kastenschatten: 0 0 0 6px # EA3556; Animation: 1s animateBorder unendlich; ...} 

Übergänge an den Grenzen

Für das Übergangsbeispiel fügen wir den Bildern Rahmen hinzu und animieren diese beim Hover. Sie können auch die Rahmengröße für verschiedene Effekte ändern.

 .photos {Umriss: 20px gestrichelt # 006DB5; Box-Schatten: 0px 0px 0px 20px # 3CFDD3; Übergang: alle 1s; ...} .photos: hover {outline-color: # 3CFDD3; Box-Schatten: 0 0 0 20px # 006DB5; } 

Bewegen Sie den Mauszeiger über diese Bilder, um Ihre CSS-gestrichelten Rahmen in ihrem gesamten animierten Glanz zu sehen.

Und das ist ein Wrap. Sie können versuchen, gestrichelte Umrandungen durch gepunktete Umrandungen zu ersetzen, aber der Effekt ist möglicherweise nicht so gut. Sie können den Umrisstyp während der Animation auch für einige weitere Effekte ändern.

Ist weniger immer mehr? Dem Minimalismus auf den Grund gehen

Uns wurde immer wieder gesagt, dass einfaches Design besser ist als komplexes Design. Jeder von Seth Godin bis Steve Jobs hat seine Gefühle zu diesem Thema geäußert, und der Konsens scheint zu sein, dass wahre Einfachheit und Minimalismus der richtige Weg sind .Entfernen Sie alles, was nicht unbedingt da sein muss, und Sie werden unweigerlich zum perfekten Design kommen. A

(Tech- und Design-Tipps)

Erstellen Sie Easy Sliding Hamburger Menüs mit jQuery Slidebars Framework

UX-Designer streiten sich über die Verwendung von Hamburgermenüs im Webdesign. Sie dienen einem Zweck für mobile Benutzer, haben aber auch eine geringere Auffindbarkeit .Ich kann nicht sagen, ob sie es wert sind, auf Ihrer Website zu verwenden oder nicht, aber wenn Sie nach einer einfachen Möglichkeit suchen , ein gleitendes Menü einzurichten, dann ist das Slidebars Framework eine praktische Ressource.Slid

(Tech- und Design-Tipps)