<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
<!-- Editors & translators, please, edit text-shadow.en.tmpl, not .html -->
<!-- Translated by Emil Sierżęga. -->
<html lang=pl>
<head profile="http://www.w3.org/2006/03/hcard">
<title>CSS: cieniowanie tekstu</title>

<!-- include head.inc -->

<style type="text/css">
  div.example {border: #603 dotted; padding: 0.5em; margin: 1em 2em}
  div.example h3 {font-size: x-large; display: block; text-align: center;
    border: none}
  div.example1 {background: #CCF; padding: 1em}
  div.example1 h3 {color: blue; text-shadow: #333 0.1em 0.1em}
  div.example2 {background: #CCF; padding: 1em}
  h3.example2a {color: blue; text-shadow: #333 0.1em 0.1em 0.05em}
  h3.example2b {color: blue; text-shadow: black 0.1em 0.1em 0.2em}
  div.example4 {background: #CCF; padding: 1em}
  h3.example4a {color: white}
  h3.example4b {color: white; text-shadow: black 0.1em 0.1em 0.2em}
  h3.example5 {color: blue; text-shadow: 0.2em 0.5em 0.1em #600,
    -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006}
  div.example6 {background: #CCC; padding: 1em}
  h3.example6a {color: #D1D1D1; text-shadow: -1px -1px white, 1px 1px #333;
    letter-spacing: 2px}
  h3.example6b {color: #C8C8C8; text-shadow: 1px 1px white, -1px -1px #444;
    letter-spacing: 2px}
  div.example7 {background: #CCF; padding: 1em}
  h3.example7a {color: blue;  text-shadow: -1px 0 black, 0 1px black,
    1px 0 black, 0 -1px black}
  h3.example7b {color: #BBE; text-shadow: -1px 0 black, 0 1px black,
    1px 0 black, 0 -1px black}
  h3.example8a {text-shadow: 0 0 0.2em #8F7}
  h3.example8b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
  h3.example8c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}
</style>

<link rel=up title="Tips &amp; tricks" href="./">
<link rel=prev title="Drop shadows" href="shadows">
<link rel=next title="Round corners &amp; shadows" href="roundshadow">

<!-- include translations1 -->

<body>
<!-- include translations2 -->

<h1><em>Web Style Sheets</em>
CSS tips &amp; tricks</h1>



<div class=section id=intro>
<p>Zobacz także <a href="./">indeks</a> wszystkich porad.

<p class=stb>Na tej stronie:
<ul>
<li id="p1"><a rel="chapter" href="#text-shadows">Cieniowanie tekstu</a>
<li id="p2"><a rel="chapter" href="#fuzzy">Rozmyte cieniowanie</a>
<li id="p3"><a rel="chapter" href="#white">Czytelny biały tekst</a>
<li id="p4"><a rel="chapter" href="#multiple">Multicienie</a>
<li id="p5"><a rel="chapter" href="#outline">Kontury</a>
<li id="p6"><a rel="chapter" href="#glow">W blasku neonów</a>
</ul>
</div>



<div class=section id=text-shadows>
<h2>Cieniowanie tekstu</h2>

<p>CSS3 posiada właściwość zwaną <em>text-shadow</em>, dzięki której jesteśmy
w stanie dodać cień do każdej litery tekstu. W najprostszej formie wygląda to
tak:
<pre>
h3 {text-shadow: 0.1em 0.1em #333}
</pre>

<p>Dodajemy ciemnoszary cień (<code>#333</code>), trochę z prawej (<code>0.1em</code>)
i lekko u dołu (<code>0.1em</code>), biorąc za punkt odniesienia normalną pozycję tekstu.
Rezultat widać poniżej:

<div class=example>
  <div class=example1>
    <h3>Treść bez treści się tu mieści</h3>
  </div>
</div>
</div>

<div class=section id=fuzzy>
<h2>Rozmyte cieniowanie</h2>

<p>Najprostsza postać <em>text-shadow</em> składa się z dwóch części:
koloru (jak <code>#333</code> we wcześniejszym przykładzie) oraz offsetu (czyli
<code>0.1em 0.1em</code> również z przykładu). Rezultatem tego jest ostry
cień ze wskazanym offsetem. Ale offset ten można łatwo rozmyć, tworząc mniej
lub bardziej niewyraźny cień.

<p>Poziom rozmycia podawany jest jako osobny offset. Poniżej
znajdują się dwie linie tekstu. Jedna z niewielkim rozmyciem
(<code>0.05em</code>), a druga z czterokrotnie większym
(<code>0.2em</code>):

<pre>
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
</pre>

<div class=example>
  <div class=example2>
    <h3 class=example2a>&ldquo;Co waść prawisz?&rdquo;&ndash; czasem mówił ładnie</h3>
    <h3 class=example2b>Musisz przyjrzeć się dokładnie</h3>
  </div>
</div>

</div>

<div class=section id=white>
<h2>Czytelny biały tekst</h2>

<p>Cienie mogą sprawić, że tekst jest bardziej czytelny, jeśli różnica między
tłem, a kolorem czcionki jest niewielka. Przykład znajdziesz poniżej. Biały
tekst na jasnoniebieskim tle, najpierw bez, a później z cieniem:

<pre>
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
</pre>

<div class=example>
<div class=example4>
<p>Bez cieniowania:
<h3 class=example4a>Co tutaj jest dla mnie?</h3>
<p>Z cieniowaniem:
<h3 class=example4b>Kilka pomarańczy do wykopania</h3>
</div>
</div>

</div>

<div class=section id=multiple>
<h2>Multicienie</h2>

<p>Możesz dodawać więcej niż jeden cień. Jednak rezultat często wygląda dość dziwnie:

<pre>
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}
</pre>

<div class=example>
  <div class=example5>
    <h3 class=example5>Chciałbym, chciałbym, chciałbym&hellip;</h3>
  </div>
</div>

<p>Multicienie mogą być użyteczny, jeśli dodajemy do siebie dwa dobrze dobrane
jasne i ciemne cienie:

<pre>
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
</pre>

<div class=example>
<div class=example6>
<h3 class=example6a>Ja, robot (wiesz który)</h3>
<h3 class=example6b>To ekstra, rzecz jasna</h3>
</div>
</div>

<p>Taki efekt może być niebezpieczny, jeśli Twoja przeglądarka nie potrafi
poprawnie wyświetlać <em>text-shadow</em>. W zasadzie, kolor tła i kolor
tekstu są w tym przykładzie prawie takie same (<code>#CCCCCC</code> i
<code>#D1D1D1</code>), więc bez cieniowania napis jest prawie niewidoczny.
</div>



<div class=section id=outline>
<h2>Rysowanie liter jako kontury</h2>

<p>Poprzedni przykład można rozwinąć nakładając na tekst nie dwa, a cztery
cienie. Stworzymy wtedy kontur wokół liter:

<pre>
h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}
</pre>

<div class=example>
<div class=example7>
<h3 class=example7a>Czy czujesz się czerwony?</h3>
<h3 class=example7b>kot, jabłko, itepe</h3>
</div>
</div>

<p>To nie jest perfekcyjny kontur. CSS3 posiada nową właściwość
<em>text-outline</em>, która pozwoli rozwiązać ten problem, jednak
na chwilę obecną (lipiec 2015), nie jest ona zaimplementowana
w żadnej z głównych przeglądarek internetowych.
</div>



<div class=section id=glow>
<h2>W blasku neonów</h2>

<p>Jeśli nałożysz rozmyte cieniowanie zaraz za tekstem, np. dodając
zerowy offset, to wokół liter wytworzysz świecącą poświatę. Jeśli
pojedynczy cień nie daje wystarczającego efektu wystarczy go
powtórzyć kilka razy:

<pre>
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}
</pre>

<div class=example>
<h3 class=example8a>Banan w cieście</h3>
<h3 class=example8b>Nie nie nie ma lepszego nie</h3>
<h3 class=example8c>W rzeczy samej, całkiem prawda, Panie M</h3>
</div>

</div>

<!-- include feedback -->

<!-- include banner -->

<div id=endmatter class=section>
<!-- include address -->

<p>Utworzono 4 Sie 2005;<br>
Ostatnia aktualizacja
<!-- include date -->
</div>

<!-- include translations4 -->

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.dcl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
End:
-->