[jQuery] [Off-Topic] CSS Combine Images
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.E-MailFormatvorlage17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:595.3pt 841.9pt;
margin:70.85pt 70.85pt 2.0cm 70.85pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=DE link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>Normally for each image on a webpage a separate
request to the webserver is required, each taking as much as a hundred
millisecond. Does not sound much, but can add up fast. <o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>There is an easy way to overcome this by combining
images into one single image and address the single images using CSS. <o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>CSS for 1st image in row:<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>background-image : url(combined.png);<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>background-position : 0px -16px; <o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>CSS for 2nd image in row:<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>background-image : url(combined.png);<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>background-position : 0px -32px;<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>I have been using this technique for some time now and
always searched for a tool that would help me combine those images easily, but
never succeeded. That is why I decided to build my own :)<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>This small tool allows you to choose an image
directory and combine all png images into one single image. Its still in its
alpha stage and far from feature complete ;)<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>Current restrictions:<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Only png images are allowed.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Only one row.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- All source images must have the same size.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>Planned features:<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Linux version<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Multiple rows<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Multiple source sizes<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Multiple input formats<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Image selection and sort options<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>- Drag & drop grid to place images<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>I am sure some of you might see some use for this.<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>Enjoy<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'>Alexander<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span lang=EN-GB style='font-size:
10.0pt;font-family:Arial'>-----------------------------</span></font><span
lang=EN-GB><o:p></o:p></span>
<p class=MsoNormal><font size=2 face=Arial><span lang=EN-GB style='font-size:
10.0pt;font-family:Arial'>portalZINE(R)- innovation uncovered <o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><a href="http://www.portalzine.de"><span lang=EN-GB>http://www.portalzine.de</span></a></span></font><font
size=2 face=Arial><span lang=EN-GB style='font-size:10.0pt;font-family:Arial'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span lang=EN-GB style='font-size:
10.0pt;font-family:Arial'> <o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span lang=EN-GB style='font-size:
10.0pt;font-family:Arial'>dev.portalZINE(R) - all about development<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><a href="http://dev.portalzine.de"><span lang=EN-GB>http://dev.portalzine.de</span></a></span></font><font
size=2 face=Arial><span lang=EN-GB style='font-size:10.0pt;font-family:Arial'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span lang=EN-GB style='font-size:
10.0pt;font-family:Arial'> <o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span lang=EN-GB style='font-size:
10.0pt;font-family:Arial'>pro.portalZINE(R) - customized experience<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><a href="http://pro.portalzine.de">http://pro.portalzine.de</a><o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span lang=EN-GB
style='font-size:12.0pt'><o:p> </o:p></span></font>
</div>
</body>
</html>