🔧 How to Hide Text in a Logo Using CSS
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
To hide the text of a logo and show a background image, you can use this CSS technique. This method uses text-indent to move the text out of the visible area and other properties to keep it hidden without affecting the layout.
a.logo {
text-indent: -9999px; /* Shifts the text far off-screen */
overflow: hidden; /* Ensures no overflow text is visible */
white-space: nowrap; /* Prevents text from wrapping to the next line */
display: block; /* Allows setting width and height */
width: 150px; /* Sets the width of the logo element */
height: 50px; /* Sets the height of the logo element */
background-image: url('logo.png'); /* URL of the logo image */
background-size: cover; /* Ensures the background image covers the entire area */
}
Full article: How to Hide Text in a Logo Using CSS
CSS Snippets
🔧 How to Hide Text in a Logo Using CSS
📈 38.16 Punkte
🔧 Programmierung
🔧 Learn CSS by Building the Git Logo in Pure CSS
📈 23.93 Punkte
🔧 Programmierung
🔧 How to Hide Scrollbar Using CSS?
📈 21.28 Punkte
🔧 Programmierung
🔧 Social media logo's effect using the html css
📈 20.88 Punkte
🔧 Programmierung
🔧 Google Logo Using CSS Only
📈 20.88 Punkte
🔧 Programmierung