Linien, Karos, Rauten – nahtlose Hintergründe zum Aufpeppen deiner Contentboxen auf deiner Website.
Wie versprochen habe ich heute für euch unglaubliche 25 Codebeispiele für CSS-Hintergründe inklusive Vorschau!
Alle Hintergründe bestehen aus halbtransparenten Mustern, die ihr auf verschiedene Farben legen könnt. Die Vorschau zeigt jeden Hintergrund aus 5 verschiedenen Farbflächen, damit ihr sehen könnt, wie dieser auf verschiedenen Farben in unterschiedlichen Helligkeitsstufen wirkt.
Zu jedem Hintergrund seht ihr einen Link, der euch den Patternify-Editor direkt mit diesen Einstellungen öffnet. Praktisch, oder?
Diese kleinen Hintergründe peppen eure Boxen, Überschriften und Teaser gewaltig auf und geben euren Seiten damit mehr Tiefe.
Ich habe beispielsweise den Hintergrund meiner Box für die Registrierung mit kleinen diagonalen Linien hinterlegt:
Klicke hier und werde Mitglied im Style-Club der Ideenlounge und du bekommst alle Grafiken, Codeschnipsel und das Ideenlounge-Style-Plugin zum Download. Alles komplett for free!
Die Anmeldung ist unverbindlich und kostenlos und kann jederzeit wiederrufen werden.
Hier findet ihr den CSS-Code für verschiedene Muster: Karos, Rauten, horizontale Linien, vertikale Linien und ein paar Retro-Styles. In meinem Patternify-Tutorial findet ihr noch weitere Beispiele für diagonale Linien. Diese Strukturen setze ich selbst oft in Webseiten ein. Ich hoffe daher, dass diese Codeschnipsel euch ebenso helfen, wie mir.
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkIAL8///fh5EIdQyjCvGGEjh4QAQxYQkAi9Ag5cUWsD0AAAAASUVORK5CYII=);
Link zu Patternify: http://ptrn.it/1BTAwKN
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYV2NkIA5IMhKnjmFUId6AAgePJDFhCQDDFAEFxaHDgAAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/oeaSm8
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAF0lEQVQIW2NkQAP////3YaRQEGQGuhEAFpIQc5htOmUAAAAASUVORK5CYII=);
Link zu Patternify: 0
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkwASSjJQLSqIbAQAYMwCD8JJonAAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/Kg1SJU
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2NkYGDwAWJCYAsjVOEWPCpBBqEoxGYyyACsCpFNBivApxBFAcUmovsJq9W4PI7iGaLCkZAisDwAw9QZC/psvzMAAAAASUVORK5CYII);
Link zu Patternify: http://ptrn.it/1BTCMSk
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NkYGCQBGIYeA5jMJIlgWQSwliQUaRJAABXLANS+wBmxgAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1BTDDCi
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIklEQVQYV2P8//+/MQMaYGRkPIshNhQUojsaxMfq7iGgEABwrCP7/f2wVgAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1BTDfnv
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2P8//+/DyMj4xYGHAAmzwiSx6UYWRysEJtidM1whciKsdmAohCfM0g3Ed06rG4kytckhSOuwEYOOgBUlEdUlrsPGQAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1BTFCqp
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAO0lEQVQYV2NkIAIwAtVIAvFzPGolQYpAAJdCsDhMETaFcI3IipAVopiMrgir1SSbhO54DDcR9B3BcAIAu+IPPVR/nIQAAAAASUVORK5CYII=);
Link zu Patternify: http://ptrn.it/1BTDQpe
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAK0lEQVQIW2P8//+/DyMj4xYGKIDxGUF8GAdZEVgCWRLGx60Drx0w7cjGAgCI3idQXNWv8QAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1BTFkzQ
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2NkYGDwAeItQAwDYD4jlAeThCuCSYDkUXTi1YHXDiS7wUwfAAHMCVMwEJUcAAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1HvNhgY
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAGElEQVQIW2P8//+/MSN+ggEIQErSGEEsAPk1Gb5Z7gn6AAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1BTGyuL
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAEklEQVQIW2NkAAJGBPH///80AAmjA2ihUKcVAAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1BTGrzs
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIklEQVQYV2NkIBIwEqmOgfH////GxCgm3kRiTAOpGVYmAgAZXwM7+RiU3wAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1BTGoUi
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAADElEQVQIW2NkQAXGAABVADWsoJ3RAAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1HvNZe8
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAI0lEQVQYV2NkIBIwEqmOAaTQmBjFJJlIjIFgqyWJUTkUFAIAhRAAu4xnPRMAAAAASUVORK5CYII=);
Link zu Patternify: http://ptrn.it/1BTGj2X
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYV2NkIBIwEqmOYVQh3pACBY8xMWEJABHIAD50AbC9AAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1BTG3Rm
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAEElEQVQIW2NkQAL///83BgAJTAMyrRp//wAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1HvNRv9
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFElEQVQIW2P8//+/DyMj4xYGAgAAl3YEAhz2KawAAAAASUVORK5CYII=);
Link zu Patternify: http://ptrn.it/1HvNvoo
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFklEQVQIW2P8//+/MQMaYGRkPIsuBgCKEgQCRcoXgAAAAABJRU5ErkJggg==);
Link zu Patternify: 0
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAADElEQVQIW2NkQAXGAABVADWsoJ3RAAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1HvNpNr
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAADUlEQVQIW2NkIA4YAwAAhQA1sLQaeAAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1HvO95l
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAGElEQVQIW2P8//+/DyMj43MG3OAsUCoNAKJwBWgeBKM4AAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1HvNCQZ
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQklEQVQYV2NkIBIw/v//Pw2mlpGRcRa6Ppg8I7IESBBZMTIfRSFIE0wSXROGQmTFyLaRZyJeN5Lla3xBitUz2DQAAIyRMtGjyWc7AAAAAElFTkSuQmCC);
Link zu Patternify: http://ptrn.it/1HvPoS1
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQElEQVQYV2NkQAXGQO5ZIIbRYFlGUhWh6EY2DWQSSBIEQNaAQBoQz4KywXLo1oEUwABMIVgRSSbhdROyB8kPAgAfIRFw4/CeVAAAAABJRU5ErkJggg==);
Link zu Patternify: http://ptrn.it/1HvOTYb
Das Experimentieren macht richtig Spaß – ich denke, da kommt bestimmt demnächst noch ein weiterer Artikel mit weiteren Varianten 🙂
Tragt euch einfach in meinen Style-Club ein oder folgt der Ideenlounge auf Facebook. Dann verpasst ihr kein Freebie der Ideenlounge.
Diese Schnipsel setzt ihr in eure style.css in den jeweiligen Container. Ich habe beispielsweise in meinem Theme Twenty Fifteen den Footer der Beiträge, in dem das Datum und die Kategorien stehen mit leichten Linien hinterlegt. Dazu musste ich lediglich folgenden Code der „Linie hell 2“ für die Klasse „.entry-footer“ einsetzen. Das sieht dann in meiner style.css so aus:
.entry-footer {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAEklEQVQIW2NkAAJGBPH///80AAmjA2ihUKcVAAAAAElFTkSuQmCC);}
In meinem Artikel „Einem Wordpress-Theme eigene CSS hinzufügen“ findet ihr eine Anleitung, wie ihre eurem WordPress Theme eigene CSS hinzufügen könnt und wie ihr herausfindet, welcher Code in der CSS-Datei für welches Element auf eurer Webseite verantwortlich ist.
Ciao,
Mirjam
[shutterstock images=12 showkeywords=1 tooltips=1 logo=1 keywords=“seamless Background“ Â paging=1 header=1 order=random ]
Hallo, ich finde diesen Artikel richtig super. Werde ich gleich mal bei meinem nächsten Projekt ausprobieren.
Viele Grüße
Sandra
Dankeschön – Ich bin auch ganz begeistert von Patternify – ein bis zwei Strukturen in einzelne Elemente eingebaut, und schon wirkt die Seite wie frisch poliert 🙂