From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/pt-br/web/css/offset/index.html | 158 ++++++++++++++++++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 files/pt-br/web/css/offset/index.html

(limited to 'files/pt-br/web/css/offset')

diff --git a/files/pt-br/web/css/offset/index.html b/files/pt-br/web/css/offset/index.html
new file mode 100644
index 0000000000..5bf849fdda
--- /dev/null
+++ b/files/pt-br/web/css/offset/index.html
@@ -0,0 +1,158 @@
+---
+title: offset
+slug: Web/CSS/offset
+tags:
+  - CSS
+  - Experimental
+  - Não-padrão
+  - Precisa de Conteúdo
+  - Propriedade CSS
+  - Racunho
+  - Referencia
+translation_of: Web/CSS/offset
+---
+<div>{{SeeCompatTable}}{{CSSRef}}{{draft}}</div>
+
+<p>A propriedade CSS <strong><code>offset</code></strong> é uma propriedade abreviada para animar um elemento ao longo de um caminho definido.</p>
+
+<div class="note">
+<p>As primeiras versões da especificação chamam essa propriedade de <code>motion</code>.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: css">/* Posição do offset */
+offset: auto
+offset: 10px 30px;
+offset: none;
+
+/* Caminho do offset */
+offset: ray(45deg closest-side);
+offset: path(M 100 100 L 300 100 L 200 300 z);
+offset: url(arc.svg);
+
+/* Caminho do offset com distância e/ou rotação */
+offset: url(circle.svg) 100px;
+offset: url(circle.svg) 40%;
+offset: url(circle.svg) 30deg;
+offset: url(circle.svg) 50px 20deg;
+
+/* Incluindo âncora no offset */
+offset: ray(45deg closest-side) / 40px 20px;
+offset: url(arc.svg) 2cm / 0.5cm 3cm;
+offset: url(arc.svg) 30deg / 50px 100px;
+</pre>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examplo">Examplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="offsetElement"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@keyframes move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+#offsetElement {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
+  animation: move 3s linear infinite;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example", 350, 350)}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificação</th>
+   <th>Status</th>
+   <th>Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br>
+    {{CompatChrome(55.0)}} (as <code>offset</code>)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br>
+    {{CompatChrome(55.0)}} (as <code>offset</code>)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br>
+    {{CompatChrome(55.0)}} (as <code>offset</code>)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
-- 
cgit v1.2.3-54-g00ecf