S'inscrire |

 
TEAM
Avatar de Smike
Smike est déconnecté Smike est un Homme 05/02
XP de Smike 3 420 Nombre total de messages de Smike
Voir le profil Facebook de Smike Voir le compte Twitter de Smike Voir le compte DeviantART  de Smike
Administrateur
  #1 (permalink)  
Vieux 16/06/2004, 11h17
[Astuce] PNG > CSS

Voici une astuce qui ne sert a rien puisqu'elle va passer une image png d'une 10ène de ko en une image css en une 100ène de ko mais c assez fun.

>> Exemple ici <<


Voici le code :

Code PHP:
<?php
$im 
imagecreatefrompng("image.png");
// on determine les dimensions de l'image
$width imagesx($im);
$height imagesy($im);
$color = array();
// balayage horizontal
for($cy=0$cy<$height$cy++)
{
    
$image .= "<ul style=\"top: ".($cy+100)."px\">\n";
    
// balayage vertical
    
for($cx=0$cx<$width$cx++)
    {
        
// on recupère l'index de la couleur a la position $cx $cy
        
$rgb imagecolorat($im$cx$cy);
        
// on recupère le code rgb de la couleur a l'index $rgb
        
$col imagecolorsforindex($im$rgb);
        
$tot $col["red"].",".$col["green"].",".$col["blue"];
        if(!
in_array($tot$color)) $color[] = $tot;
        
$temp array_keys($color$tot);
        
$image .= "<li class=\"c".$temp[0]."\" style=\"left: ".($cx+200)."px\">&nbsp;</li>\n";
    }
    
$image .= "</ul>\n";
}
// maintenant on défini nos class css, une par couleur seulement
foreach($color as $k => $v$css .= ".c".$k."{ background-color: rgb(".$v."); }\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>PngToCSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
}
li {
height: 1px;
width: 1px;
line-height: 0;
font-size: 0;
padding: 0;
margin: 0;
display: inline;
position: absolute;
}
<?php
echo $css;
?>

</style>
</head>

<body>
<?php
echo $image;
?>
</body>
</html>
Comme vous l'avez compris le passage en css augmente considerablement le poid de l'image, donc evitez de dépasser 100*100px.


Autre exemple : CSS Pencils
Réponse avec citation
TEAM
Avatar de Booster2000
Booster2000 est déconnecté Booster2000 est un Homme 03/03
XP de Booster2000 1 268 Nombre total de messages de Booster2000
| Traducteur |
  #2 (permalink)  
Vieux 16/06/2004, 13h47
j m les truc qui servent pas
Réponse avec citation
Avatar de stoopx
stoopx est déconnecté Sexe Non renseigné 06/03
XP de stoopx 285 Nombre total de messages de stoopx
Master
  #3 (permalink)  
Vieux 17/06/2004, 12h50
trop fort
Réponse avec citation
Avatar de Xarald
Xarald est déconnecté Sexe Non renseigné 07/03
XP de Xarald 74 Nombre total de messages de Xarald
Membre Habitué
  #4 (permalink)  
Vieux 20/06/2004, 17h41
trés sympa pour comprendre le principe. en tout cas ca pe permetre de protéger ces images car on pe pas les enregistré sous, sinon il semble ke les pages sois trés lourde en charge sur la ram des qu'il y a trop d'image.

Dernière modification par Xarald ; 20/06/2004 à 17h43.
Réponse avec citation
Avatar de darklg
darklg est déconnecté Sexe Non renseigné 08/05
XP de darklg 6 Nombre total de messages de darklg
Nouveau iker
  #5 (permalink)  
Vieux 05/09/2005, 20h22
Génial !
Ca peut tout de meme etre super à étudier comme code, pour le réutiliser à plus petite echelle...
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 23h50.