News und Tipps: Responsive Webdesign Testing, :nth-child, Guide Layout in Photoshop, Devtools und Instagram

Tipps und News - 28.10.14

Ich habe auch diese Woche wieder ein paar News und Tipps zusammengetragen. Diesmal geht es um Responsive Webdesign Testing, :nth-child, Guide Layout in Photoshop, Devtools und Instagram.

nthmaster: Mastering the :nth-child

nthmaster zeigt, neben den Grundlagen, ein paar sehr fortgeschrittene Einsatzmöglichkeiten des :nth-child Selektors.

nthmaster

Beispielsweise kann man die Pseudoklassen so aneinanderreihen, dass nur eine gewisse Spanne an Elementen selektiert wird. In folgendem Beispiel werden alle li Elemente bis zum siebten li angesprochen.

li:nth-child(-n+7) {
    padding-left: 1.5em;
}

Wenn ein zweiter Selektor angehängt wird, kann diese Auswahl gefiltert werden. So werden alle Elemente beginnend beim dritten bis hin zum siebten selektiert.

li:nth-child(-n+7):nth-child(n+3) {
    padding-left: 1.5em;
}

Eine passende Demo gibt es auf Codepen.

RWD testen mit reponsivetest.net

Auf responsivetest.net hat man die Möglichkeit die responsiveness einer Website auf die Schnelle zu testen. Anstatt den Browser größer und kleiner zu ziehen, kann man auf responsivetest.net ein Frame resizen. In diesem Frame wird die Website dann so dargestellt, wie sie sich bei der jeweiligen Breite verhält.

responsivetest.net

Zusätzlich kann man auch fixe Größen einstellen oder eine der vielen Voreinstellungen (z.B.: Lenovo ThinkPad T440s, Macbook Air 13'' oder LG Nexus 4) auswählen.

Photoshop - Guide Layout

Mit dem neuesten Photoshop Update kann man von nun an mehrere Hilfslinien gleichzeitig erstellen. Ermöglicht wird das durch das "Guide Layout" (View -> New Guide Layout).

Photoshop Guide Layout

Es können vertikale und horizontale Linien erstellt, Gutter und Margin festgelegt werden, und vieles mehr. Eine detailliertere Übersicht und Screenshots gibt es auf setOpacity

DevTools Tips

DevTools Tips hat es sich zur Aufgabe gemacht, die coolsten und neuesten Features der Chrome DevTools auf ihrer Website zu sammeln und mit kurzen Videos vorzuführen.

Devtools Tips

Beispielsweise sieht man in den zwei neuesten Videos, dass man in den Chrome Devtools nach HTML Selektoren oder auch nach CSS Eigenschaften filtern kann.

Wie hoch sind alle Fotos auf Instagram zusammen?

Diese Frage haben sich photoworld.com gestellt, beantwortet und sehr nett visualisiert. Das Ergebnis sieht man auf ihrer Photos on the Web - Page.

Instagram

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *