From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit
---
files/fr/web/css/element()/index.html | 149 ++++++++++++++++++++++++++++++++++
1 file changed, 149 insertions(+)
create mode 100644 files/fr/web/css/element()/index.html
(limited to 'files/fr/web/css/element()/index.html')
diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html
new file mode 100644
index 0000000000..d4d6391db2
--- /dev/null
+++ b/files/fr/web/css/element()/index.html
@@ -0,0 +1,149 @@
+---
+title: element
+slug: Web/CSS/element()
+tags:
+ - CSS
+ - Fonction
+ - Reference
+translation_of: Web/CSS/element()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction <strong><code>element()</code></strong> définit une valeur {{cssxref("<image>")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.</p>
+
+<p>Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.</p>
+
+<p>Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un <code>background</code> CSS donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">element(<var>id</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><strong><code>id</code></strong></dt>
+ <dd>L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_premier_exemple_réaliste">Un premier exemple réaliste</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+ width: 400px;
+ height: 400px;
+ background: -moz-element(#monArrierePlan) no-repeat;
+
+}
+
+.paragraphe {
+ transform-origin: 0 0;
+ transform: rotate(45deg);
+ color: white;
+}
+
+#monArrierePlan{
+ width: 1024px;
+ height: 1024px;
+ background-image: linear-gradient(to right, red, orange, yellow, white);
+}
+.cache {
+ overflow: hidden;
+ height: 0;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate"><div class="exemple">
+ <p>
+ Cet élément utilise l'élément
+ #monArrierePlan comme image
+ de fond !
+ </p>
+</div>
+
+<div class="cache">
+ <div id="monArrierePlan">
+ <p class="paragraphe">
+ Et voici un texte inscrit sur
+ l'arrière-plan.
+ </p>
+ <div>
+<div></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Pour les navigateurs qui prennent en charge <code>element</code>, on peut ici voir un arrière-plan généré avec un paragraphe HTML.</p>
+
+<p>{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}</p>
+
+<h3 id="Un_second_exemple_plus_méchant">Un second exemple plus méchant</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+ width: 400px;
+ height: 100px;
+ background: -moz-element(#monArrierePlan);
+}
+
+.cache {
+ overflow: hidden;
+ height: 0;
+} </pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate"><div class="exemple"></div>
+
+<div class="cache">
+ <button id="monArrierePlan" type="button">
+ Méchant bouton
+ </button>
+</div></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th>Spécification</th>
+ <th>État</th>
+ <th>Commentaires</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td>
+ <td>{{Spec2('CSS4 Images')}}</td>
+ <td>Reporté pour CSS4</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.image.element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set", "image-set()")}}</li>
+ <li>{{cssxref("<image>")}}</li>
+ <li>{{cssxref("<gradient>")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+</ul>
--
cgit v1.2.3-54-g00ecf