Changeset 112349 in spip-zone


Ignore:
Timestamp:
Nov 7, 2018, 12:20:16 AM (16 months ago)
Author:
tcharlss@…
Message:

Ménage dans la page de démo : suppression du vieux bootstrap embarqué (pffff... mais quelle idée aussi)

Location:
_plugins_/fonctions_images/trunk
Files:
1 deleted
5 edited

Legend:

Unmodified
Added
Removed

  • _plugins_/fonctions_images/trunk/demo/fonctions_images.html

    r66809 r112349  
    11<!DOCTYPE html>
    2 <html lang="fr">
     2<html lang="#LANG">
    33<head>
    4 <title>Page de démonstration du plugin fonctions d'images</title>
    5 #INSERT_HEAD
    6 #INSERT_HEAD_CSS
    7 <link rel="stylesheet" href="[(#CHEMIN{demo/bootstrap.min.css})]" type="text/css" />
    8 <link rel="stylesheet" href="[(#CHEMIN{demo/style_demo_fonctions_images.css})]" type="text/css" />
     4        <title>Page de démonstration du plugin fonctions d'images</title>
     5        #INSERT_HEAD
     6        #INSERT_HEAD_CSS
     7        <link rel="stylesheet" href="[(#CHEMIN{demo/style_demo_fonctions_images.css})]" type="text/css" />
    98</head>
    109<body>
    1110
    12 <div class="container-fluid">
    13 <div class="row-fluid">
     11        <div class="page">
    1412
    15 <!-- menu à gauche -->
    16 <div class="span3">
    17 <div class="well sidebar-nav affix">
    18 <ul class="nav nav-list">
    19 <li class="nav-header">Les filtres de couleur</li>
    20 <BOUCLE_menu_couleurs(DATA){liste couleur_chroma,couleur_saturer,couleur_teinter,couleur_inverserluminosite,couleur_foncerluminosite,couleur_eclaircirluminosite,couleur_melanger}>
    21 <li><a href="[(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|?{##VALEUR,#SELF|parametre_url{filtres,couleurs}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li>
    22 </BOUCLE_menu_couleurs>
    23 <li class="nav-header">Les filtres de traitement d'image</li>
    24 <BOUCLE_menu_images(DATA){liste image_saturer,image_niveaux_gris_auto,image_courbe,image_float,image_contour_alpha,image_sincity,image_estampage_alpha,image_merge,image_negatif}>
    25 <li><a href="[(#ENV{filtres}|=={images}|?{##VALEUR,#SELF|parametre_url{filtres,images}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li>
    26 </BOUCLE_menu_images>
    27 </ul>
    28 </div>
    29 </div>
     13                <!-- menu à gauche -->
     14                <ul class="menu">
     15                        <li class="menu__item menu__item_header">Traitement des couleurs</li>
     16                        <BOUCLE_menu_couleurs(DATA){liste couleur_chroma,couleur_saturer,couleur_teinter,couleur_inverserluminosite,couleur_foncerluminosite,couleur_eclaircirluminosite,couleur_melanger}>
     17                        <li class="menu__item"><a href="[(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|?{##VALEUR,#SELF|parametre_url{filtres,couleurs}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li>
     18                        </BOUCLE_menu_couleurs>
     19                        <li class="menu__item menu__item_header">Traitement des images</li>
     20                        <BOUCLE_menu_images(DATA){liste image_saturer,image_niveaux_gris_auto,image_courbe,image_float,image_contour_alpha,image_sincity,image_estampage_alpha,image_merge,image_negatif}>
     21                        <li class="menu__item"><a href="[(#ENV{filtres}|=={images}|?{##VALEUR,#SELF|parametre_url{filtres,images}|ancre_url{#VALEUR}})]" class="ajax">#VALEUR</a></li>
     22                        </BOUCLE_menu_images>
     23                </ul>
    3024
    31 <!-- contenu -->
    32 <div class="span9">
    33 <h1>Plugin fonctions d'images</h1>
    34 <p class="lead">
    35 Démonstration des filtres proposés par le plugin fonctions d'images.
    36 La plupart de ces filtres sont expliqués en détail sur le site <a href="http://www.paris-beyrouth.org/tutoriaux-spip/">Paris-Beyrouth</a>.
    37 </p>
    38 [(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|oui)
    39         [(#INCLURE{fond=demo/inc-filtres_couleurs, env, ajax})]
    40 ]
    41 [(#ENV{filtres}|=={images}|oui)
    42         [(#INCLURE{fond=demo/inc-filtres_images, env, ajax})]
    43 ]
    44 </div><!-- fin span-9 -->
     25                <!-- contenu -->
     26                <main class="main">
     27                        <h1>Plugin fonctions d'images</h1>
     28                        <p class="lead">
     29                        Démonstration des filtres proposés par le plugin fonctions d'images.
     30                        La plupart de ces filtres sont expliqués en détail sur le site <a href="http://www.paris-beyrouth.org/tutoriaux-spip/">Paris-Beyrouth</a>.
     31                        </p>
     32                        [(#ENV{filtres}|=={couleurs}|ou{#ENV{filtres}|=={''}}|oui)
     33                                <INCLURE{fond=demo/inc-filtres_couleurs}>
     34                        ]
     35                        [(#ENV{filtres}|=={images}|oui)
     36                                <INCLURE{fond=demo/inc-filtres_images}>
     37                        ]
     38                </main>
    4539
    46 </div><!-- fin row-fluid -->
    47 </div><!-- fin container -->
     40        </div>
    4841</body>
    4942</html>

  • _plugins_/fonctions_images/trunk/demo/inc-filtres_couleurs.html

    r81589 r112349  
    22#SET{couleur2, ##GET{couleur1}|couleur_inverser}
    33
    4 
    5 <!-- filtre couleur_chroma -->
    6 <a name="couleur_chroma"></a>
    7 <div class="boite">
    8 <h2>couleur_chroma</h2>
    9 <p>
    10         Crée une palette de couleurs automatique d'après une couleur
    11         (<a href="http://www.paris-beyrouth.org/Une-nuance-de-couleurs">Paris-Beyrouth : Une nuance de couleurs</a>)
    12 </p>
    13 <dl class="dl-horizontal">
    14         <dt>syntaxe</dt>
    15         <dd><code>|couleur_chroma{3/6}</code></dd>
    16         <dt>argument</dt>
    17         <dd><code>x/y</code> numéro de la couleur / nombre de couleurs souhaitées</dd>
    18         <dt>exemple</dt>
    19         <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_chroma{1/6}"}</code></dd>
    20 </dl>
    21 <BOUCLE_chroma(DATA){liste #GET{couleur1},#GET{couleur2}}>
    22 <div class="apercu nuances">
    23         <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>[(#VALEUR)]</strong></p></div>
    24         <BOUCLE_chromabis(DATA){liste 1/4,2/4,3/4,4/4}>
    25         #SET{couleur, ##_chroma:VALEUR|couleur_chroma{#VALEUR}}
    26         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    27         </BOUCLE_chromabis>
    28         <br style="clear:left" />
     4<hr>
     5
     6<!-- couleur_chroma -->
     7<div class="boite" id="couleur_chroma">
     8        <h2 class="boite__titre">couleur_chroma</h2>
     9        <p>
     10                Crée une palette de couleurs automatique d'après une couleur
     11                (<a href="http://www.paris-beyrouth.org/Une-nuance-de-couleurs">Paris-Beyrouth : Une nuance de couleurs</a>)
     12        </p>
     13        <dl class="codeblock">
     14                <dt>Syntaxe</dt>
     15                <dd><code>couleur_chroma{3/6}</code></dd>
     16                <dt>Paramètre</dt>
     17                <dd>Numéro de la couleur / nombre de couleurs souhaitées</dd>
     18                <dt>Exemple</dt>
     19                <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_chroma{1/6}\)\]"}</code></dd>
     20        </dl>
     21        <BOUCLE_chroma(DATA){liste #GET{couleur1},#GET{couleur2}}>
     22        <div class="apercu apercu_couleurs">
     23                <div class="apercu__item on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];">[(#VALEUR)]</div>
     24                <BOUCLE_chromabis(DATA){liste 1/4,2/4,3/4,4/4}>
     25                #SET{couleur, ##_chroma:VALEUR|couleur_chroma{#VALEUR}}
     26                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     27                </BOUCLE_chromabis>
     28                <br style="clear:left" />
    2929</div>
    3030</BOUCLE_chroma>
    3131</div>
    3232
    33 
    34 <!-- filtre couleur_saturer -->
    35 <a name="couleur_saturer"></a>
    36 <div class="boite">
    37 <h2>couleur_saturer</h2>
    38 <p>
    39         Modifie la saturation d'une couleur.<br>
    40         [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})] A ne pas confondre avec le filtre <code>|couleur_saturation</code> de SPIP qui agit sur l'intensité d'une couleur.
    41 </p>
    42 <dl class="dl-horizontal">
    43         <dt>syntaxe</dt>
    44         <dd><code>|couleur_saturer{1.2}</code></dd>
    45         <dt>argument</dt>
    46         <dd><code>nombre entre 0 et 2</code> <small>(saturation d'origine = 1)</small></dd>
    47         <dt>exemple</dt>
    48         <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_saturer{0.75}"}</code></dd>
    49 </dl>
    50 <BOUCLE_saturer(DATA){liste ##GET{couleur1}|couleur_saturer{0.65},##GET{couleur2}|couleur_saturer{0.65}}>
    51 <div class="apercu nuances">
    52         <BOUCLE_saturerbis(DATA){liste 0.0,0.2,0.4,0.6,0.8,1,1.2,1.4,1.6,1.8,2}>
    53         #SET{couleur, ##_saturer:VALEUR|couleur_saturer{#VALEUR}}
    54         [(#VALEUR|=={1}|oui)
    55         <div class="nuance on" style="background-color:[(#_saturer:VALEUR)]; color:[#(#_saturer:VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>[(#_saturer:VALEUR)]</strong></p></div>
    56         ]
    57         [(#VALEUR|=={1}|non)
    58         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    59         ]
    60         </BOUCLE_saturerbis>
    61         <br style="clear:left" />
     33<hr>
     34
     35<!-- couleur_saturer -->
     36<div class="boite" id="couleur_saturer">
     37        <h2 class="boite__titre">couleur_saturer</h2>
     38        <p>
     39                Modifie la saturation d'une couleur.
     40        </p>
     41        <p>
     42                <span class="warning">
     43                À ne pas confondre avec le filtre <code>couleur_saturation</code> de SPIP qui agit sur l'intensité d'une couleur.
     44        </span>
     45        </p>
     46        <dl class="codeblock">
     47                <dt>Syntaxe</dt>
     48                <dd><code>couleur_saturer{1.2}</code></dd>
     49                <dt>Paramètre</dt>
     50                <dd>nombre entre 0 et 2 (saturation d'origine = 1)</dd>
     51                <dt>Exemple</dt>
     52                <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_saturer{0.75}\)\]"}</code></dd>
     53        </dl>
     54        <BOUCLE_saturer(DATA){liste ##GET{couleur1}|couleur_saturer{0.65},##GET{couleur2}|couleur_saturer{0.65}}>
     55        <div class="apercu apercu_couleurs">
     56                <BOUCLE_saturerbis(DATA){liste 0.0,0.2,0.4,0.6,0.8,1,1.2,1.4,1.6,1.8,2}>
     57                #SET{couleur, ##_saturer:VALEUR|couleur_saturer{#VALEUR}}
     58                [(#VALEUR|=={1}|oui)
     59                <div class="apercu__item on" style="background-color:[(#_saturer:VALEUR)]; color:[#(#_saturer:VALEUR|couleur_extreme|couleur_inverser)];">[(#_saturer:VALEUR)]</div>
     60                ]
     61                [(#VALEUR|=={1}|non)
     62                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     63                ]
     64                </BOUCLE_saturerbis>
     65                <br style="clear:left" />
    6266</div>
    6367</BOUCLE_saturer>
    6468</div>
    6569
    66 
    67 <!-- Filtre couleur_teinter -->
    68 <a name="couleur_teinter"></a>
    69 <div class="boite">
    70 <h2>couleur_teinter</h2>
    71 <p>
    72         Modifie la teinte d'une couleur.
    73 </p>
    74 <dl class="dl-horizontal">
    75         <dt>syntaxe</dt>
    76         <dd><code>|couleur_teinter{30}</code></dd>
    77         <dt>argument</dt>
    78         <dd><code>nombre entre -360 et 360</code> <small>(défaut = 30)</small></dd>
    79         <dt>exemple</dt>
    80         <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_teinter{30}"}</code></dd>
    81 </dl>
    82 <BOUCLE_teinter(DATA){liste #GET{couleur1},#GET{couleur2}}>
    83 <div class="apercu nuances">
    84         <BOUCLE_teinterbis(DATA){liste -360,-150,-120,-90,-60,-30,0,30,60,90,120,150,360}>
    85         #SET{couleur, ##_teinter:VALEUR|couleur_teinter{#VALEUR}}
    86         [(#VALEUR|=={0}|oui)
    87         <div class="nuance on" style="background-color:[(#_teinter:VALEUR)]; color:[#(#_teinter:VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#_teinter:VALEUR</strong></p></div>
    88         ]
    89         [(#VALEUR|=={0}|non)
    90         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    91         ]
    92         </BOUCLE_teinterbis>
    93         <br style="clear:left" />
    94 </div>
    95 </BOUCLE_teinter>
    96 </div>
    97 
    98 
    99 <!-- Filtre couleur_inverserluminosite -->
    100 <a name="couleur_inverserluminosite"></a>
    101 <div class="boite">
    102 <h2>couleur_inverserluminosite</h2>
    103 <p>
    104         Inverse la luminosité d'une couleur. </br>
    105         [(#CHEMIN_IMAGE{information-16.png}|balise_img{"",icone})] Ce filtre est apparenté aux filtres <code>|couleur_foncer_si_claire</code> et <code>|couleur_eclaircir_si_foncee</code> natifs de SPIP, à ceci près qu'il détermine automatiquement s'il doit foncer ou éclaircir la couleur.
    106 </p>
    107 <dl class="dl-horizontal">
    108         <dt>syntaxe</dt>
    109         <dd><code>|couleur_inverserluminosite{20, false}</code></dd>
    110         <dt>argument 1</dt>
    111         <dd>pourcentage <code>nombre entre 0 et 100</code> <small>(défaut = 20)</small></dd>
    112         <dt>argument 2</dt>
    113         <dd>intensifier <code>true / false</code> <small>(défaut = false)</small></dd>
    114         <dt>exemple</dt>
    115         <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_inverserluminosite{20,true}"}</code></dd>
    116 </dl>
    117 <BOUCLE_inverser(DATA){liste #GET{couleur1},##GET{couleur2}|couleur_foncerluminosite{30},#ffffff,#000000}>
    118 <div class="apercu nuances">
    119         <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div>
    120         <BOUCLE_inverserbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}>
    121         #SET{couleur, ##_inverser:VALEUR|couleur_inverserluminosite{#VALEUR}}
    122         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    123         </BOUCLE_inverserbis>
    124         <br style="clear:left" />
    125 </div>
    126 </BOUCLE_inverser>
    127 </div>
    128 
    129 
    130 <!-- Filtre couleur_foncerluminosite -->
    131 <a name="couleur_foncerluminosite"></a>
    132 <div class="boite">
    133 <h2>couleur_foncerluminosite</h2>
    134 <p>
    135         Fonce une couleur<br>
    136         [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})] Le filtre <code>|couleur_foncer</code> de SPIP procure la même fonctionnalité.
    137 </p>
    138 <dl class="dl-horizontal">
    139         <dt>syntaxe</dt>
    140         <dd><code>|couleur_foncerluminosite{20}</code></dd>
    141         <dt>argument</dt>
    142         <dd><code>nombre entre 0 et 100</code> <small>(défaut = 20)</small></dd>
    143         <dt>exemple</dt>
    144         <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_foncerluminosite{20}"}</code></dd>
    145 </dl>
    146 <BOUCLE_foncer(DATA){liste #GET{couleur1},#ffffff}>
    147 <div class="apercu nuances">
    148         <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div>
    149         <BOUCLE_foncerbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}>
    150         #SET{couleur, ##_foncer:VALEUR|couleur_foncerluminosite{#VALEUR}}
    151         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    152         </BOUCLE_foncerbis>
    153         <br style="clear:left" />
    154 </div>
    155 </BOUCLE_foncer>
    156 </div>
    157 
    158 
    159 <!-- Filtre couleur_eclaircirluminosite -->
    160 <a name="couleur_eclaircirluminosite"></a>
    161 <div class="boite">
    162 <h2>couleur_eclaircirluminosite</h2>
    163 <p>
    164         Eclaircit une couleur<br>
    165         [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})] Le filtre <code>|couleur_eclaircir</code> de SPIP procure la même fonctionnalité.
    166 </p>
    167 <dl class="dl-horizontal">
    168         <dt>syntaxe</dt>
    169         <dd><code>|couleur_eclaircirluminosite{20}</code></dd>
    170         <dt>argument</dt>
    171         <dd><code>nombre entre 0 et 100</code> <small>(défaut=20)</small></dd>
    172         <dt>exemple</dt>
    173         <dd><code class="exemple">#VAL{"#VAL{c5e41d}|couleur_eclaircirluminosite{20}"}</code></dd>
    174 </dl>
    175 <BOUCLE_eclaircir(DATA){liste #GET{couleur1},#000000}>
    176 <div class="apercu nuances">
    177         <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div>
    178         <BOUCLE_eclaircirbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}>
    179         #SET{couleur, ##_eclaircir:VALEUR|couleur_eclaircirluminosite{#VALEUR}}
    180         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    181         </BOUCLE_eclaircirbis>
    182         <br style="clear:left" />
    183 </div>
    184 </BOUCLE_eclaircir>
    185 </div>
    186 
    187 
    188 <!-- Filtre couleur_melanger -->
    189 <a name="couleur_melanger"></a>
    190 <div class="boite">
    191 <h2>couleur_melanger</h2>
    192 <p>
    193         Mélange deux couleurs.
    194 </p>
    195 <dl class="dl-horizontal">
    196         <dt>syntaxe</dt>
    197         <dd><code>|couleur_melanger{couleurB, 50}</code></dd>
    198         <!--<dd><code>#VAL{"#LISTE{couleurA, couleurB}|couleur_melanger{50}"}</code></dd>-->
    199         <dt>argument</dt>
    200         <dd><code>nombre entre 0 et 100</code> <small>(défaut=50)</small></dd>
    201         <dt>exemples</dt>
    202         <dd><code class="exemple">#VAL{"#VAL{ff4900}|couleur_melanger{c5e41d, 50}"}</code></dd>
    203         <!--<dd><code class="exemple">#VAL{"#LISTE{ff4900, c5e41d}|couleur_melanger{50}"}</code></dd>-->
    204 </dl>
    205 <BOUCLE_melanger(DATA){source table, #ARRAY{#GET{couleur1},#GET{couleur2}, #GET{couleur2},#dddddd, #ff4900, #GET{couleur1}}}>
    206 <div class="apercu nuances">
    207         <div class="nuance on" style="background-color:[(#CLE)]; color:[#(#CLE|couleur_extreme|couleur_inverser)];"><p><strong>#CLE</strong></p></div>
    208         <div class="nuance on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#VALEUR</strong></p></div>
    209         <BOUCLE_melangerbis(DATA){liste 0.0,20,40,60,80,100}>
    210         #SET{couleur, ##_melanger:CLE|couleur_melanger{#_melanger:VALEUR, #VALEUR}}
    211         <div class="nuance" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];"><p>#VALEUR</p></div>
    212         </BOUCLE_melangerbis>
    213         <br style="clear:left" />
    214 </div>
    215 </BOUCLE_melanger>
    216 </div>
     70<hr>
     71
     72<!-- couleur_teinter -->
     73<div class="boite" id="couleur_teinter">
     74        <h2 class="boite__titre">couleur_teinter</h2>
     75        <p>
     76                Modifie la teinte d'une couleur.
     77        </p>
     78        <dl class="codeblock">
     79                <dt>Syntaxe</dt>
     80                <dd><code>couleur_teinter{30}</code></dd>
     81                <dt>Paramètre</dt>
     82                <dd>nombre entre -360 et 360 (défaut = 30)</dd>
     83                <dt>Exemple</dt>
     84                <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_teinter{30}\)\]"}</code></dd>
     85        </dl>
     86        <BOUCLE_teinter(DATA){liste #GET{couleur1},#GET{couleur2}}>
     87        <div class="apercu apercu_couleurs">
     88                <BOUCLE_teinterbis(DATA){liste -360,-150,-120,-90,-60,-30,0,30,60,90,120,150,360}>
     89                #SET{couleur, ##_teinter:VALEUR|couleur_teinter{#VALEUR}}
     90                [(#VALEUR|=={0}|oui)
     91                <div class="apercu__item on" style="background-color:[(#_teinter:VALEUR)]; color:[#(#_teinter:VALEUR|couleur_extreme|couleur_inverser)];"><p><strong>#_teinter:VALEUR</strong></p></div>
     92                ]
     93                [(#VALEUR|=={0}|non)
     94                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     95                ]
     96                </BOUCLE_teinterbis>
     97                <br style="clear:left" />
     98        </div>
     99        </BOUCLE_teinter>
     100</div>
     101
     102<hr>
     103
     104<!-- couleur_inverserluminosite -->
     105<div class="boite" id="couleur_inverserluminosite">
     106        <h2 class="boite__titre">couleur_inverserluminosite</h2>
     107        <p>
     108                Inverse la luminosité d'une couleur.
     109        </p>
     110        <p>
     111                <span class="warning">
     112                Ce filtre est apparenté aux filtres <code>couleur_foncer_si_claire</code> et <code>couleur_eclaircir_si_foncee</code> natifs de SPIP, à ceci près qu'il détermine automatiquement s'il doit foncer ou éclaircir la couleur.
     113                <span class="warning">
     114        </p>
     115        <dl class="codeblock">
     116                <dt>Syntaxe</dt>
     117                <dd><code>couleur_inverserluminosite{20, false}</code></dd>
     118                <dt>Paramètre 1</dt>
     119                <dd>pourcentage : nombre entre 0 et 100 (défaut = 20)</dd>
     120                <dt>Paramètre 2</dt>
     121                <dd>intensifier : true / false (défaut = false)</dd>
     122                <dt>Exemple</dt>
     123                <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_inverserluminosite{20,true}\)\]"}</code></dd>
     124        </dl>
     125        <BOUCLE_inverser(DATA){liste #GET{couleur1},##GET{couleur2}|couleur_foncerluminosite{30},#ffffff,#000000}>
     126        <div class="apercu apercu_couleurs">
     127                <div class="apercu__item on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     128                <BOUCLE_inverserbis(DATA){liste 10,20,30,40,50,60,70,80,90,100}>
     129                #SET{couleur, ##_inverser:VALEUR|couleur_inverserluminosite{#VALEUR}}
     130                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     131                </BOUCLE_inverserbis>
     132                <br style="clear:left" />
     133        </div>
     134        </BOUCLE_inverser>
     135</div>
     136
     137<hr>
     138
     139
     140<!-- couleur_foncerluminosite -->
     141<div class="boite" id="couleur_foncerluminosite">
     142        <h2 class="boite__titre">couleur_foncerluminosite</h2>
     143        <p>
     144                Fonce une couleur
     145        </p>
     146        <p>
     147                <span class="warning">
     148                        Le filtre <code>couleur_foncer</code> de SPIP procure la même fonctionnalité.
     149                </span>
     150        </p>
     151        <dl class="codeblock">
     152                <dt>Syntaxe</dt>
     153                <dd><code>couleur_foncerluminosite{20}</code></dd>
     154                <dt>Paramètre</dt>
     155                <dd>nombre entre 0 et 100 (défaut = 20)</dd>
     156                <dt>Exemple</dt>
     157                <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_foncerluminosite{20}\)\]"}</code></dd>
     158        </dl>
     159        <div class="apercu apercu_couleurs">
     160                <div class="apercu__item on" style="background-color:[(#GET{couleur1})]; color:[#(#GET{couleur1}|couleur_extreme|couleur_inverser)];">#GET{couleur1}</div>
     161                <BOUCLE_foncer(DATA){liste 10,20,30,40,50,60,70,80,90,100}>
     162                #SET{couleur, ##GET{couleur1}|couleur_foncerluminosite{#VALEUR}}
     163                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     164                </BOUCLE_foncer>
     165        </div>
     166</div>
     167
     168<hr>
     169
     170
     171<!-- couleur_eclaircirluminosite -->
     172<div class="boite" id="couleur_eclaircirluminosite">
     173        <h2 class="boite__titre">couleur_eclaircirluminosite</h2>
     174        <p>
     175                Eclaircit une couleur<br>
     176        </p>
     177        <p>
     178                <span class="warning">
     179                Le filtre <code>couleur_eclaircir</code> de SPIP procure la même fonctionnalité.
     180                </span>
     181        </p>
     182        <dl class="codeblock">
     183                <dt>Syntaxe</dt>
     184                <dd><code>couleur_eclaircirluminosite{20}</code></dd>
     185                <dt>Paramètre</dt>
     186                <dd><code>nombre entre 0 et 100</code> <small>(défaut=20)</small></dd>
     187                <dt>Exemple</dt>
     188                <dd><code class="Exemple">#VAL{"\[\(#VAL{c5e41d}|couleur_eclaircirluminosite{20}\)\]"}</code></dd>
     189        </dl>
     190        <div class="apercu apercu_couleurs">
     191                <div class="apercu__item on" style="background-color:[(#GET{couleur1})]; color:[#(#GET{couleur1}|couleur_extreme|couleur_inverser)];">#GET{couleur1}</div>
     192                <BOUCLE_eclaircir(DATA){liste 10,20,30,40,50,60,70,80,90,100}>
     193                #SET{couleur, ##GET{couleur1}|couleur_eclaircirluminosite{#VALEUR}}
     194                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     195                </BOUCLE_eclaircir>
     196        </div>
     197</div>
     198
     199<hr>
     200
     201
     202<!-- couleur_melanger -->
     203<div class="boite" id="couleur_melanger">
     204        <h2 class="boite__titre">couleur_melanger</h2>
     205        <p>
     206                Mélange deux couleurs.
     207        </p>
     208        <dl class="codeblock">
     209                <dt>Syntaxe</dt>
     210                <dd><code>couleur_melanger{couleurB, 50}</code></dd>
     211                <!--<dd><code>#VAL{"#LISTE{couleurA, couleurB}|couleur_melanger{50}"}</code></dd>-->
     212                <dt>Paramètre</dt>
     213                <dd>nombre entre 0 et 100 (défaut=50)</dd>
     214                <dt>Exemples</dt>
     215                <dd><code class="Exemple">#VAL{"\[\(#VAL{ff4900}|couleur_melanger{c5e41d, 50}\)\]"}</code></dd>
     216                <!--<dd><code class="Exemple">#VAL{"#LISTE{ff4900, c5e41d}|couleur_melanger{50}"}</code></dd>-->
     217        </dl>
     218        <BOUCLE_melanger(DATA){source table, #ARRAY{#GET{couleur1},#GET{couleur2}, #GET{couleur2},#dddddd, #ff4900, #GET{couleur1}}}>
     219        <div class="apercu apercu_couleurs">
     220                <div class="apercu__item on" style="background-color:[(#CLE)]; color:[#(#CLE|couleur_extreme|couleur_inverser)];"><p><strong>#CLE</strong></p></div>
     221                <div class="apercu__item on" style="background-color:[(#VALEUR)]; color:[#(#VALEUR|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     222                <BOUCLE_melangerbis(DATA){liste 0.0,20,40,60,80,100}>
     223                #SET{couleur, ##_melanger:CLE|couleur_melanger{#_melanger:VALEUR, #VALEUR}}
     224                <div class="apercu__item" style="background-color:[(#GET{couleur})]; color:[#(#GET{couleur}|couleur_extreme|couleur_inverser)];">#VALEUR</div>
     225                </BOUCLE_melangerbis>
     226                <br style="clear:left" />
     227        </div>
     228        </BOUCLE_melanger>
     229</div>

  • _plugins_/fonctions_images/trunk/demo/inc-filtres_images.html

    r66846 r112349  
     1#SET{img,#CHEMIN{images/ecureuil.jpg}|balise_img}
    12#SET{couleur1, #c5e41d}
    23#SET{couleur2, ##GET{couleur1}|couleur_inverser}
    34
    45
    5 <!-- filtre image_saturer -->
    6 <a name="image_saturer"></a>
    7 <div class="boite">
    8 <h2>image_saturer</h2>
    9 <p>
    10         Modifie la saturation d'une image<br />
    11 </p>
    12 <dl class="dl-horizontal">
    13         <dt>syntaxe</dt>
    14         <dd><code>|image_saturer{1.2}</code></dd>
    15         <dt>argument</dt>
    16         <dd><code>nombre entre 0 et2</code> <small>(1 = saturation d'origine)</small></dd>
    17         <dt>exemple</dt>
    18         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_saturer{1.2}"}</code></dd>
    19 </dl>
    20 <div class="apercu images">
    21         <BOUCLE_imgsaturer(DATA){liste 0.0, 0.5, 1, 1.5, 2}>
    22         [(#VALEUR|=={1}|oui)
    23         <div class="image on">[<p>(#VALEUR) = originale</p>][(#CHEMIN{images/ecureuil.jpg}|image_reduire{150})]</div>
    24         ]
    25         [(#VALEUR|=={1}|non)
    26         <div class="image">[<p>(#VALEUR)</p>][(#CHEMIN{images/ecureuil.jpg}|image_reduire{150}|image_saturer{#VALEUR})]</div>
    27         ]
    28         </BOUCLE_imgsaturer>
    29         <br style="clear:left">
    30 </div>
    31 </div>
    32 
    33 
    34 <!-- filtre image_niveaux_gris_auto -->
    35 <a name="image_niveaux_gris_auto"></a>
    36 <div class="boite">
    37 <h2>image_niveaux_gris_auto</h2>
    38 <p>
    39         Corrige automatiquement les niveaux de gris d'une image.
    40         <a href="http://www.paris-beyrouth.org/Corriger-les-niveaux-des-images">(Paris-Beyrouth : Corriger les niveaux des images</a>)
    41 </p>
    42 <dl class="dl-horizontal">
    43         <dt>syntaxe</dt>
    44         <dd><code>|image_niveaux_gris_auto</code></dd>
    45         <dt>exemple</dt>
    46         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_niveaux_gris_auto"}</code></dd>
    47 </dl>
    48 <div class="apercu images">
    49         <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 1=75})]</div>
    50         <div class="image"><p>niveaux_gris_auto</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 1=75}|image_niveaux_gris_auto)]</div>
    51         <br style="clear:left">
    52 </div>
    53 </div>
    54 
     6<hr>
     7
     8<!-- image_saturer -->
     9<div class="boite" id="image_saturer">
     10        <h2 class="boite__titre">image_saturer</h2>
     11        <p>
     12                Modifie la saturation d'une image<br />
     13        </p>
     14        <dl class="codeblock">
     15                <dt>Syntaxe</dt>
     16                <dd><code>image_saturer{1.2}</code></dd>
     17                <dt>Paramètre</dt>
     18                <dd>nombre entre 0 et 2 (1 = saturation d'origine)</dd>
     19                <dt>Exemple</dt>
     20                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_saturer{1.2}\)\]"}</code></dd>
     21        </dl>
     22        <div class="apercu apercu_images">
     23                <BOUCLE_imgsaturer(DATA){liste 0.0, 0.5, 1, 1.5, 2}>
     24                [(#VALEUR|=={1}|oui)
     25                <div class="apercu__item on">[<p>(#VALEUR) = originale</p>][(#GET{img})]</div>
     26                ]
     27                [(#VALEUR|=={1}|non)
     28                <div class="apercu__item">[<p>(#VALEUR)</p>][(#GET{img}|image_saturer{#VALEUR})]</div>
     29                ]
     30                </BOUCLE_imgsaturer>
     31        </div>
     32</div>
     33
     34<hr>
     35
     36<!-- image_niveaux_gris_auto -->
     37<div class="boite" id="image_niveaux_gris_auto">
     38        <h2 class="boite__titre">image_niveaux_gris_auto</h2>
     39        <p>
     40                Corrige automatiquement les niveaux de gris d'une image.
     41                <a href="http://www.paris-beyrouth.org/Corriger-les-niveaux-des-images">(Paris-Beyrouth : Corriger les niveaux des images</a>)
     42        </p>
     43        <dl class="codeblock">
     44                <dt>Syntaxe</dt>
     45                <dd><code>image_niveaux_gris_auto</code></dd>
     46                <dt>Exemple</dt>
     47                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_niveaux_gris_auto\)\]"}</code></dd>
     48        </dl>
     49        <div class="apercu apercu_images">
     50                <div class="apercu__item on"><p>originale</p>[(#GET{img}|image_courbe{rvb, 1=75})]</div>
     51                <div class="apercu__item"><p>niveaux_gris_auto</p>[(#GET{img}|image_courbe{rvb, 1=75}|image_niveaux_gris_auto)]</div>
     52        </div>
     53</div>
    5554
    5655[(#REM) ne semble pas marcher
    57 <!-- filtre image_podpod -->
    58 <a name="image_podpod"></a>
    59 <div class="boite">
    60 <h2>image_podpod</h2>
    61 <p>
    62         Rempli par une couleur la plage de niveau de gris compris entre 2 paramètres.
    63         (<a href="http://www.paris-beyrouth.org/Creer-automatiquement-une">Paris-Beyrouth : Créer automatiquement une publicité podPod</a>)
    64 </p>
    65 <dl class="dl-horizontal">
    66         <dt>syntaxe</dt>
    67         <dd><code>|image_podpod{c5e41d,150,200}</code></dd>
    68         <dt>argument1</dt>
    69         <dd><code>#couleur</code></dd>
    70         <dt>argument2</dt>
    71         <dd><code>nombre entre 0 et 255</code><small>borne basse de la plage de couleur</small></dd>
    72         <dt>argument3</dt>
    73         <dd><code>nombre entre 0 et 255</code><small>borne haute de la plage de couleur</small></dd>
    74         <dt>exemple</dt>
    75         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_podpod{c5e41d,150,200}"}</code></dd>
    76 </dl>
    77 <div class="apercu images">
    78         <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
    79         <div class="image"><p>dd5500,100,255</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img|image_podpod{000000,0,70})]</div>
    80         <br style="clear:left">
    81 </div>
     56<hr>
     57<!-- image_podpod -->
     58<div class="boite" id="image_podpod">
     59        <h2 class="boite__titre">image_podpod</h2>
     60        <p>
     61                Rempli par une couleur la plage de niveau de gris compris entre 2 Paramètres.
     62                (<a href="http://www.paris-beyrouth.org/Creer-automatiquement-une">Paris-Beyrouth : Créer automatiquement une publicité podPod</a>)
     63        </p>
     64        <dl class="codeblock">
     65                <dt>Syntaxe</dt>
     66                <dd><code>image_podpod{c5e41d,150,200}</code></dd>
     67                <dt>Paramètre1</dt>
     68                <dd>Code hexadécimal</dd>
     69                <dt>Paramètre2</dt>
     70                <dd>Nombre entre 0 et 255 : borne basse de la plage de couleur</dd>
     71                <dt>Paramètre3</dt>
     72                <dd>Nombre entre 0 et 255 : borne haute de la plage de couleur</dd>
     73                <dt>Exemple</dt>
     74                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_podpod{c5e41d,150,200}\)\]"}</code></dd>
     75        </dl>
     76        <div class="apercu apercu_images">
     77                <div class="apercu__item on"><p>originale</p>[(#GET{img}|balise_img)]</div>
     78                <div class="apercu__item"><p>dd5500,100,255</p>[(#GET{img}|balise_img|image_podpod{000000,0,70})]</div>
     79        </div>
    8280</div>
    8381]
    8482
     83<hr>
    8584
    8685<!-- filtre couleur_courbe -->
    87 <a name="image_courbe"></a>
    88 <div class="boite">
    89 <h2>image_courbe</h2>
    90 <p>
    91         Modifie les courbes d'une image, en manipulant 1 ou 2 points de la courbe
    92         <a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/modifier-les-courbes-d-une-image">(Paris-Beyrouth : Modifier les courbes d'une image)</a><br />
    93 </p>
    94 [<p>(#CHEMIN{images/courbes.png}|balise_img)</p>]
    95 <dl class="dl-horizontal">
    96         <dt>syntaxe</dt>
    97         <dd><code>|image_courbe{rvb, 80=30, 170=220}</code></dd>
    98         <dt>argument 1</dt>
    99         <dd><code>rvb/r/v/b</code> <small>couche(s) de couleur(s) affectée(s)</small></dd>
    100         <dt>argument 2</dt>
    101         <dd><code>x=y</code> <small>nombres de 0 à 255</small></dd>
    102         <dt>argument3</dt>
    103         <dd><code>x=y</code> <small>(optionnel) nombres de 0 à 255</small></dd>
    104         <dt>exemple</dt>
    105         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=30, 170=220}"}</code></dd>
    106 </dl>
    107 <div class="apercu images">
    108         <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|image_reduire{200})]</div>
    109         <BOUCLE_imgcourbe(DATA){source table, #LISTE{#ARRAY{param1,rvb, param2,80=30, param3,170=220}, #ARRAY{param1,rvb, param2,80=100, param3,170=150}, #ARRAY{param1,r, param2,130=40, param3,190=160}}}>
    110         <div class="image"><p>#VALEUR{param1}, #VALEUR{param2}, #VALEUR{param3}</p>[(#CHEMIN{images/ecureuil.jpg}|image_reduire{200}|image_courbe{#VALEUR{param1},#VALEUR{param2},#VALEUR{param3}})]</div>
    111         </BOUCLE_imgcourbe>
    112         <br style="clear:left">
    113 </div>
    114 </div>
    115 
    116 
    117 <!-- filtre image_float -->
    118 <a name="image_float"></a>
    119 <div class="boite">
    120 <h2>image_float</h2>
    121 <p>
    122         Faire un texte qui épouse une image
    123         <a href="http://www.paris-beyrouth.org/Un-habillage-irregulier-2">(Paris-Beyrouth :  Un habillage irrégulier</a>)<br />
    124 </p>
    125 <dl class="dl-horizontal">
    126         <dt>syntaxe</dt>
    127         <dd><code>|image_float{left, 10, ffffff}</code></dd>
    128         <dt>argument 1</dt>
    129         <dd><code>left/center/right</code> <small>position de l'image</small></dd>
    130         <dt>argument 2</dt>
    131         <dd><code>nombre</code> <small>marge en px autour de l'image</small></dd>
    132         <dt>argument3</dt>
    133         <dd><code>#couleur</code> <small>(optionnel) couleur de fond de l'image</small></dd>
    134         <dt>exemple</dt>
    135         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5}"}</code></dd>
    136 </dl>
    137 <div class="texte float">
    138 [(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5})]
    139 <p>
    140 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus utnunc eget ante ornare nonummy. Ut arcu. Duis tincidunt tincidunt quam. In elementum blandit odio. Nullam ultrices. Nulla sem augue, mollis id, vulputate eget, ullamcorper ultrices, purus. Aenean porttitor odio at mauris. Mauris quis enim vitae purus dictum ultricies.
    141 </p>
    142 <p>
    143 Proin pharetra lectus auctor lacus. Quisque at sem ac lectus ornare vehicula. Nunc pulvinar, leo ut tristique auctor, felis diam gravida neque, consectetuer cursus sem
    144 nisl ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo. Aliquam erat volutpat. Sed vel enim nec tellus suscipit imperdiet. Maecenas sagittis, dolor id tincidunt suscipit, orci tortor fermentum mi, id varius dolor nisi quis lectus. Quisque ante sem, molestie a, euismod sed, tempus sit amet, mauris. Integer vel ante eget urna sagittis consectetuer. Quisque ullamcorper convallis velit.
    145 </p>
    146 </div>
    147 </div>
    148 
    149 
    150 <!-- filtre image_contour_alpha -->
    151 <a name="image_contour_alpha"></a>
    152 <div class="boite">
    153 <h2>image_contour_alpha</h2>
    154 <p>
    155         Trace le contour d'une image transparente (<a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/tracer-les-contours-de">Paris-Beyrout : Tracer les contours de transparence</a>)
    156 </p>
    157 <dl class="dl-horizontal">
    158         <dt>syntaxe</dt>
    159         <dd><code>|image_contour_alpha{000000, 1}</code></dd>
    160         <dt>argument 1</dt>
    161         <dd><code>#couleur</code> <small>couleur du contour</small></dd>
    162         <dt>argument 2</dt>
    163         <dd><code>nombre</code> <small>épaisseur du contour</small></dd>
    164         <dt>exemple</dt>
    165         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_contour_alpha{000000, 1}"}</code></dd>
    166 </dl>
    167 <div class="apercu images">
    168         <div class="image on alpha bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div>
    169         <div class="image alpha bordure"><p>000000, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{000000, 2})]</div>
    170         <div class="image alpha bordure"><p>9dba00, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{9dba00, 2})]</div>
    171         <br style="clear:left">
    172 </div>
    173 </div>
    174 
    175 
    176 <!-- filtre image_sincity -->
    177 <a name="image_sincity"></a>
    178 <div class="boite">
    179 <h2>image_sincity</h2>
    180 <p>
    181         Effet automatique : saturation contrastée + accentuation du rouge
    182         <a href="http://www.paris-beyrouth.org/Welcome-to-Spip-City">(Paris-Beyrouth : Welcome to Spip-City)</a>
    183 </p>
    184 <dl class="dl-horizontal">
    185         <dt>syntaxe</dt>
    186         <dd><code>|image_sincity</code></dd>
    187         <dt>exemple</dt>
    188         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_sincity"}</code></dd>
    189 </dl>
    190 <div class="apercu images">
    191         <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=40})]</div>
    192         <div class="image"><p>sincity</p>[(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=40}|image_sincity)]</div>
    193         <br style="clear:left">
    194 </div>
    195 </div>
    196 
    197 
    198 <!-- filtre image_estampage_alpha -->
    199 <a name="image_estampage_alpha"></a>
    200 <div class="boite">
    201 <h2>image_estampage_alpha</h2>
    202 <p>
    203         Réalise des estampages
    204         <a href="http://www.paris-beyrouth.org/Des-titres-en-relief">(Paris-Beyrouth : Des titres en relief)</a>
    205 </p>
    206 <dl class="dl-horizontal">
    207         <dt>syntaxe</dt>
    208         <dd><code>|image_estampage_alpha{1,1}</code></dd>
    209         <dt>argument 1</dt>
    210         <dd><code>nombre</code> <small>épaisseur en px</small></dd>
    211         <dt>argument 2</dt>
    212         <dd><code>nombre</code> <small>netteté</small></dd>
    213         <dt>exemple</dt>
    214         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{1,1}"}</code></dd>
    215 </dl>
    216 <div class="apercu images">
    217         <div class="image alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div>
    218         <BOUCLE_imgestampage(DATA){source table, #LISTE{#ARRAY{param1,1, param2,1}, #ARRAY{param1,1, param2,4}, #ARRAY{param1,4, param2,1}}}>
    219         <div class="image"><p>#VALEUR{param1}, #VALEUR{param2}</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{#VALEUR{param1},#VALEUR{param2}})]</div>
    220         </BOUCLE_imgestampage>
    221         <br style="clear:left">
    222 </div>
    223 </div>
    224 
    225 
    226 <!-- filtre image_dispersion -->
    227 <a name="image_dispersion"></a>
    228 <div class="boite">
    229 <h2>image_dispersion</h2>
    230 <p>
    231         Réalise des dispersions, des floutages
    232         <a href="http://www.paris-beyrouth.org/Un-filtre-de-dispersion-graphique">(Paris-Beyrouth : Un filtre de dispersion graphique</a>)
    233 </p>
    234 <dl class="dl-horizontal">
    235         <dt>syntaxe</dt>
    236         <dd><code>|image_dispersion{url_image, 8, 8}</code></dd>
    237         <dt>argument 1</dt>
    238         <dd><code>url de l'image servant de filtre</code> <small></small></dd>
    239         <dt>argument 2</dt>
    240         <dd><code>nombre</code> <small>déplacement en x</small></dd>
    241         <dt>argument 3</dt>
    242         <dd><code>nombre</code> <small>déplacement en y</small></dd>
    243         <dt>exemple</dt>
    244         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8}"}</code></dd>
    245 </dl>
    246 <div class="apercu images">
    247         <div class="image alpha on"><p>image 1</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
    248         <div class="image alpha on"><p>masque</p>[(#CHEMIN{images/disp-noir.png}|balise_img)]</div>
    249         <div class="image"><p>8, 8</p>[(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8})]</div>
    250         <br style="clear:left">
    251 </div>
    252 <div class="apercu images">
    253         <div class="image alpha on"><p>image 1</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
    254         <div class="image alpha on"><p>masque</p>[(#CHEMIN{images/disp-twirl.png}|balise_img)]</div>
    255         <div class="image"><p>8, 8</p>[(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-twirl.png},8,8})]</div>
    256         <br style="clear:left">
    257 </div>
    258 </div>
    259 
    260 
    261 <!-- filtre image_merge -->
    262 <a name="image_merge"></a>
    263 <div class="boite">
    264 <h2>image_merge</h2>
    265 <p>
    266         Superpose une image sur une autre<br>
    267         [(#CHEMIN_IMAGE{warning-16.png}|balise_img{"",icone})]Le filtre <code>|image_masque</code> de Spip permet d'obtenir le même résultat, et propose plus d'options.
    268 </p>
    269 <dl class="dl-horizontal">
    270         <dt>syntaxe</dt>
    271         <dd><code>|image_merge{url_image, right, top}</code></dd>
    272         <dt>argument 1</dt>
    273         <dd><code>left/center/right</code> <small>placement horizontal</small></dd>
    274         <dt>argument 2</dt>
    275         <dd><code>top/middle/bottom</code> <small>placement vertical</small></dd>
    276         <dt>exemple</dt>
    277         <dd><code class="exemple">#VAL{"#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle}"}</code></dd>
    278 </dl>
    279 <div class="apercu images">
    280         <div class="image on bordure"><p>image 1</p>[(#CHEMIN{images/quadrillage.png}|balise_img)]</div>
    281         <div class="image alpha on"><p>image 2</p>[(#CHEMIN{images/cercle.png}|balise_img)]</div>
    282         <div class="image bordure"><p>center, middle</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle})]</div>
    283         <div class="image bordure"><p>left, bottom</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},left,bottom})]</div>
    284         <br style="clear:left">
    285 </div>
    286 </div>
    287 
    288 
    289 <!-- filtre image_negatif -->
    290 <a name="image_negatif"></a>
    291 <div class="boite">
    292 <h2>image_negatif</h2>
    293 <p>
    294         Passe une image en négatif<br>
    295         [(#CHEMIN_IMAGE{information-16.png}|balise_img{"",icone})]Le filtre <code class="exemple">|image_courbe{rvb, 0=255, 255=0}</code> produira le même résultat
    296 </p>
    297 <dl class="dl-horizontal">
    298         <dt>syntaxe</dt>
    299         <dd><code>|image_negatif</code></dd>
    300         <dt>exemple</dt>
    301         <dd><code class="exemple">#VAL{"#CHEMIN{images/ecureuil.jpg}|image_negatif"}</code></dd>
    302 </dl>
    303 <div class="apercu images">
    304         <div class="image on"><p>originale</p>[(#CHEMIN{images/ecureuil.jpg}|balise_img)]</div>
    305         <div class="image"><p>image_negatif</p>[(#CHEMIN{images/ecureuil.jpg}|image_negatif)]</div>
    306         <br style="clear:left">
    307 </div>
    308 </div>
     86<div class="boite" id="image_courbe">
     87        <h2 class="boite__titre">image_courbe</h2>
     88        <p>
     89                Modifie les courbes d'une image, en manipulant 1 ou 2 points de la courbe
     90                <a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/modifier-les-courbes-d-une-image">(Paris-Beyrouth : Modifier les courbes d'une image)</a><br />
     91        </p>
     92        [<p>(#CHEMIN{images/courbes.png}|balise_img)</p>]
     93        <dl class="codeblock">
     94                <dt>Syntaxe</dt>
     95                <dd><code>image_courbe{rvb, 80=30, 170=220}</code></dd>
     96                <dt>Paramètre 1</dt>
     97                <dd>rvb/r/v/b : couche(s) de couleur(s) affectée(s)</dd>
     98                <dt>Paramètre 2</dt>
     99                <dd>x=y : nombres de 0 à 255</dd>
     100                <dt>Paramètre3</dt>
     101                <dd>x=y : (optionnel) nombres de 0 à 255</dd>
     102                <dt>Exemple</dt>
     103                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_courbe{rvb, 80=30, 170=220}\)\]"}</code></dd>
     104        </dl>
     105        <div class="apercu apercu_images">
     106                <div class="apercu__item on"><p>originale</p>[(#GET{img})]</div>
     107                <BOUCLE_imgcourbe(DATA){source table, #LISTE{#ARRAY{param1,rvb, param2,80=30, param3,170=220}, #ARRAY{param1,rvb, param2,80=100, param3,170=150}, #ARRAY{param1,r, param2,130=40, param3,190=160}}}>
     108                <div class="apercu__item"><p>#VALEUR{param1}, #VALEUR{param2}, #VALEUR{param3}</p>[(#GET{img}|image_courbe{#VALEUR{param1},#VALEUR{param2},#VALEUR{param3}})]</div>
     109                </BOUCLE_imgcourbe>
     110        </div>
     111</div>
     112
     113<hr>
     114
     115<!-- image_float -->
     116<div class="boite" id="image_float">
     117        <h2 class="boite__titre">image_float</h2>
     118        <p>
     119                Faire un texte qui épouse une image
     120                <a href="http://www.paris-beyrouth.org/Un-habillage-irregulier-2">(Paris-Beyrouth :  Un habillage irrégulier</a>)<br />
     121        </p>
     122        <dl class="codeblock">
     123                <dt>Syntaxe</dt>
     124                <dd><code>image_float{left, 10, ffffff}</code></dd>
     125                <dt>Paramètre 1</dt>
     126                <dd>left/center/right : position de l'image</dd>
     127                <dt>Paramètre 2</dt>
     128                <dd>Nombre : marge en px autour de l'image</dd>
     129                <dt>Paramètre3</dt>
     130                <dd>Code hexadécimal : (optionnel) couleur de fond de l'image</dd>
     131                <dt>Exemple</dt>
     132                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5}\)\]"}</code></dd>
     133        </dl>
     134        <div class="texte float">
     135        [(#CHEMIN{images/ecureuil_decoupe.png}|image_float{left, 5})]
     136        <p>
     137        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus utnunc eget ante ornare nonummy. Ut arcu. Duis tincidunt tincidunt quam. In elementum blandit odio. Nullam ultrices. Nulla sem augue, mollis id, vulputate eget, ullamcorper ultrices, purus. Aenean porttitor odio at mauris. Mauris quis enim vitae purus dictum ultricies.
     138        </p>
     139        <p>
     140        Proin pharetra lectus auctor lacus. Quisque at sem ac lectus ornare vehicula. Nunc pulvinar, leo ut tristique auctor, felis diam gravida neque, consectetuer cursus sem
     141        nisl ut enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo. Aliquam erat volutpat. Sed vel enim nec tellus suscipit imperdiet. Maecenas sagittis, dolor id tincidunt suscipit, orci tortor fermentum mi, id varius dolor nisi quis lectus. Quisque ante sem, molestie a, euismod sed, tempus sit amet, mauris. Integer vel ante eget urna sagittis consectetuer. Quisque ullamcorper convallis velit.
     142        </p>
     143        </div>
     144</div>
     145
     146<hr>
     147
     148<!-- image_contour_alpha -->
     149<div class="boite" id="image_contour_alpha">
     150        <h2 class="boite__titre">image_contour_alpha</h2>
     151        <p>
     152                Trace le contour d'une image transparente (<a href="http://www.paris-beyrouth.org/tutoriaux-spip/article/tracer-les-contours-de">Paris-Beyrout : Tracer les contours de transparence</a>)
     153        </p>
     154        <dl class="codeblock">
     155                <dt>Syntaxe</dt>
     156                <dd><code>image_contour_alpha{000000, 1}</code></dd>
     157                <dt>Paramètre 1</dt>
     158                <dd>Code hexadécimal : couleur du contour</dd>
     159                <dt>Paramètre 2</dt>
     160                <dd>Nombre : épaisseur du contour</dd>
     161                <dt>Exemple</dt>
     162                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_contour_alpha{000000, 1}\)\]"}</code></dd>
     163        </dl>
     164        <div class="apercu apercu_images">
     165                <div class="apercu__item on alpha bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div>
     166                <div class="apercu__item alpha bordure"><p>000000, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{000000, 2})]</div>
     167                <div class="apercu__item alpha bordure"><p>9dba00, 2</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_contour_alpha{9dba00, 2})]</div>
     168        </div>
     169</div>
     170
     171<hr>
     172
     173<!-- image_sincity -->
     174<div class="boite" id="image_sincity">
     175        <h2 class="boite__titre">image_sincity</h2>
     176        <p>
     177                Effet automatique : saturation contrastée + accentuation du rouge
     178                <a href="http://www.paris-beyrouth.org/Welcome-to-Spip-City">(Paris-Beyrouth : Welcome to Spip-City)</a>
     179        </p>
     180        <dl class="codeblock">
     181                <dt>Syntaxe</dt>
     182                <dd><code>image_sincity</code></dd>
     183                <dt>Exemple</dt>
     184                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_sincity\)\]"}</code></dd>
     185        </dl>
     186        <div class="apercu apercu_images">
     187                <div class="apercu__item on"><p>originale</p>[(#GET{img}|image_courbe{rvb, 80=40})]</div>
     188                <div class="apercu__item"><p>sincity</p>[(#GET{img}|image_courbe{rvb, 80=40}|image_sincity)]</div>
     189        </div>
     190</div>
     191
     192<hr>
     193
     194<!-- image_estampage_alpha -->
     195<div class="boite" id="image_estampage_alpha">
     196        <h2 class="boite__titre">image_estampage_alpha</h2>
     197        <p>
     198                Réalise des estampages
     199                <a href="http://www.paris-beyrouth.org/Des-titres-en-relief">(Paris-Beyrouth : Des titres en relief)</a>
     200        </p>
     201        <dl class="codeblock">
     202                <dt>Syntaxe</dt>
     203                <dd><code>image_estampage_alpha{1,1}</code></dd>
     204                <dt>Paramètre 1</dt>
     205                <dd>Nombre : épaisseur en px</dd>
     206                <dt>Paramètre 2</dt>
     207                <dd>nombre : netteté</dd>
     208                <dt>Exemple</dt>
     209                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{1,1}\)\]"}</code></dd>
     210        </dl>
     211        <div class="apercu apercu_images">
     212                <div class="apercu__item alpha on bordure"><p>originale</p>[(#CHEMIN{images/ecureuil_decoupe.png}|balise_img)]</div>
     213                <BOUCLE_imgestampage(DATA){source table, #LISTE{#ARRAY{param1,1, param2,1}, #ARRAY{param1,1, param2,4}, #ARRAY{param1,4, param2,1}}}>
     214                <div class="apercu__item"><p>#VALEUR{param1}, #VALEUR{param2}</p>[(#CHEMIN{images/ecureuil_decoupe.png}|image_estampage_alpha{#VALEUR{param1},#VALEUR{param2}})]</div>
     215                </BOUCLE_imgestampage>
     216        </div>
     217</div>
     218
     219<hr>
     220
     221<!-- image_dispersion -->
     222<div class="boite" id="image_dispersion">
     223        <h2 class="boite__titre">image_dispersion</h2>
     224        <p>
     225                Réalise des dispersions, des floutages
     226                <a href="http://www.paris-beyrouth.org/Un-filtre-de-dispersion-graphique">(Paris-Beyrouth : Un filtre de dispersion graphique</a>)
     227        </p>
     228        <dl class="codeblock">
     229                <dt>Syntaxe</dt>
     230                <dd><code>image_dispersion{url_image, 8, 8}</code></dd>
     231                <dt>Paramètre 1</dt>
     232                <dd>Url de l'image servant de filtre</dd>
     233                <dt>Paramètre 2</dt>
     234                <dd>Nombre : déplacement en x</dd>
     235                <dt>Paramètre 3</dt>
     236                <dd>Nombre : déplacement en y</dd>
     237                <dt>Exemple</dt>
     238                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8}\)\]"}</code></dd>
     239        </dl>
     240        <div class="apercu apercu_images">
     241                <div class="apercu__item alpha on"><p>Image</p>[(#GET{img})]</div>
     242                <div class="apercu__item alpha on"><p>Masque</p>[(#CHEMIN{images/disp-noir.png}|balise_img)]</div>
     243                <div class="apercu__item"><p>8, 8</p>[(#GET{img}|image_dispersion{#CHEMIN{images/disp-noir.png},8,8})]</div>
     244        </div>
     245        <div class="apercu apercu_images">
     246                <div class="apercu__item alpha on"><p>Image 1</p>[(#GET{img})]</div>
     247                <div class="apercu__item alpha on"><p>Masque</p>[(#CHEMIN{images/disp-twirl.png}|balise_img)]</div>
     248                <div class="apercu__item"><p>8, 8</p>[(#GET{img}|image_dispersion{#CHEMIN{images/disp-twirl.png},8,8})]</div>
     249        </div>
     250</div>
     251
     252<hr>
     253
     254<!-- image_merge -->
     255<div class="boite" id="image_merge">
     256        <h2 class="boite__titre">image_merge</h2>
     257        <p>
     258                Superpose une image sur une autre<br>
     259        </p>
     260        <p>
     261                        <span class="warning">Le filtre <code>image_Masque</code> de Spip permet d'obtenir le même résultat, et propose plus d'options.</span>
     262        </p>
     263        <dl class="codeblock">
     264                <dt>Syntaxe</dt>
     265                <dd><code>image_merge{url_image, right, top}</code></dd>
     266                <dt>Paramètre 1</dt>
     267                <dd>left/center/right : position horizontal</dd>
     268                <dt>Paramètre 2</dt>
     269                <dd>top/middle/bottom : position verticale</dd>
     270                <dt>Exemple</dt>
     271                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle}\)\]"}</code></dd>
     272        </dl>
     273        <div class="apercu apercu_images">
     274                <div class="apercu__item on bordure"><p>image 1</p>[(#CHEMIN{images/quadrillage.png}|balise_img)]</div>
     275                <div class="apercu__item alpha on"><p>image 2</p>[(#CHEMIN{images/cercle.png}|balise_img)]</div>
     276                <div class="apercu__item bordure"><p>center, middle</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},center,middle})]</div>
     277                <div class="apercu__item bordure"><p>left, bottom</p>[(#CHEMIN{images/quadrillage.png}|image_merge{#CHEMIN{images/cercle.png},left,bottom})]</div>
     278        </div>
     279</div>
     280
     281
     282<!-- image_negatif -->
     283<div class="boite" id="image_negatif">
     284        <h2 class="boite__titre">image_negatif</h2>
     285        <p>
     286                Passe une image en négatif
     287        </p>
     288        <p>
     289                <span class="warning">Le filtre <code class="Exemple">image_courbe{rvb, 0=255, 255=0}</code> produira le même résultat</span>
     290        </p>
     291        <dl class="codeblock">
     292                <dt>Syntaxe</dt>
     293                <dd><code>image_negatif</code></dd>
     294                <dt>Exemple</dt>
     295                <dd><code class="Exemple">#VAL{"\[\(#CHEMIN{images/ecureuil.jpg}|image_negatif\)\]"}</code></dd>
     296        </dl>
     297        <div class="apercu apercu_images">
     298                <div class="apercu__item on"><p>originale</p>[(#GET{img})]</div>
     299                <div class="apercu__item"><p>image_negatif</p>[(#GET{img}|image_negatif)]</div>
     300        </div>
     301</div>

  • _plugins_/fonctions_images/trunk/demo/style_demo_fonctions_images.css

    r66846 r112349  
    1 body                    {
    2                         padding: 2em 0;
    3                         }
     1/* Reset */
     2*, *:before, *:after {
     3  box-sizing: border-box;
     4}
     5html, body {
     6  padding: 0;
     7  margin: 0;
     8  font-family: sans;
     9}
     10a {
     11  text-decoration: none;
     12}
     13
     14/* Layout */
     15.page {
     16  padding: 1em;
     17}
     18.menu {
     19  position: fixed;
     20  top: 1em;
     21  left: 1em;
     22  width: 20em;
     23}
     24.main {
     25  width: calc(100% - 20em);
     26  margin-left: 20em;
     27}
    428
    529/* menu */
    6 .span3 .sidebar-nav.affix {
    7                         width: 19%;
    8                         }
     30.menu {
     31  margin: 0;
     32  padding: 0;
     33  list-style: none;
     34}
     35.menu__item {
     36  padding: 0.25em 0;
     37}
     38.menu__item_header {
     39  padding: 1em 0;
     40  font-weight: bold;
     41}
    942
    10 /* conteneur */
    11 .boite                  {
    12                         padding: 1em;
    13                         margin: 2em 0;
    14                         background-color: #eee;
    15                         border-radius: 4px;
    16                         }
     43/* Boite */
     44.boite {
     45  margin: 2em 0;
     46}
     47.boite__titre {
     48  margin: 0 0 2em;
     49}
     50
     51/* Paramètres et cie */
     52.codeblock {
     53  display: flex;
     54  flex-flow: row wrap;
     55  margin-bottom: 2em;
     56}
     57.codeblock dd,
     58.codeblock dt {
     59  margin-bottom: 0.5em;
     60}
     61.codeblock dt {
     62  flex: 0 0 10em;
     63  font-weight: bold;
     64}
     65.codeblock dd {
     66  flex: 0 0 calc(100% - 11em);
     67  margin-left: 0;
     68}
     69code {
     70  font-family: monospace;
     71  font-size: 1.15em;
     72  color: hsl(320, 100%, 40%);
     73}
    1774
    1875/* apercus */
    19 .apercu + .apercu {
    20                         margin-top: 1em;
    21                         }
    22 .apercu .nuance         {
    23                         display: table; /* pour centrer verticalement le texte */
    24                         float: left;
    25                         width: 50px;
    26                         height: 50px;
    27                         margin-right:.5em;
    28                         border: 1px solid #888;
    29                         border-color: rgba(0,0,0,.2);
    30                         text-align:center;
    31                         }
    32 .apercu .nuance.on      {
    33                         width: 100px;
    34                         height: 100px;
    35                         border-color: rgba(0,0,0,.4);
    36                         }
    37 .apercu .image          {
    38                         position: relative;
    39                         float: left;
    40                         margin-right:.5em;
    41                         line-height: 0; /* pour eviter l'espace en dessous de l'image */
    42                         }
     76.apercu {
     77  display: flex;
     78  align-items: center;
     79  margin-bottom: 1em;
     80}
     81.apercu__item {
     82  margin-right: 0.5em;
     83  font-weight: bold;
     84  position: relative;
     85}
     86.apercu__item p {
     87  position: absolute;
     88  top: 0;
     89  left: 50%;
     90  transform: translateX(-50%);
     91  padding: 0.2em 0.5em;
     92  margin: 0;
     93  background: black;
     94  color: white;
     95  font-family: monospace;
     96}
     97.apercu_couleurs .apercu__item {
     98  display: flex;
     99  justify-content: center;
     100  align-items: center;
     101  width: 5em;
     102  height: 5em;
     103  border: 1px solid hsla(0, 0%, 0%, 0.05);
     104}
     105.apercu_couleurs .apercu__item.on {
     106  width: 10em;
     107  height: 10em;
     108}
    43109
    44110
    45 /* etiquette */
    46 .apercu .nuance > p {
    47                         display: table-cell;
    48                         vertical-align: middle;
    49                         }
    50 .apercu .nuance.on > p {
    51                         text-transform: uppercase;
    52                         }
    53 .apercu .image > p      {
    54                         display: block;
    55                         position: absolute;
    56                         top: 0; left: 0;
    57                         padding: .3em .6em;
    58                         background-color: #222;
    59                         background-color: rgba(0,0,0,.65);
    60                         color: #eee;
    61                         font-size: 1.1em;
    62                         line-height: 1;
    63                         }
    64 .apercu .image.on > p {
    65                         background-color: #0088CC;
    66                         }
    67 
    68 
    69 /* divers */
    70 code                    {
    71                         font-size: 13px;
    72                         background-color: rgba(255,255,255,.7);
    73                         }
    74 code.exemple            {color: #222;}
    75 .texte.float            {
    76                         max-width: 50em;
    77                         }
    78 .texte.float img        {
    79                         max-width: none;
    80                         }
    81 .alpha                  {
    82                         background-image: url(../images/transparent.jpg);
    83                         }
    84 .bordure                {
    85                         border: 1px solid #aaa;
    86                         border-color: rgba(0,0,0,.2);
    87                         }
    88 .icone                  {
    89                         margin-right: .5em;
    90                         }
     111/* Divers */
     112.warning {
     113  background-color: hsl(60, 100%, 75%);
     114  padding: 0.2em;
     115}
     116.texte.float {
     117  max-width: 50em;
     118}
     119.texte.float img {
     120  max-width: none;
     121}
     122.alpha {
     123  background-image: url(../images/transparent.jpg);
     124}
     125.bordure {
     126  border: 1px solid #aaa;
     127  border-color: rgba(0, 0, 0, 0.2);
     128}
     129hr {
     130  margin: 2em 0;
     131  border-color: 1px solid hsl(0, 0%, 33%);
     132}

  • _plugins_/fonctions_images/trunk/paquet.xml

    r112348 r112349  
    22        prefix="fonctions_images"
    33        categorie="multimedia"
    4         version="0.6.14"
     4        version="0.6.15"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.2.*]"
Note: See TracChangeset for help on using the changeset viewer.