Übersicht über Bilderplatzhalter

Übersicht: http://www.paulund.co.uk/image-placeholder-apis

by Jens Grochtdreis

HTML

<ul class="imageservicelist">
	<li>
		<h2><a href="http://placekitten.com">PlaceKitten</a></h2>
		<img src="http://placekitten.com/200/300" alt="Place Kitten" />
	</li>
	<li>
		<h2><a href="http://placedog.com/">PlaceDog</a></h2>
		<img src="http://placedog.com/200/300" alt="Place Dog" />
	</li>
	<li>
		<h2><a href="http://baconmockup.com">Bacon Mockup</a></h2>
		<img src="http://baconmockup.com/200/300" alt="Bacon Mockup" />
	</li>
	<li>
		<h2><a href="http://lorempixel.com/">Lorem Pixel</a></h2>
		<img src="http://lorempixel.com/400/200/" alt="Lorem Pixel" />
	</li>
	<li>
		<h2><a href="http://placehold.it/">Placehold.it</a></h2>
		<img src="http://placehold.it/400x200" alt="Placehold.it" />
	</li>
	<li>
		<h2>Dummy Image</h2>
		<img src="http://dummyimage.com/400x200" alt="Dummy Image" />
	</li>
	<li>
		<h2><a href="http://dummyimage.com/">Place Ape</a></h2>
		<img src="http://placeape.com/400/300" alt="Place Ape" />
	</li>
	<li>
		<h2><a href="http://placeskull.com/">Place Skull</a></h2>
		<img src="http://placeskull.com/400/200/" alt="Place Skull" />
	</li>
	<li>
		<h2><a href="http://placebear.com/">Placebear</a></h2>
		<img src="http://placebear.com/400/200" alt="Placebear" />
	</li>
	<li>
		<h2><a href="http://hhhhold.com/">hhhhold</a></h2>
		<img src="http://hhhhold.com/png/250" alt="hhhhold" />
	</li>
	<li>
		<h2><a href="http://cambelt.co/">cambelt.co</a></h2>
		<img src="http://cambelt.co/icon/bubble/50x50" />
	</li>
</ul>

CSS

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

.imageservicelist {list-style-type: none;}
.imageservicelist li { background: #eee; padding: 10px 20px; border-left: 10px solid #a20000; margin: 0 0 20px 0;}
.imageservicelist h2 { font-size: 2em; margin-bottom: 10px;}
.imageservicelist h2 a { color: #a20000; }