diff options
Diffstat (limited to 'files/es/web/css/-webkit-text-stroke/index.html')
-rw-r--r-- | files/es/web/css/-webkit-text-stroke/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/es/web/css/-webkit-text-stroke/index.html b/files/es/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..d9c1e26ae6 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,142 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-text-stroke +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-text-stroke</code></strong> especifica la <a href="/es/docs/Web/CSS/length">anchura</a> y <a href="/es/docs/Web/CSS/color_value">color</a> del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades{{cssxref("-webkit-text-stroke-width")}} y {{cssxref("-webkit-text-stroke-color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css notranslate">/* Valores anchura y color */ +-webkit-text-stroke: 4px navy; + +/* Valores globales */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>La anchura del trazo.</dd> + <dt><code><color></code></dt> + <dd>El color del trazo.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p id="example">El trazo de este texto es rojo.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#example { + font-size: 50px; + margin: 0; + -webkit-text-stroke: 2px red; +}</pre> + +<p>{{EmbedLiveSample("Example", 600, 60)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandarización Inicial</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Referencia CSS Safari<br> + <small lang="en-US">'-webkit-text-stroke' en ese documento.</small></a></td> + <td>Documentación no oficial y no estándar</td> + <td>Documentación Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</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</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esta característica</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esta característica</a></li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> +</ul> |