YouTube Video responsive einbinden

Youtube Responsive

Ab und zu kommt man in die Situation, dass ein YouTube-Video in eine Webseite eingebettet werden muss. YouTube bringt systembedingt schon dynamische Einstellungen wie Breite und Höhe mit, jedoch funtkioniert dies nicht 100%ig responsive. Die Lösung ist einfach: 1) Der YouTube iframe wird in einen DIV-Container gesteckt. <div class=“youtube-responsive“> //Hier der YouTube iframe </div> 2)
Continue reading...

CSS-Tricks: Wie man absolut positionierte Elemente auf der Seite zentriert

Ab und zu kommt man in die Situation, dass man absolut positionierte Container/Elemente zentrieren muss. Die Lösung dieses Problems ist denkbar einfach, wenn man einmal das Prinzip dahinter verstanden hat. Wie zentriere ich absolut positionierte Elemente? <div id=“absolut-zentriert“>Inhalt</div> #absolut-zentriert { position:absolute; width:500px; left:50%; margin-left:-250px; /* Halbe Breite des Elements */ }
Continue reading...

Bilder für Retina-Displays optimieren

Retina @2x Grafik

Retinabildschirme sind immer häufiger auf deutschen Schreibtischen vertreten. Das besondere an Retina-Displays ist die enorm hohe Auflösung von bis zu 5k, zum Beispiel in Apples neuem iMac. Die hohe Pixeldichte macht es dem menschlichen Auge fast unmöglich, die typischen Abstufungen der einzelnen Pixel zu erkennen. Der Vorteil: Das Bild erscheint deutlich schärfer. Der Nachteil: Normale
Continue reading...

CSS3 – Vollflächiges Hintergrundbild für die Webseite

Zahlreiche Webseiten setzen auf vollflächige Hintergründe. Doch bei zahlreichen Internetseiten ist die Umsetzung eher schlecht als recht und nicht für alle Geräte und Browsertypen korrekt eingerichtet. Wir zeigen heute einen CSS-Codeschnipsel, der vielen Webdesignern die Zeit des Experimentierens verkürzen könnte: html { background: url(images/hintergrund.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size:
Continue reading...