Hoe maak je een logo met CSS? Er zijn vele manieren en de mogelijkheden zijn onbeperkt. Zo kan je bijvoorbeeld met CSS de volgende zaken doorvoeren:

• Achtergrondkleur geven
• Lettertype kiezen
• Padding geven (afstand tussen de tekst en het vlak)
• Border-radius geven (de ronde bolling in het logo)

Code van logo in CSS

De code om een logo te maken met CSS vind je hieronder. Let op dat je bij je eigen website de juiste zogeheten “selector” kiest. In mijn geval is de selector een Class genaamd: .site-title. Als je het WordPress thema van deze website gebruikt dan kan je de code plakken in “Extra CSS” van de customizer in WordPress.

/** LOGO DESIGN CSS */
.site-title{
	background-color: var(--nav-color-h);
	color: var(--nav-color)!important;
	border-radius:1.5em;
	padding: 0em 0.4em;
}

Plak die code bij Extra CSS

Dezelfde code gebruiken voor meer?

Je kan de code in meer zaken doorvoeren. Geef zoals hieronder dan die “.site-title Class” mee.

Logo Class .site-title