CSS3: Selector :target

Der CSS3 Selector :target hat ein paar interessante use cases. Einer ist, dass man Ankerziele hervorhebt. (http://labs.jooon.de/css/selectors/target/) Das :target macht nichts anderes als zu checken, ob die URL ein Hashwert enthält und dazu ein passende ID existiert. mit dem :target wird dann das entsprechende Element angesprochen. :target dient also als eine Art "dynamischer" Selector für IDs. Neben dem Hervorheben von Anchorlinks gibt es noch weitere spannende Anwendungsmöglichkeiten. So ist es beispielsweise möglich Elemente rein durch CSS und HTML ein und auszublenden, ohne dass sie direkt verbunden sind.

Favicon und iOS Apple Launcher icons ganz einfach generieren lassen

iconifier ist ein wunderbares online Tool um automatisch alle notwendigen Apple Launcher icons für iOS und das Favicon einfach aus einer Datei generieren zu lassen. Die generierten Dateien inklusive Snippet für den Head werden als ZIP zum Download angeboten. Bislang ist keine Registrierung oder ähnliches notwendig. Ein überaus praktisches Tool für jedes Webprojekt: iconifier.net

Flexslider in Contao 3.2 integrieren

Für ein Projekt habe ich heute den Flexslider in Contao 3.2 integriert. Wer den Flexslider statt der Swipe Slideshow in Contao nutzen möchte, kann sich das angehängte zip-Paket herunterladen. Enthalten ist der Flexslider und die angepassten Templates. Die angepassten Dateien sorgen dafür, dass der Flexslider statt des Wipe Sliders genutzt wird. Der Flexlsider ist out of the box nutzbar und übernimmt ebenfalls die Einstellungen aus dem Backend. Wenn Ihr Probleme oder Feedback habt: nur zu. Der Kommentarbereich steht euch offen.

Full screen background image

//-------------------------------------------------
//  Images Fullscreen

function fullbg(wrapper) {

	$(wrapper).each(function() {
		var $self = $(this),
			$iWidth = $self.find('> img').width(),
			$iHeight = $self.find('> img').height(),
			$wWidth = $self.width(),
			$wHeight = $self.height(),
			iRatio = $iWidth / $iHeight,
			wRatio = $wWidth / $wHeight,
			vspace = ($wWidth - ($wHeight * iRatio)) / 2,
			hspace = ($wHeight - ($wWidth / iRatio)) / 2;

		if(iRatio >= wRatio) {
			$self.find('> img').css({
				width: $wHeight * iRatio + 'px',
				height: $wHeight + 'px',
				marginLeft: vspace + 'px'
			})
		} else {
			$self.find('> img').css({
				width: '100%',
				height: 'auto',
				marginTop: hspace + 'px'
			})
		}

		$self.find('> img').animate({
			opacity: 1
		}, 600);
	});
}


//-------------------------------------------------
//  Window Load

$(window).load(function() {
	fullbg('.fullbg');
});

//-------------------------------------------------
//  Window Resize

$(window).resize(function() {
	fullbg('.fullbg');
});

See the Pen Image Fullscreen by John (@herr_john) on CodePen

Contao: Mit den Page Klassen Weichen in den Templates ermöglichen

Mit einem einfachen Trick ist es möglich in Contao mittels CSS Klassen Weichen in dem Frontend Template (z.B. fe_page.html5) einzubauen. Dazu vergibt man einfach eine Klasse in dem Layout oder der Seite und fragt im Template ab, ob die jeweilige Klasse gesetzt ist. Der einzige Hack ist, dass die Klassen in einem Array gespeichert werden und dieses erst "zerflückt" werden muss:

Chrome Tabs Expose

Chrome hat bereits seit Version 9 eine nette Funktion in Chrome für OS X versteckt. Mit Multitouchpads kann man mit dem Streichen von 3 Fingern sich alle Tabs eines Fensters anzeigen lassen. Einfach in Chrome in die Adressezeile "about:flags" eingeben, unter Experimente "Tab-Übersicht" aktivieren und Chrome neu starten. Et voila…

Mehrere Spalten mit gleicher Höhe mittels display: table und table-cell

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Layout with table / table-cell</title>
<style type="text/css">
#wrapper {
display: table;
}

aside, section {
display: table-cell;
}

aside {
width: 25%;
}

section {
width: 75%;
}
</style>
</head>
<body>
<div id="wrapper">
<section>

Seiten