diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/tr/web/css | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/tr/web/css')
24 files changed, 0 insertions, 6427 deletions
diff --git a/files/tr/web/css/@import/index.html b/files/tr/web/css/@import/index.html deleted file mode 100644 index 130d0b186d..0000000000 --- a/files/tr/web/css/@import/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -translation_of: Web/CSS/@import ---- -<div>{{CSSRef}}</div> - -<p><a href="/tr-TR/docs/Web/CSS">CSS</a> <a href="/tr-TR/docs/Web/CSS/At-rule">@-kurallarıdan</a> olan <strong><code>@import</code></strong> diğer stil dosyalarından stil kurallarını mevcut sayfamıza dahil etmek için kullanılır. These rules must precede all other types of rules, except {{cssxref("@charset")}} rules; as it is not a <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">nested statement</a>, <code>@import</code> cannot be used inside <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">conditional group at-rules</a>.</p> - -<pre class="brush: css no-line-numbers">@import url("fineprint.css") print; -@import url("bluish.css") projection, tv; -@import 'custom.css'; -@import url("chrome://communicator/skin/"); -@import "common.css" screen, projection; -@import url('landscape.css') screen and (orientation:landscape);</pre> - -<p>So that {{glossary("user agent")}}s can avoid retrieving resources for unsupported media types, authors may specify media-dependent <code>@import</code> rules. These conditional imports specify comma-separated <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> after the URL. In the absence of any media query, the import is unconditional. Specifying <code>all</code> for the medium has the same effect.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">@import <em>url</em>; -@import <em>url</em> <em>list-of-media-queries</em>; -</pre> - -<p>where:</p> - -<dl> - <dt style="margin: 0 40px;"><em>url</em></dt> - <dd style="margin: 0 40px;">Is a {{cssxref("<string>")}} or a {{cssxref("<url>")}} representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. <strong>chrome://communicator/skin/</strong>). <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">See here</a> for more information.</dd> - <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt> - <dd style="margin: 0 40px;">Is a comma-separated list of <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td> - <td>{{Spec2('CSS3 Cascade')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>Extended the syntax to support any media query and not only simple <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a>.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,<br> - and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5.5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>5.5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/_colon_active/index.html b/files/tr/web/css/_colon_active/index.html deleted file mode 100644 index fe5563e036..0000000000 --- a/files/tr/web/css/_colon_active/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -translation_of: 'Web/CSS/:active' ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>:active</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class'ı</a> kullanıcı tarafından o an kullanılan (buton gibi) elementleri temsil eder.</span> Bu seçicinin etkinliği, fare ile gezinirken, sol tuşa bastığınızda aktifleşir ve bıraktığınızda son bulur. <code>:active</code> seçicisi genellikle {{HTMLElement("a")}} ve {{HTMLElement("button")}} buton elementleri için kullanılmaktadır ancak diğer elementler için de tercih edilebilir.</p> - -<pre class="brush: css no-line-numbers">/* Aktif edilmiş bir <a> elementinin seçicisidir. */ -a:active { - color: red; -}</pre> - -<p><code>:active</code> pseudo-class'ı ({{cssxref(":link")}}, {{cssxref(":hover")}}, veya {{cssxref(":visited")}}) değerleri tanımlı ise aktif olmayacaktır. Linkleri uygun bir şekilde stillendirebilmek için, <code>:active</code> kuralını linklerle alakalı tüm kurallar arasında LVHA order olarak bilinen sırada, en sonda kullanın.<br> - <br> - <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> - -<div class="note"><strong>Note:</strong> On systems with multi-button mice, CSS3 specifies that the <code>:active</code> pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Example" name="Example">Example</h2> - -<div id="example"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html;"><a href="#">This link will turn lime while you click on it.</a> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css;">a:link { color: blue; } /* Unvisited links */ -a:visited { color: purple; } /* Visited links */ -a:hover { <span class="st">background: yellow</span>; } /* User hovers */ -a:active { color: lime; } /* Active links */</pre> -</div> - -<h3 id="Result">Result</h3> - -<div>{{EmbedLiveSample('Example')}}</div> - -<h2 id="Specifications"><span>Specifications</span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.active")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_first-of-type/index.html b/files/tr/web/css/_colon_first-of-type/index.html deleted file mode 100644 index ad4ee056d6..0000000000 --- a/files/tr/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -translation_of: 'Web/CSS/:first-of-type' ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>:first-of-type</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents the first element of its type among a group of sibling elements.</p> - -<pre class="brush: css no-line-numbers">/* Selects the first <p> to appear inside a parent element - regardless of its position inside the siblings */ -p:first-of-type { - color: red; -}</pre> - -<div class="note"> -<p><strong>Not</strong>: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.</p> -</div> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Örnek_1_Temel_ilk_paragraf">Örnek 1: Temel ilk paragraf</h3> - -<p>Aşağıdaki HTML'i baz alalım:</p> - -<pre class="brush: html"><h2>Başlık</h2> - -<p>Paragraf</p> - -<p>Paragraf</p></pre> - -<p>Ve CSS:</p> - -<pre class="brush: css">p:first-of-type { - color: red; -}</pre> - -<p>Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:</p> - -<p>{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}</p> - -<h3 id="Örnek_2_Evrensel_seçici_olarak..">Örnek 2: Evrensel seçici olarak..</h3> - -<p>This example shows how the universal selector is assumed when no simple selector is written.</p> - -<p id="HTML">Önce biraz HTML:</p> - -<pre class="brush: html"><div> - <span>Bu ilk `span`!</span> - <span>Ama bu `span` değil.</span> - <span>Bu <em>element içinde `em`</em>!</span> - <span>Ve bu da <span>element içinde `span`</span>!</span> - <b>Bu `b` niteliği!</b> - <span>This final `span` does not.</span> -</div> -</pre> - -<p id="CSS">Şimdi de CSS:</p> - -<pre class="brush: css">div :first-of-type { - background-color: lime; -}</pre> - -<p id="Result">Sonuç şöyle görünecek:</p> - -<p>{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}</p> - -<h2 id="Özellikler">Özellikler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Matching elements are not required to have a parent.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>9.5</td> - <td>3.2</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel destek</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>3.2</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Şunlar_da_var">Şunlar da var</h2> - -<ul> - <li>{{Cssxref(":first-child")}}</li> - <li>{{Cssxref(":last-of-type")}}</li> - <li>{{Cssxref(":nth-of-type")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_focus/index.html b/files/tr/web/css/_colon_focus/index.html deleted file mode 100644 index 05ebc35ead..0000000000 --- a/files/tr/web/css/_colon_focus/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - ':focus' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus' ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>:focus</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's <kbd>Tab</kbd> key.</p> - -<pre class="brush: css no-line-numbers notranslate">/* Selects any <input> when focused */ -input:focus { - color: red; -}</pre> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> This pseudo-class applies only to the focused element itself. Use {{CSSxRef(":focus-within")}} if you want to select an element that <em>contains</em> a focused element.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{CSSSyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html no-line-numbers notranslate"><input class="red-input" value="I'll be red when focused."><br> -<input class="blue-input" value="I'll be blue when focused."></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus { - background: yellow; - color: red; -} - -.blue-input:focus { - background: yellow; - color: blue; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> requires that the visual focus indicator be at least 3 to 1.</p> - -<ul> - <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li> -</ul> - -<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3> - -<p>Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a>.</p> - -<ul> - <li>Quick Tip: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Defines HTML-specific semantics.</td> - </tr> - <tr> - <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.focus")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef(":focus-within")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_last-child/index.html b/files/tr/web/css/_colon_last-child/index.html deleted file mode 100644 index b068bb7de8..0000000000 --- a/files/tr/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS S - - CSS Sozde-sınıflar - - Yerleşim -translation_of: 'Web/CSS/:last-child' ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p><strong><code>:last-child</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> bir grup çocuğun sonuncusunu temsil eder.</p> - -<div class="note"> -<p>Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.</p> -</div> - -<h2 id="Yazım_Şekli">Yazım Şekli</h2> - -{{csssyntax}} - -<h2 id="Örnek">Örnek</h2> - -<h3 id="HTML_İçerik">HTML İçerik</h3> - -<pre class="brush: html"><ul> - <li>Bu kısım yeşermedi</li> - <li>Bu da yeşermedi.</li> - <li>Burası yeşerdi :)</li> -</ul></pre> - -<h3 id="CSS_İçerik">CSS İçerik</h3> - -<pre class="brush: css">li:last-child { - background-color: green; -}</pre> - -<p>{{EmbedLiveSample('Example', '100%', 100)}}</p> - -<h2 id="Detaylar">Detaylar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Detay</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Eşleşen elemanların atası olması zorunlu değil.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>İlk tanımlama.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Seviyede Destek</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>9.0</td> - <td>{{CompatOpera(9.5)}}</td> - <td>3.2</td> - </tr> - <tr> - <td>Ata zorunlu değil</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(44)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel Seviyede Destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>9.0</td> - <td>{{CompatOperaMobile(10)}}</td> - <td>3.2</td> - </tr> - <tr> - <td>Ata zorunlu değil</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatChrome(57)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(44)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li>{{cssxref(":last-of-type")}}</li> - <li>{{cssxref(":first-child")}}</li> - <li>{{cssxref(":nth-child")}}</li> -</ul> diff --git a/files/tr/web/css/_colon_link/index.html b/files/tr/web/css/_colon_link/index.html deleted file mode 100644 index d9cd1502eb..0000000000 --- a/files/tr/web/css/_colon_link/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:link' ---- -<div>{{ CSSRef }}</div> - -<p>The <strong><code>:link</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents an element that has not yet been visited. It matches every unvisited {{HTMLElement("a")}}, {{HTMLElement("area")}}, or {{HTMLElement("link")}} element that has an <code>href</code> attribute.</p> - -<pre class="brush: css no-line-numbers notranslate">/* Selects any <a> that has not been visited yet */ -a:link { - color: red; -}</pre> - -<p>Styles defined by the <code>:link</code> pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(":active")}}, {{cssxref(":hover")}}, or {{cssxref(":visited")}}) that has at least equal specificity. To style links appropriately, put the <code>:link</code> rule before all other link-related rules, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> - -<div class="note"> -<p><strong>Note:</strong> Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p>By default, most browsers apply a special {{cssxref("color")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref("background-color")}} values are likely to remain, as most browsers do not set that property on visited links by default.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><a href="#ordinary-target">This is an ordinary link.</a><br> -<a href="">You've already visited this link.</a><br> -<a>Placeholder link (won't get styled)</a> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">a:link { - background-color: gold; - color: green; -} -</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> - <td>{{ Spec2('CSS4 Selectors') }}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>Lift the restriction to only apply it for {{ HTMLElement("a") }} element.</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.link")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Link-related pseudo-classes: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> -</ul> diff --git a/files/tr/web/css/_colon_not/index.html b/files/tr/web/css/_colon_not/index.html deleted file mode 100644 index e4eb3e5d93..0000000000 --- a/files/tr/web/css/_colon_not/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: 'CSS :not() Seçicisi' -slug: 'Web/CSS/:not' -tags: - - ':not() seçicisi' - - CSS - - CSS Pseudo-class - - Web -translation_of: 'Web/CSS/:not' ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p>Olumsuzluk CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> seçicisi, <code>:not(X)</code>, seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak <var>X</var> yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.</p> - -<p>Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.</p> - -<div class="note"><strong>Notlar:</strong> - -<ul> - <li>Gereksiz seçiciler bu pseudo-class seçicisi ile yazılabilir. <code>Örneğin <strong>:not(*)</strong></code> ifadesi "hiçbir şey olmayan" tüm elemanlarla eşleşmesi gerektiği için boş gelir ve bu seçicideki kurallar asla uygulanamaz.</li> - <li>It is possible to rewrite other rules. E.g., <code>foo:not(bar)</code> will match the same element as the simpler <code>foo</code>. Nevertheless the <a href="/en-US/docs/Web/CSS/Specificity">specificity</a> of the first one is higher.</li> - <li><code>:not(foo)</code> ifadesi<strong> </strong><strong>{{HTMLElement("html")}} ve {{HTMLElement("body")}} </strong>içerisindeki <foo></foo> olmayan bütün elementleri seçer.<strong> </strong><strong> .</strong></li> - <li>This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, <code>body :not(table) a</code> will still apply to links inside of a table, since {{HTMLElement("tr")}} will match with the <code>:not()</code> part of the selector.</li> -</ul> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Örnek">Örnek</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Bu bir paragraf.</p> -<p class="classy">İşte sihir burada!</p> -<div>Burası yeşil olacak </div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.classy { text-shadow: 1px 1px 2px gold; } -p:not(.classy) { color: red; } -body :not(p) { color: green; }</pre> - -<h3 id="Sonuç">Sonuç</h3> - -<p>{{EmbedLiveSample('Example','100%',160)}}</p> - -<h2 id="Özelleştirmeler">Özelleştirmeler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özelleştirme</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Çeşitli karışık seçiciler için ifadeyi genişletir.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Standart Tanımlama.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel Özellikler</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>9.0</td> - <td>9.5</td> - <td>3.2</td> - </tr> - <tr> - <td>Gelişmiş Çzellikler</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</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>Özellik</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel Özellikler</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>3.2</td> - </tr> - <tr> - <td>Gelişmiş Çzellikler</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/_colon_root/index.html b/files/tr/web/css/_colon_root/index.html deleted file mode 100644 index de77ef2a6a..0000000000 --- a/files/tr/web/css/_colon_root/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS -translation_of: 'Web/CSS/:root' ---- -<div>{{CSSRef}}</div> - -<p><strong><code>:root</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes"> sözde-sınıfı</a> dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de <code>:root</code> dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve <code>html</code> seçicisi ile aynıdır, ancak <a href="/en-US/docs/Web/CSS/Specificity">önceliği</a> daha yüksektir.</p> - -<pre class="brush: css no-line-numbers">/* Dökümandaki kök elemanı seçer: - Bu HTML'de <html> oluyor. */ -:root { - background: royalblue; -}</pre> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -{{csssyntax}} - -<h2 id="Örnek">Örnek</h2> - -<p><code>:root</code> global <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS değişkenleri</a> tanımlarken kullanışlı olabilir:</p> - -<pre class="brush: css">:root { - --ana-renk: green; - --paragraf-boslugu: 5px 0; -} -</pre> - -<h2 id="Tanımlamalar">Tanımlamalar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tanımlama</th> - <th scope="col">Durum</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Değişiklik yok.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Başlangıç tanımı.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - - - -<p>{{Compat("css.selectors.root")}}</p> diff --git a/files/tr/web/css/_doublecolon_first-letter/index.html b/files/tr/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index 8cf9b5be47..0000000000 --- a/files/tr/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' -translation_of: 'Web/CSS/::first-letter' ---- -<div>{{CSSRef}}</div> - -<p> <strong><code>::first-letter</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementi</a> bir <a href="/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">blok seviyeli element</a>in ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).</p> - -<pre class="brush: css no-line-numbers notranslate">/* Bir <p> elementinin ilk harfini seçiyoruz. */ -p::first-letter { - font-size: 130%; -}</pre> - -<p>Bir elementin ilk harfini belirlemek her zaman kolay değildir:</p> - -<ul> - <li>İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), ve <em>other punctuation</em> (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.</li> - <li>Bazı dillerde, tek bir ses çıkaran iki harfli kalıplar vardır ve bunlar her zaman beraber büyük olarak yazılırlar, örneğin Flemenkçedeki <code>IJ</code> gibi. Bu durumlarda, kalıbı oluşturan iki harfin de <code>::first-letter</code> sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki <a href="/en-US/docs/Web/CSS/::first-letter#Browser_compatibility">tarayıcı uyumluluk tablosu</a>na göz atın.)</li> - <li>{{ cssxref("::before") }} sözde-elementi ve {{ cssxref("content") }} niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, <code>::first-letter</code> oluşturulan bu içeriğin ilk harfini kancalayacaktır.</li> -</ul> - -<div class="note"> -<p>CSS3 ile birlikte, <a href="/en-US/docs/Web/CSS/Pseudo-classes">sözde-sınıfları</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementler</a>den ayırmak amacıyla iki noktalı <code>::first-letter</code> gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, <code>:first-letter</code> yazımını da kabul ediyorlar.</p> -</div> - -<h2 id="İzin_verilen_nitelikler">İzin verilen nitelikler</h2> - -<p><code>::first-letter</code> pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:</p> - -<ul> - <li>Bütün font nitelikleri : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} ve {{ Cssxref("font-family") }}</li> - <li>Bütün arka plan(background) nitelikleri : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, ve {{cssxref("background-blend-mode")}}</li> - <li>Bütün margin nitelikleri: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> - <li>Bütün padding nitelikleri: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> - <li>Bütün sınır(border) nitelikleri: kısa yoldan {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, ve uzun yoldan yazılan nitelikler.</li> - <li>{{ cssxref("color") }} niteliği</li> - <li>{{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (uygun olduğu vakit), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (eğer <code>float</code> niteliğine <code>none</code> değeri atanmışsa) CSS nitelikleri</li> -</ul> - -<h2 id="Söz_dizimiSyntax">Söz dizimi(Syntax)</h2> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Basit_drop-capSatırdan_taşan_büyük_harf">Basit drop-cap(Satırdan taşan büyük harf)</h3> - -<p>Bu örneğimizde <code><h2></code> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için <code>::first-letter</code> sözde elementini kullanacağız</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h2>My heading</h2> -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt - ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> -<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">p { - width: 500px; - line-height: 1.5; -} - -h2 + p::first-letter { - color: white; - background-color: black; - border-radius: 2px; - box-shadow: 3px 3px 0 red; - font-size: 250%; - padding: 6px 3px; - margin-right: 6px; - float: left; -}</pre> - -<h4 id="Sonuç">Sonuç</h4> - -<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p> - -<h3 id="Özel_noktalama_işaretleri_ve_Latin_alfabesinde_bulunmayan_karakterler_üzerindeki_etki">Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki</h3> - -<p>Aşağıdaki örnek, <code>::first-letter</code> sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. </p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> -<p>-The beginning of a special punctuation mark.</p> -<p>_The beginning of a special punctuation mark.</p> -<p>"The beginning of a special punctuation mark.</p> -<p>'The beginning of a special punctuation mark.</p> -<p>*The beginning of a special punctuation mark.</p> -<p>#The beginning of a special punctuation mark.</p> -<p>「特殊的汉字标点符号开头。</p> -<p>《特殊的汉字标点符号开头。</p> -<p>“特殊的汉字标点符号开头。</p></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css notranslate">p::first-letter { - color: red; - font-size: 150%; -}</pre> - -<h4 id="Sonuç_2">Sonuç</h4> - -<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> - <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> - <td>Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td> - <td>{{ Spec2('CSS3 Text Decoration')}}</td> - <td>Allows the use of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph <code>IJ</code>).</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>Initial definition, using the one-colon syntax.</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<div> - - -<p>{{Compat("css.selectors.first-letter")}}</p> -</div> - -<h2 id="Ayrıca_göz_at">Ayrıca göz at</h2> - -<ul> - <li>{{cssxref("::first-line")}}</li> -</ul> diff --git a/files/tr/web/css/background-color/index.html b/files/tr/web/css/background-color/index.html deleted file mode 100644 index a8e0b081d1..0000000000 --- a/files/tr/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Arka plan rengi -slug: Web/CSS/background-color -tags: - - CSS - - CSS arka plan - - CSS özellikler - - arka plan rengi -translation_of: Web/CSS/background-color ---- -<div>{{CSSRef}}</div> - -<p>The <strong><code>background-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> özellik, bir ögenin arkaplan rengini ayarlar.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> - -<p class="hidden">Bu etkileşimli örnek için kaynak GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen klonla <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ve bize bir çekme isteği gönderin.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Anahtar Kelime Değerler */ -background-color: red; -background-color: indigo; - -/* Onaltılık Değer */ -background-color: #bbff00; /* Tamamen opak */ -background-color: #11ffee00; /* Tamamen şeffaf */ -background-color: #11ffeeff; /* Tamamen opak */ - -/* RGB Değer */ -background-color: rgb(255, 255, 128); /* Tamamen opak */ -background-color: rgba(117, 190, 218, 0.5); /* 50% şeffaf */ - -/* HSL Değer */ -background-color: hsl(50, 33%, 25%); /* Tamamen opak */ -background-color: hsla(50, 33%, 25%, 0.75); /* 75% şeffaf */ - -/* Özel Anahtar Değerler */ -background-color: currentcolor; -background-color: transparent; - -/* Evrensel values */ -background-color: inherit; -background-color: initial; -background-color: unset;</pre> - -<p><code>arka plan rengi</code> özellik tek olarak belirtilir <code><a href="#<color>"><renk></a></code> değer.</p> - -<h3 id="Değerler">Değerler</h3> - -<dl> - <dt><a id="<color>"></a>{{cssxref("<renk>")}}</dt> - <dd>Arka planın tek tip rengi. Herhangi bir belirtilen {{cssxref("arka plan - resmi")}} arkasından işlenir , Rengin görüntüdeki herhangi bir saydamlıkta görünmeye devam etmesine rağmen..</dd> -</dl> - -<h3 id="Resmi_sözdizimi">Resmi sözdizimi</h3> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="exampleone"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="exampletwo"> - Lorem ipsum dolor sit amet, consectetuer -</div> - -<div class="examplethree"> - Lorem ipsum dolor sit amet, consectetuer -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight:[2,7,12];">.exampleone { - background-color: teal; - color: white; -} - -.exampletwo { - background-color: rgb(153,102,153); - color: rgb(255,255,204); -} - -.examplethree { - background-color: #777799; - color: #FFFFFF; -} -</pre> - -<h3 id="Sonuç">Sonuç</h3> - -<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> - -<h2 id="Erişilebilirlik_endişeleri">Erişilebilirlik endişeleri</h2> - -<p>Arka plan rengi ile üzerine yerleştirilen metnin rengi arasındaki kontrast oranının, düşük görme koşullarına sahip kişilerin sayfanın içeriğini okuyabilecek kadar yüksek olmasını sağlamak önemlidir..</p> - -<p>Renk kontrast oranı, metnin parlaklığı ve arka plan rengi değerlerinin karşılaştırılmasıyla belirlenir. Güncel karşılamak için <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, metin içeriği için 4,5: 1, başlıklar gibi daha büyük metinler için ise 3: 1 oranında bir oran gereklidir. Büyük metin 18.66 piksel ve kalın veya daha büyük veya 24 piksel veya daha büyük olarak tanımlanır.</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak isterseniz, lütfen kontrol et <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ve bize bir çekme isteği gönderin.</p> - -<p>{{Compat("css.properties.background-color")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> - <li>The {{cssxref("<color>")}} data type</li> - <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> - <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> -</ul> diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html deleted file mode 100644 index 8bfef1e9fb..0000000000 --- a/files/tr/web/css/background/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: background -slug: Web/CSS/background -translation_of: Web/CSS/background ---- -<div>{{CSSRef("CSS Background")}}</div> - -<p><span class="seoSummary"><strong><code>background </code></strong>kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.</span></p> - -<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> - - - -<p>Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.</p> - -<p>Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller <a href="/en-US/docs/Web/CSS/initial_value">ilk değer</a>lerini almaya devam eder.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Using a <background-color> */ -background: green; - -/* Using a <bg-image> and <repeat-style> */ -background: url("test.jpg") repeat-y; - -/* Using a <box> and <background-color> */ -background: border-box red; - -/* A single image, centered and scaled */ -background: no-repeat center/80% url("../img/image.png"); -</pre> - -<p><code>background</code> özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.</p> - -<p>Her katmanın sentaksı aşağıdaki gibidir:</p> - -<ul> - <li>Her katman aşağıdaki değerlerden herhangi birinin sıfır ya da bir tekrarını içerebilir: - <ul> - <li><code><a href="#<attachment>"><attachment></a></code></li> - <li><code><a href="#<bg-image>"><bg-image></a></code></li> - <li><code><a href="#<position>"><position></a></code></li> - <li><code><a href="#<bg-size>"><bg-size></a></code></li> - <li><code><a href="#<repeat-style>"><repeat-style></a></code></li> - </ul> - </li> - <li> <code><a href="#<bg-size>"><bg-size></a></code> değeri sadece <code><a href="#<position>"><position></a></code> değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "<code>center/80%</code>".</li> - <li> <code><a href="#<box>"><box></a></code> değeri hiç eklenmeyebilir ya da bir ya da iki kere eklebilir. Eğer bir kere eklendiyse hem {{cssxref("background-origin")}} hem {{cssxref("background-clip")}} ayarlar. Eğer iki kere eklendiyse, ilk eklenen {{cssxref("background-origin")}} özelliğini ayarlar, ikinci eklenen ise {{cssxref("background-clip")}} ayarlar.</li> - <li> <code><a href="#<background-color>"><background-color></a></code> değeri sadece son katmana eklebilir.</li> -</ul> - -<h3 id="Values(Değerler)">Values(Değerler)</h3> - -<dl> - <dt id="<attachment>"><code><attachment></code></dt> - <dd>See {{cssxref("background-attachment")}}</dd> - <dt id="<box>"><code><box></code></dt> - <dd>See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd> - <dt id="<background-color>"><code><background-color></code></dt> - <dd>See {{cssxref("background-color")}}</dd> - <dt id="<bg-image>"><code><bg-image></code></dt> - <dd>See {{Cssxref("background-image")}}</dd> - <dt id="<position>"><code><position></code></dt> - <dd>See {{cssxref("background-position")}}</dd> - <dt id="<repeat-style>"><code><repeat-style></code></dt> - <dd>See {{cssxref("background-repeat")}}</dd> - <dt id="<bg-size>"><code><bg-size></code></dt> - <dd>See {{cssxref("background-size")}}.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p class="topbanner"> - Starry sky<br/> - Twinkle twinkle<br/> - Starry sky -</p> -<p class="warning">Here is a paragraph<p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css' highlight:[2,6];">.warning { - background: pink; -} - -.topbanner { - background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; -} -</pre> - -<h3 id="Sonuç">Sonuç</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No significant changes</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background', 'background')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("css.properties.background")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{cssxref("box-decoration-break")}}</li> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Using gradients</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li> -</ul> diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html deleted file mode 100644 index 7db7988ab8..0000000000 --- a/files/tr/web/css/class_selectors/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Class_selectors -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Sınıf_seçicileri ---- -<div>{{CSSRef("Selectors")}}</div> - -<p>Sınıf <code>(<em>class</em>)</code> seçicisi, bir HTML belgesindeki elementin <font face="Consolas, Liberation Mono, Courier, monospace">{{htmlattrxref("class")}} </font>özniteliğinin içeriği ile eşleşir. <font face="Consolas, Liberation Mono, Courier, monospace">{{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.</font></p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="syntaxbox">.sınıfismi { <em>style properties</em> }</pre> - -<p>Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> - -<pre class="syntaxbox">[class~=sınıfismi] { <em>style properties</em> }</pre> - -<h2 id="Örnek">Örnek</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">span.classy { - background-color: DodgerBlue; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><span class="classy">Here's a span with some text.</span> -<span>Here's another.</span> -</pre> - -<p>{{EmbedLiveSample('Example', 200, 50)}}</p> - -<h2 id="Spesifikasyon">Spesifikasyon</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>No changes</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 0e3e4b1b25..0000000000 --- a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2882 +0,0 @@ ---- -title: Box-shadow Oluşturucu -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - box-shadow oluşturucu -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -<p>Bu araç {{cssxref("box-shadow")}} CSS yapısı oluşturarak, CSS objelerinize box-shadow efekti vermenizi sağlar.</p> - -<div class="hidden"> -<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div id="container"> - <div class="group section"> - <div id="layer_manager"> - <div class="group section"> - <div class="button" data-type="add"> </div> - <div class="button" data-type="move-up"> </div> - <div class="button" data-type="move-down"> </div> - </div> - <div id="stack_container"></div> - </div> - - <div id="preview_zone"> - <div id="layer_menu" class="col span_12"> - <div class="button" id="element" data-type="subject" data-title="element"> element </div> - <div class="button" id="before" data-type="subject" data-title=":before"> - :before - <span class="delete" data-type="disable"></span> - </div> - <div class="button" id="after" data-type="subject" data-title=":after"> - :after - <span class="delete" data-type="disable"></span> - </div> - <div class="ui-checkbox" data-topic='before' data-label=":before"></div> - <div class="ui-checkbox" data-topic='after' data-label=":after"></div> - </div> - - <div id="preview"> - <div id="obj-element"> - <div class="content"> </div> - <div id="obj-before"> </div> - <div id="obj-after"> </div> - </div> - </div> - </div> - </div> - - <div id="controls" class="group section"> - <div class="wrap-left"> - <div class="colorpicker category"> - <div class="title"> </div> - <div id="colorpicker" class="group"> - <div id="gradient" class="gradient"> - <div id="gradient_picker"> </div> - </div> - <div id="hue" data-topic="hue" class="hue"> - <div id="hue_selector"> </div> - </div> - <div class="info"> - <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> - <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> - <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> - </div> - <div class="alpha"> - <div id="alpha" data-topic="alpha"> - <div id="alpha_selector"> </div> - </div> - </div> - <div class="info"> - <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> - <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> - <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> - </div> - <div class="preview block"> - <div id="output_color"> </div> - </div> - <div class="block info"> - <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> - <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> - </div> - </div> - </div> - </div> - - <div class="wrap-right"> - - <div id="shadow_properties" class="category"> - <div class="title"> Shadow properties </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> inset </div> - <div class="ui-checkbox" data-topic='inset'></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position x </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> - <div class="ui-slider" data-topic="posX" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> - <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position y </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> - <div class="ui-slider" data-topic="posY" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> - <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Blur </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> - <div class="ui-slider" data-topic="blur" - data-min="0" data-max="200" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> - <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Spread </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> - <div class="ui-slider" data-topic="spread" - data-min="-100" data-max="100" data-step="1" data-value="50"> - </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> - <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> - </div> - </div> - </div> - - <div id="element_properties" class="category"> - <div class="title"> Class element properties </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> border </div> - <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> - </div> - <div id="z-index" class="slidergroup"> - <div class="ui-slider-name"> z-index </div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> - <div class="ui-slider" data-topic="z-index" - data-min="-10" data-max="10" data-step="1"></div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> - <div class="ui-slider-input" data-topic="z-index"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> top </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> - <div class="ui-slider" data-topic="top" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> - <div class="ui-slider-input" data-topic="top" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> left </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> - <div class="ui-slider" data-topic="left" - data-min="-300" data-max="700" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> - <div class="ui-slider-input" data-topic="left" data-unit="px"></div> - </div> - <div id="transform_rotate" class="slidergroup"> - <div class="ui-slider-name"> Rotate </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> - <div class="ui-slider" data-topic="rotate" - data-min="-360" data-max="360" data-step="1" data-value="0"> - </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> - <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Width </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> - <div class="ui-slider" data-topic="width" - data-min="0" data-max="1000" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> - <div class="ui-slider-input" data-topic="width" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Height </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> - <div class="ui-slider" data-topic="height" - data-min="0" data-max="400" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> - <div class="ui-slider-input" data-topic="height" data-unit="px"></div> - </div> - </div> - </div> - - <div id="output" class="category"> - <div id="menu" class="menu"></div> - <div class="title"> CSS Code </div> - <div class="group" style="border-top-left-radius: 0;"> - <div class="output" data-topic="element" data-name="element" - data-prop="width height background-color position=[relative] box-shadow"> - </div> - <div class="output" data-topic="before" data-name="element:before" - data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - <div class="output" data-topic="after" data-name="element:after" - data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - </div> - </div> - </div> - </div> -</div> -</pre> - -<h3 id="CSS_Content">CSS Content</h3> - -<pre class="brush: css">/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - -/* - * UI Slider - */ - -.slidergroup { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.slidergroup * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -.ui-slider { - height: 10px; - width: 200px; - margin: 4px 10px; - display: block; - border: 1px solid #999; - border-radius: 3px; - background: #EEE; -} - -.ui-slider:hover { - cursor: pointer; -} - -.ui-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-slider-pointer { - width: 13px; - height: 13px; - background-color: #EEE; - border: 1px solid #2C9FC9; - border-radius: 3px; - position: relative; - top: -3px; - left: 0%; -} - -.ui-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 3px; - color: #FFF; - font-weight: bold; - text-align: center; -} - -.ui-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -.ui-slider-input > input { - margin: 0 10px; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/* - * BOX SHADOW GENERATOR TOOL - */ - -body { - max-width: 1000px; - height: 800px; - margin: 20px auto 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -#container { - width: 100%; - padding: 2px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* container with shadows stacks */ -#stack_container { - height: 400px; - overflow: hidden; - position: relative; - border: 1px solid #CCC; - border-radius: 3px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#stack_container .container { - height: 100%; - width: 100%; - position: absolute; - left: 100%; - transition-property: left; - transition-duration: 0.5s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -#stack_container .title { - text-align: center; - font-weight: bold; - line-height: 2em; - border-bottom: 1px solid #43A6E1; - color: #666; -} - - -/* - * Stack of Layers for shadow - */ - -#layer_manager { - width: 17%; - background-color: #FEFEFE; - margin: 0 1% 0 0; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - - -#layer_manager .button { - width: 30%; - height: 25px; - margin:0 0 10px; - color: #333; - background-color: #EEE; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - border: 1px solid #CCC; - border-radius: 3px; - - display: block; - background-position: center center; - background-repeat: no-repeat; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - -#layer_manager .button:hover { - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_manager [data-type='add'] { - background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); -} - -#layer_manager [data-type='add']:hover { - background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); -} - -#layer_manager [data-type='move-up'] { - background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); - margin-left: 5%; - margin-right: 5%; -} - -#layer_manager [data-type='move-up']:hover { - background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); -} - -#layer_manager [data-type='move-down'] { - background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); -} - -#layer_manager [data-type='move-down']:hover { - background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); -} - -/* shadows classes */ - -#layer_manager .node { - width: 100%; - margin: 5px 0; - padding: 5px; - text-align: center; - background-color: #EEE; - border: 1px solid #DDD; - font-size: 0.75em; - line-height: 1.5em; - color: #333; - border-radius: 3px; - - position: relative; - display: block; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_manager .node:hover { - color: #FFF; - background-color: #3380C4; - cursor: pointer; -} - -/* active element styling */ - -#layer_manager [data-active='layer'] { - color: #FFF; - border: none; - background-color: #379B4A; -} - -#layer_manager [data-active='subject'] { - color: #FFF; - background-color: #467FC9; -} - -/* delete button */ - -#layer_manager .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 10px; - display: none; -} - -#layer_manager .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_manager .node:hover .delete { - display: block; -} - - -#layer_manager .stack { - padding: 0 5px; - max-height: 90%; - overflow: auto; - overflow-x: hidden; -} - - -/* - * Layer Menu - */ - -#layer_menu { - margin: 0 0 10px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button { - width: 100px; - margin: 0 5px 0 0; - padding: 2.5px; - color: #333; - background-color: #EEE; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - - position: relative; - display: block; - float: left; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button:hover { - color: #FFF; - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_menu .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 5px; - display: none; -} - -#layer_menu .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_menu .button:hover .delete { - display: block; -} - - -/* - * active element styling - */ - -#layer_menu [data-active='subject'] { - color: #FFF; - background-color: #379B4A; - border: 1px solid #379B4A; -} - - -/* Checkbox */ - -#layer_menu .ui-checkbox > label { - height: 15px; - line-height: 17px; - font-weight: normal; - width: 46px; - margin: 0 5px 0 0; -} - -#layer_menu .ui-checkbox > input:checked + label { - display: none; -} - - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview_zone { - width: 82%; - float: left; - -} - - -#preview { - width: 100%; - height: 400px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - float: left; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#obj-element { - width: 300px; - height: 100px; - border: 1px solid #CCC; - background: #FFF; - position: relative; -} - - -#obj-before { - height: 100%; - width: 100%; - background: #999; - border: 1px solid #CCC; - text-align: left; - display : block; - position: absolute; - z-index: -1; -} - -#obj-after { - height: 100%; - width: 100%; - background: #DDD; - border: 1px solid #CCC; - text-align: right; - display : block; - position: absolute; - z-index: -1; -} - - -/******************************************************************************/ -/******************************************************************************/ - -/** - * Controls - */ - -.wrap-left { - float: left; - overflow: hidden; -} - -.wrap-right { - float: right; - overflow: hidden; -} - -.wrap-left > * { - float: left; -} - -.wrap-right > * { - float: right; -} - -@media (min-width: 960px) { - - .wrap-left { - width: 45%; - } - - .wrap-right { - width: 55%; - } -} - - -@media (max-width: 959px) { - - .wrap-left { - width: 30%; - } - - .wrap-right { - width: 70%; - } -} - - -#controls { - color: #444; - margin: 10px 0 0 0; -} - - -#controls .category { - width: 500px; - margin: 0 auto 20px; - padding: 0; - -} - -#controls .category .title { - width: 100%; - height: 1.5em; - line-height: 1.5em; - color: #AAA; - text-align: right; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 3px; -} - - -/** - * Color Picker - */ - -@media (min-width: 960px) { - #controls .colorpicker { - width: 420px; - } -} - -@media (max-width: 959px) { - #controls .colorpicker { - width: 210px; - } -} - -#colorpicker { - width: 100%; - margin: 0 auto; -} - -#colorpicker .gradient { - width: 200px; - height: 200px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background-color: #F00; - float: left; -} - -#colorpicker .hue { - width: 200px; - height: 30px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5701/hue.png"); - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - float: left; -} - -#colorpicker .alpha { - width: 200px; - height: 30px; - margin: 5px; - border: 1px solid #CCC; - float: left; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker #alpha { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); - background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); -} - -#colorpicker #gradient_picker { - width: 0.5em; - height: 0.5em; - border-radius: 0.4em; - border: 2px solid #CCC; - position: relative; - top: 20%; - left: 20%; -} - -#colorpicker #hue_selector, -#colorpicker #alpha_selector { - width: 3px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; - left: 0%; -} - -/* input HSV and RGB */ -#colorpicker .info { - width: 200px; - margin: 5px; - float: left; -} - -#colorpicker .info * { - float: left; -} - -#colorpicker .info input { - margin: 0; - text-align: center; - width: 30px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#colorpicker .info span { - height: 20px; - width: 30px; - text-align: center; - line-height: 20px; - display: block; -} - -/* Preview color */ -#colorpicker .block { - width: 95px; - height: 54px; - float: left; - position: relative; -} - -#colorpicker .preview { - margin: 5px; - border: 1px solid #CCC; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker .preview:before { - height: 100%; - width: 50%; - left: 50%; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -#colorpicker .preview > * { - width: 50%; - height: 100%; -} - -#colorpicker #output_color { - width: 100%; - height: 100%; - position: absolute; - z-index: 2; -} - -#colorpicker .block .input { - float: right; -} - -#colorpicker [data-topic="a"] > span { - width: 50px; -} - -#colorpicker [data-topic="hexa"] { - float: right; - margin: 10px 0 0 0; -} - -#colorpicker [data-topic="hexa"] > span { - display: none; -} - -#colorpicker [data-topic="hexa"] > input { - width: 85px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* - * UI Components - */ - -/* Property */ - -.property { - height: 20px; - margin: 10px 0; -} - -.property * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -#controls .ui-slider-name { - margin: 0 10px 0 0; -} - -/* - * Output code styling - */ - -#output { - position: relative; -} - -#output .menu { - max-width: 70%; - height: 20px; - position: absolute; - top: 2px; -} - -#output .button { - width: 90px; - height: 22px; - margin: 0 5px 0 0; - text-align: center; - line-height: 20px; - font-size: 14px; - color: #FFF; - background-color: #999; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - bottom: -5px; - float:left; -} - -#output .button:hover { - color: #FFF; - background-color: #666; - cursor: pointer; -} - -#output .menu [data-active="true"] { - color: #777; - background-color: #FFF; - border: 1px solid #CCC; - border-bottom: none; -} - -#output .menu [data-topic="before"] { - left: 100px; -} - -#output .menu [data-topic="after"] { - left: 200px; -} - -#output .output { - width: 480px; - margin: 10px; - padding: 10px; - overflow: hidden; - color: #555; - font-size: 14px; - border: 1px dashed #CCC; - border-radius: 3px; - display: none; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#output .css-property { - width: 100%; - float: left; - white-space: pre; -} - -#output .name { - width: 35%; - float: left; -} - -#output .value { - width: 65%; - float: left; -} - -</pre> - -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js"><code class="language-js"> - -'use strict'; - -/** - * UI-SlidersManager - */ - -var SliderManager = (function SliderManager() { - - var subscribers = {}; - var sliders = []; - - var Slider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var snap = node.getAttribute('data-snap'); - var topic = node.getAttribute('data-topic'); - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; - this.snap = snap === "true" ? true : false; - this.topic = topic; - this.node = node; - - var pointer = document.createElement('div'); - pointer.className = 'ui-slider-pointer'; - node.appendChild(pointer); - this.pointer = pointer; - - setMouseTracking(node, updateSlider.bind(this)); - - sliders[topic] = this; - setValue(topic, this.value); - } - - var setButtonComponent = function setButtonComponent(node) { - var type = node.getAttribute('data-type'); - var topic = node.getAttribute('data-topic'); - if (type === "sub") { - node.textContent = '-'; - node.addEventListener("click", function() { - decrement(topic); - }); - } - if (type === "add") { - node.textContent = '+'; - node.addEventListener("click", function() { - increment(topic); - }); - } - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var unit_type = node.getAttribute('data-unit'); - - var input = document.createElement('input'); - var unit = document.createElement('span'); - unit.textContent = unit_type; - - input.setAttribute('type', 'text'); - node.appendChild(input); - node.appendChild(unit); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - setValue(topic, e.target.value | 0); - }); - - subscribe(topic, function(value) { - node.children[0].value = value; - }); - } - - var increment = function increment(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value + slider.step <= slider.max) { - slider.value += slider.step; - setValue(slider.topic, slider.value) - notify.call(slider); - } - }; - - var decrement = function decrement(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value - slider.step >= slider.min) { - slider.value -= slider.step; - setValue(topic, slider.value) - notify.call(slider); - } - } - - // this = Slider object - var updateSlider = function updateSlider(e) { - var node = this.node; - var pos = e.pageX - node.offsetLeft; - var width = node.clientWidth; - var delta = this.max - this.min; - var offset = this.pointer.clientWidth + 4; // border width * 2 - - if (pos < 0) pos = 0; - if (pos > width) pos = width; - - var value = pos * delta / width | 0; - var precision = value % this.step; - value = value - precision + this.min; - if (precision > this.step / 2) - value = value + this.step; - - if (this.snap) - pos = (value - this.min) * width / delta; - - this.pointer.style.left = pos - offset/2 + "px"; - this.value = value; - node.setAttribute('data-value', value); - notify.call(this); - } - - var setValue = function setValue(topic, value) { - var slider = sliders[topic]; - - if (value > slider.max || value < slider.min) - return; - - var delta = slider.max - slider.min; - var width = slider.node.clientWidth; - var offset = slider.pointer.clientWidth; - var pos = (value - slider.min) * width / delta; - slider.value = value; - slider.pointer.style.left = pos - offset / 2 + "px"; - slider.node.setAttribute('data-value', value); - notify.call(slider); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-slider-btn-set'); - size = elem.length; - for (var i = 0; i < size; i++) - setButtonComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider-input'); - size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider'); - size = elem.length; - for (var i = 0; i < size; i++) - new Slider(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - notify.call(buttons[topic]); - } - catch(error) { - console.log(error, topic, value); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - - -window.addEventListener("load", function(){ - BoxShadow.init(); -}); - -var BoxShadow = (function BoxShadow() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * RGBA Color class - */ - - function Color() { - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - } - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (red != undefined) - this.r = red | 0; - if (green != undefined) - this.g = green | 0; - if (blue != undefined) - this.b = blue | 0; - if (alpha != undefined) - this.a = alpha | 0; - } - - /** - * HSV/HSB (hue, saturation, value / brightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - */ - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.updateRGB(); - } - - Color.prototype.updateRGB = function updateRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision; - X = (X + m) * precision; - m = m * precision; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - } - - Color.prototype.updateHSV = function updateHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - } - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - } - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - } - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = "(" + this.r + ", " + this.g + ", " + this.b; - var a = ''; - var v = ''; - if (this.a !== 1) { - a = 'a'; - v = ', ' + this.a; - } - - var value = "rgb" + a + rgb + v + ")"; - return value; - } - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - } - - /** - * Shadow Object - */ - function Shadow() { - this.inset = false; - this.posX = 5; - this.posY = -5; - this.blur = 5; - this.spread = 0; - this.color = new Color(); - - var hue = (Math.random() * 360) | 0; - var saturation = (Math.random() * 75) | 0; - var value = (Math.random() * 50 + 50) | 0; - this.color.setHSV(hue, saturation, value, 1); - } - - Shadow.prototype.computeCSS = function computeCSS() { - var value = ""; - if (this.inset === true) - value += "inset "; - value += this.posX + "px "; - value += this.posY + "px "; - value += this.blur + "px "; - value += this.spread + "px "; - value += this.color.getColor(); - - return value; - } - - Shadow.prototype.toggleInset = function toggleInset(value) { - if (value !== undefined || typeof value === "boolean") - this.inset = value; - else - this.inset = this.inset === true ? false : true; - } - - Shadow.prototype.copy = function copy(obj) { - if(obj instanceof Shadow !== true) { - console.log("Typeof instance not Shadow"); - return; - } - - this.inset = obj.inset; - this.posX = obj.posX; - this.posY = obj.posY; - this.blur = obj.blur; - this.spread = obj.spread; - this.color.copy(obj.color); - } - - /** - * Color Picker - */ - var ColoPicker = (function ColoPicker() { - - var colorpicker; - var hue_area; - var gradient_area; - var alpha_area; - var gradient_picker; - var hue_selector; - var alpha_selector; - var pick_object; - var info_rgb; - var info_hsv; - var info_hexa; - var output_color; - var color = new Color(); - var subscribers = []; - - var updateColor = function updateColor(e) { - var x = e.pageX - gradient_area.offsetLeft; - var y = e.pageY - gradient_area.offsetTop; - - // width and height should be the same - var size = gradient_area.clientWidth; - - if (x > size) - x = size; - if (y > size) - y = size; - - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - color.setHSV(color.hue, saturation, value); - // should update just - // color pointer location - updateUI(); - notify("color", color); - } - - var updateHue = function updateHue(e) { - var x = e.pageX - hue_area.offsetLeft; - var width = hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - var hue = ((360 * x) / width) | 0; - if (hue === 360) hue = 359; - - color.setHSV(hue, color.saturation, color.value); - - // should update just - // hue pointer location - // picker area background - // alpha area background - updateUI(); - notify("color", color); - } - - var updateAlpha = function updateAlpha(e) { - var x = e.pageX - alpha_area.offsetLeft; - var width = alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - color.a = (x / width).toFixed(2); - - // should update just - // alpha pointer location - updateUI(); - notify("color", color); - } - - var setHueGfx = function setHueGfx(hue) { - var sat = color.saturation; - var val = color.value; - var alpha = color.a; - - color.setHSV(hue, 100, 100); - gradient_area.style.backgroundColor = color.getHexa(); - - color.a = 0; - var start = color.getRGBA(); - color.a = 1; - var end = color.getRGBA(); - color.a = alpha; - - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - } - - var updateUI = function updateUI() { - var x, y; // coordinates - var size; // size of the area - var offset; // pointer graphic selector offset - - // Set color pointer location - size = gradient_area.clientWidth; - offset = gradient_picker.clientWidth / 2 + 2; - - x = (color.saturation * size / 100) | 0; - y = size - (color.value * size / 100) | 0; - - gradient_picker.style.left = x - offset + "px"; - gradient_picker.style.top = y - offset + "px"; - - // Set hue pointer location - size = hue_area.clientWidth; - offset = hue_selector.clientWidth/2; - x = (color.hue * size / 360 ) | 0; - hue_selector.style.left = x - offset + "px"; - - // Set alpha pointer location - size = alpha_area.clientWidth; - offset = alpha_selector.clientWidth/2; - x = (color.a * size) | 0; - alpha_selector.style.left = x - offset + "px"; - - // Set picker area background - var nc = new Color(); - nc.copy(color); - if (nc.hue === 360) nc.hue = 0; - nc.setHSV(nc.hue, 100, 100); - gradient_area.style.backgroundColor = nc.getHexa(); - - // Set alpha area background - nc.copy(color); - nc.a = 0; - var start = nc.getRGBA(); - nc.a = 1; - var end = nc.getRGBA(); - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - - // Update color info - notify("color", color); - notify("hue", color.hue); - notify("saturation", color.saturation); - notify("value", color.value); - notify("r", color.r); - notify("g", color.g); - notify("b", color.b); - notify("a", color.a); - notify("hexa", color.getHexa()); - output_color.style.backgroundColor = color.getRGBA(); - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var title = node.getAttribute('data-title'); - var action = node.getAttribute('data-action'); - title = title === null ? '' : title; - - var input = document.createElement('input'); - var info = document.createElement('span'); - info.textContent = title; - - input.setAttribute('type', 'text'); - input.setAttribute('data-action', 'set-' + action + '-' + topic); - node.appendChild(info); - node.appendChild(input); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - if (action === 'HSV') - inputChangeHSV(topic); - if (action === 'RGB') - inputChangeRGB(topic); - if (action === 'alpha') - inputChangeAlpha(topic); - if (action === 'hexa') - inputChangeHexa(topic); - }); - - subscribe(topic, function(value) { - node.children[1].value = value; - }); - } - - var inputChangeHSV = function actionHSV(topic) { - var selector = "[data-action='set-HSV-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) - color[topic] = value; - - color.updateRGB(); - updateUI(); - } - - var inputChangeRGB = function inputChangeRGB(topic) { - var selector = "[data-action='set-RGB-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) - color[topic] = value; - - color.updateHSV(); - updateUI(); - } - - var inputChangeAlpha = function inputChangeAlpha(topic) { - var selector = "[data-action='set-alpha-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseFloat(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - color.a = value.toFixed(2); - - updateUI(); - } - - var inputChangeHexa = function inputChangeHexa(topic) { - var selector = "[data-action='set-hexa-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = node.value; - color.setHexa(value); - color.updateHSV(); - updateUI(); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - /* - * Observer - */ - var setColor = function setColor(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - color.copy(obj); - updateUI(); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(topic, value) { - for (var i in subscribers[topic]) - subscribers[topic][i](value); - } - - var init = function init() { - colorpicker = getElemById("colorpicker"); - hue_area = getElemById("hue"); - gradient_area = getElemById("gradient"); - alpha_area = getElemById("alpha"); - gradient_picker = getElemById("gradient_picker"); - hue_selector = getElemById("hue_selector"); - alpha_selector = getElemById("alpha_selector"); - output_color = getElemById("output_color"); - - var elem = document.querySelectorAll('#colorpicker .input'); - var size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - setMouseTracking(gradient_area, updateColor); - setMouseTracking(hue_area, updateHue); - setMouseTracking(alpha_area, updateAlpha); - - } - - return { - init : init, - setColor : setColor, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /* - * Element Class - */ - var CssClass = function CssClass(id) { - this.left = 0; - this.top = 0; - this.rotate = 0; - this.width = 300; - this.height = 100; - this.display = true; - this.border = true; - this.zIndex = -1; - this.bgcolor = new Color(); - this.id = id; - this.node = getElemById('obj-' + id); - this.object = getElemById(id); - this.shadowID = null; - this.shadows = [] - this.render = []; - this.init(); - } - - CssClass.prototype.init = function init() { - this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; - this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; - - this.setTop(this.top); - this.setLeft(this.left); - this.setHeight(this.height); - this.setWidth(this.width); - this.bgcolor.setHSV(0, 0, 100); - this.updateBgColor(this.bgcolor); - } - - CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { - this.left += deltaX; - this.top += deltaY; - this.node.style.top = this.top + "px"; - this.node.style.left = this.left + "px"; - SliderManager.setValue("left", this.left); - SliderManager.setValue("top", this.top); - } - - CssClass.prototype.setLeft = function setLeft(value) { - this.left = value; - this.node.style.left = this.left + "px"; - OutputManager.updateProperty(this.id, 'left', this.left + 'px'); - } - - CssClass.prototype.setTop = function setTop(value) { - this.top = value; - this.node.style.top = this.top + 'px'; - OutputManager.updateProperty(this.id, 'top', this.top + 'px'); - } - - CssClass.prototype.setWidth = function setWidth(value) { - this.width = value; - this.node.style.width = this.width + 'px'; - OutputManager.updateProperty(this.id, 'width', this.width + 'px'); - } - - CssClass.prototype.setHeight = function setHeight(value) { - this.height = value; - this.node.style.height = this.height + 'px'; - OutputManager.updateProperty(this.id, 'height', this.height + 'px'); - } - - // Browser support - CssClass.prototype.setRotate = function setRotate(value) { - var cssvalue = 'rotate(' + value +'deg)'; - - this.node.style.transform = cssvalue; - this.node.style.webkitTransform = cssvalue; - this.node.style.msTransform = cssvalue; - - if (value !== 0) { - if (this.rotate === 0) { - OutputManager.toggleProperty(this.id, 'transform', true); - OutputManager.toggleProperty(this.id, '-webkit-transform', true); - OutputManager.toggleProperty(this.id, '-ms-transform', true); - } - } - else { - OutputManager.toggleProperty(this.id, 'transform', false); - OutputManager.toggleProperty(this.id, '-webkit-transform', false); - OutputManager.toggleProperty(this.id, '-ms-transform', false); - } - - OutputManager.updateProperty(this.id, 'transform', cssvalue); - OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); - OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); - this.rotate = value; - } - - CssClass.prototype.setzIndex = function setzIndex(value) { - this.node.style.zIndex = value; - OutputManager.updateProperty(this.id, 'z-index', value); - this.zIndex = value; - } - - CssClass.prototype.toggleDisplay = function toggleDisplay(value) { - if (typeof value !== "boolean" || this.display === value) - return; - - this.display = value; - var display = this.display === true ? "block" : "none"; - this.node.style.display = display; - this.object.style.display = display; - } - - CssClass.prototype.toggleBorder = function toggleBorder(value) { - if (typeof value !== "boolean" || this.border === value) - return; - - this.border = value; - var border = this.border === true ? "1px solid #CCC" : "none"; - this.node.style.border = border; - } - - CssClass.prototype.updateBgColor = function updateBgColor(color) { - this.bgcolor.copy(color); - this.node.style.backgroundColor = color.getColor(); - OutputManager.updateProperty(this.id, 'background-color', color.getColor()); - } - - CssClass.prototype.updateShadows = function updateShadows() { - if (this.render.length === 0) - OutputManager.toggleProperty(this.id, 'box-shadow', false); - if (this.render.length === 1) - OutputManager.toggleProperty(this.id, 'box-shadow', true); - - this.node.style.boxShadow = this.render.join(", "); - OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); - - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - - var preview; - var classes = []; - var active = null; - var animate = false; - - /* - * Toll actions - */ - var addCssClass = function addCssClass(id) { - classes[id] = new CssClass(id); - } - - var setActiveClass = function setActiveClass(id) { - active = classes[id]; - active.shadowID = null; - ColoPicker.setColor(classes[id].bgcolor); - SliderManager.setValue("top", active.top); - SliderManager.setValue("left", active.left); - SliderManager.setValue("rotate", active.rotate); - SliderManager.setValue("z-index", active.zIndex); - SliderManager.setValue("width", active.width); - SliderManager.setValue("height", active.height); - ButtonManager.setValue("border-state", active.border); - active.updateShadows(); - } - - var disableClass = function disableClass(topic) { - classes[topic].toggleDisplay(false); - ButtonManager.setValue(topic, false); - } - - var addShadow = function addShadow(position) { - if (animate === true) - return -1; - - active.shadows.splice(position, 0, new Shadow()); - active.render.splice(position, 0, null); - } - - var swapShadow = function swapShadow(id1, id2) { - var x = active.shadows[id1]; - active.shadows[id1] = active.shadows[id2]; - active.shadows[id2] = x; - updateShadowCSS(id1); - updateShadowCSS(id2); - } - - var deleteShadow = function deleteShadow(position) { - active.shadows.splice(position, 1); - active.render.splice(position, 1); - active.updateShadows(); - } - - var setActiveShadow = function setActiveShadow(id, glow) { - active.shadowID = id; - ColoPicker.setColor(active.shadows[id].color); - ButtonManager.setValue("inset", active.shadows[id].inset); - SliderManager.setValue("blur", active.shadows[id].blur); - SliderManager.setValue("spread", active.shadows[id].spread); - SliderManager.setValue("posX", active.shadows[id].posX); - SliderManager.setValue("posY", active.shadows[id].posY); - if (glow === true) - addGlowEffect(id); - } - - var addGlowEffect = function addGlowEffect(id) { - if (animate === true) - return; - - animate = true; - var store = new Shadow(); - var shadow = active.shadows[id]; - - store.copy(shadow); - shadow.color.setRGBA(40, 125, 200, 1); - shadow.blur = 10; - shadow.spread = 10; - - active.node.style.transition = "box-shadow 0.2s"; - updateShadowCSS(id); - - setTimeout(function() { - shadow.copy(store); - updateShadowCSS(id); - setTimeout(function() { - active.node.style.removeProperty("transition"); - animate = false; - }, 100); - }, 200); - } - - var updateActivePos = function updateActivePos(deltaX, deltaY) { - if (active.shadowID === null) - active.updatePos(deltaX, deltaY); - else - updateShadowPos(deltaX, deltaY); - } - - /* - * Shadow properties - */ - var updateShadowCSS = function updateShadowCSS(id) { - active.render[id] = active.shadows[id].computeCSS(); - active.updateShadows(); - } - - var toggleShadowInset = function toggleShadowInset(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].toggleInset(value); - updateShadowCSS(active.shadowID); - } - - var updateShadowPos = function updateShadowPos(deltaX, deltaY) { - var shadow = active.shadows[active.shadowID]; - shadow.posX += deltaX; - shadow.posY += deltaY; - SliderManager.setValue("posX", shadow.posX); - SliderManager.setValue("posY", shadow.posY); - updateShadowCSS(active.shadowID); - } - - var setShadowPosX = function setShadowPosX(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posX = value; - updateShadowCSS(active.shadowID); - } - - var setShadowPosY = function setShadowPosY(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posY = value; - updateShadowCSS(active.shadowID); - } - - var setShadowBlur = function setShadowBlur(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].blur = value; - updateShadowCSS(active.shadowID); - } - - var setShadowSpread = function setShadowSpread(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].spread = value; - updateShadowCSS(active.shadowID); - } - - var updateShadowColor = function updateShadowColor(color) { - active.shadows[active.shadowID].color.copy(color); - updateShadowCSS(active.shadowID); - } - - /* - * Element Properties - */ - var updateColor = function updateColor(color) { - if (active.shadowID === null) - active.updateBgColor(color); - else - updateShadowColor(color); - } - - var init = function init() { - preview = getElemById("preview"); - - ColoPicker.subscribe("color", updateColor); - PreviewMouseTracking.subscribe(updateActivePos); - - // Affects shadows - ButtonManager.subscribe("inset", toggleShadowInset); - SliderManager.subscribe("posX", setShadowPosX); - SliderManager.subscribe("posY", setShadowPosY); - SliderManager.subscribe("blur", setShadowBlur); - SliderManager.subscribe("spread", setShadowSpread); - - // Affects element - SliderManager.subscribe("top", function(value){ - active.setTop(value); - }); - SliderManager.subscribe("left", function(value){ - active.setLeft(value); - }); - SliderManager.subscribe("rotate", function(value) { - if (active == classes["element"]) - return; - active.setRotate(value); - }); - - SliderManager.subscribe("z-index", function(value) { - if (active == classes["element"]) - return; - active.setzIndex(value); - }); - - SliderManager.subscribe("width", function(value) { - active.setWidth(value) - }); - - SliderManager.subscribe("height", function(value) { - active.setHeight(value) - }); - - // Actions - classes['before'].top = -30; - classes['before'].left = -30; - classes['after'].top = 30; - classes['after'].left = 30; - classes['before'].toggleDisplay(false); - classes['after'].toggleDisplay(false); - ButtonManager.setValue('before', false); - ButtonManager.setValue('after', false); - - ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); - ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); - - ButtonManager.subscribe("border-state", function(value) { - active.toggleBorder(value); - }); - - } - - return { - init : init, - addShadow : addShadow, - swapShadow : swapShadow, - addCssClass : addCssClass, - disableClass : disableClass, - deleteShadow : deleteShadow, - setActiveClass : setActiveClass, - setActiveShadow : setActiveShadow - } - - })(); - - /** - * Layer Manager - */ - var LayerManager = (function LayerManager() { - var stacks = []; - var active = { - node : null, - stack : null - } - var elements = {}; - - var mouseEvents = function mouseEvents(e) { - var node = e.target; - var type = node.getAttribute('data-type'); - - if (type === 'subject') - setActiveStack(stacks[node.id]); - - if (type === 'disable') { - Tool.disableClass(node.parentNode.id); - setActiveStack(stacks['element']); - } - - if (type === 'add') - active.stack.addLayer(); - - if (type === 'layer') - active.stack.setActiveLayer(node); - - if (type === 'delete') - active.stack.deleteLayer(node.parentNode); - - if (type === 'move-up') - active.stack.moveLayer(1); - - if (type === 'move-down') - active.stack.moveLayer(-1); - } - - var setActiveStack = function setActiveStack(stackObj) { - active.stack.hide(); - active.stack = stackObj; - active.stack.show(); - } - - /* - * Stack object - */ - var Stack = function Stack(subject) { - var S = document.createElement('div'); - var title = document.createElement('div'); - var stack = document.createElement('div'); - - S.className = 'container'; - stack.className = 'stack'; - title.className = 'title'; - title.textContent = subject.getAttribute('data-title'); - S.appendChild(title); - S.appendChild(stack); - - this.id = subject.id; - this.container = S; - this.stack = stack; - this.subject = subject; - this.order = []; - this.uid = 0; - this.count = 0; - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.addLayer = function addLayer() { - if (Tool.addShadow(this.layerID) == -1) - return; - - var uid = this.getUID(); - var layer = this.createLayer(uid); - - if (this.layer === null && this.stack.children.length >= 1) - this.layer = this.stack.children[0]; - - this.stack.insertBefore(layer, this.layer); - this.order.splice(this.layerID, 0, uid); - this.count++; - this.setActiveLayer(layer); - } - - Stack.prototype.createLayer = function createLayer(uid) { - var layer = document.createElement('div'); - var del = document.createElement('span'); - - layer.className = 'node'; - layer.setAttribute('data-shid', uid); - layer.setAttribute('data-type', 'layer'); - layer.textContent = 'shadow ' + uid; - - del.className = 'delete'; - del.setAttribute('data-type', 'delete'); - - layer.appendChild(del); - return layer; - } - - Stack.prototype.getUID = function getUID() { - return this.uid++; - } - - // SOLVE IE BUG - Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) - return; - if (direction === -1 && this.layerID === (this.count - 1) ) - return; - if (direction === 1 && this.layerID === 0 ) - return; - - if (direction === -1) { - var before = null; - Tool.swapShadow(this.layerID, this.layerID + 1); - this.swapOrder(this.layerID, this.layerID + 1); - this.layerID += 1; - - if (this.layerID + 1 !== this.count) - before = this.stack.children[this.layerID + 1]; - - this.stack.insertBefore(this.layer, before); - Tool.setActiveShadow(this.layerID, false); - } - - if (direction === 1) { - Tool.swapShadow(this.layerID, this.layerID - 1); - this.swapOrder(this.layerID, this.layerID - 1); - this.layerID -= 1; - this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); - Tool.setActiveShadow(this.layerID, false); - } - } - - Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { - var x = this.order[pos1]; - this.order[pos1] = this.order[pos2]; - this.order[pos2] = x; - } - - Stack.prototype.deleteLayer = function deleteLayer(node) { - var shadowID = node.getAttribute('data-shid') | 0; - var index = this.order.indexOf(shadowID); - this.stack.removeChild(this.stack.children[index]); - this.order.splice(index, 1); - this.count--; - - Tool.deleteShadow(index); - - if (index > this.layerID) - return; - - if (index == this.layerID) { - if (this.count >= 1) { - this.layerID = 0; - this.setActiveLayer(this.stack.children[0], true); - } - else { - this.layer = null; - this.show(); - } - } - - if (index < this.layerID) { - this.layerID--; - Tool.setActiveShadow(this.layerID, true); - } - - } - - Stack.prototype.setActiveLayer = function setActiveLayer(node) { - elements.shadow_properties.style.display = 'block'; - elements.element_properties.style.display = 'none'; - - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = node; - this.layer.setAttribute('data-active', 'layer'); - - var shadowID = node.getAttribute('data-shid') | 0; - this.layerID = this.order.indexOf(shadowID); - Tool.setActiveShadow(this.layerID, true); - } - - Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.hide = function hide() { - this.unsetActiveLayer(); - this.subject.removeAttribute('data-active'); - var style = this.container.style; - style.left = '100%'; - style.zIndex = '0'; - } - - Stack.prototype.show = function show() { - elements.shadow_properties.style.display = 'none'; - elements.element_properties.style.display = 'block'; - - if (this.id === 'element') { - elements.zIndex.style.display = 'none'; - elements.transform_rotate.style.display = 'none'; - } - else { - elements.zIndex.style.display = 'block'; - elements.transform_rotate.style.display = 'block'; - } - - this.subject.setAttribute('data-active', 'subject'); - var style = this.container.style; - style.left = '0'; - style.zIndex = '10'; - Tool.setActiveClass(this.id); - } - - function init() { - - var elem, size; - var layerManager = getElemById("layer_manager"); - var layerMenu = getElemById("layer_menu"); - var container = getElemById("stack_container"); - - elements.shadow_properties = getElemById('shadow_properties'); - elements.element_properties = getElemById('element_properties'); - elements.transform_rotate = getElemById('transform_rotate'); - elements.zIndex = getElemById('z-index'); - - elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); - size = elem.length; - - for (var i = 0; i < size; i++) { - var S = new Stack(elem[i]); - stacks[elem[i].id] = S; - container.appendChild(S.container); - Tool.addCssClass(elem[i].id); - } - - active.stack = stacks['element']; - stacks['element'].show(); - - layerManager.addEventListener("click", mouseEvents); - layerMenu.addEventListener("click", mouseEvents); - - ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) - setActiveStack(stacks['before']) - }); - - ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) - setActiveStack(stacks['after']) - }); - } - - return { - init : init - } - })(); - - /* - * OutputManager - */ - var OutputManager = (function OutputManager() { - var classes = []; - var buttons = []; - var active = null; - var menu = null; - var button_offset = 0; - - var crateOutputNode = function(topic, property) { - - var prop = document.createElement('div'); - var name = document.createElement('span'); - var value = document.createElement('span'); - - var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); - - name.textContent = '\t' + pmatch[4]; - - if (pmatch[3] !== undefined) { - name.textContent = '\t' + pmatch[2]; - value.textContent = pmatch[3] + ';'; - } - - name.textContent += ': '; - prop.className = 'css-property'; - name.className = 'name'; - value.className = 'value'; - prop.appendChild(name); - prop.appendChild(value); - - classes[topic].node.appendChild(prop); - classes[topic].line[property] = prop; - classes[topic].prop[property] = value; - } - - var OutputClass = function OutputClass(node) { - var topic = node.getAttribute('data-topic'); - var prop = node.getAttribute('data-prop'); - var name = node.getAttribute('data-name'); - var properties = prop.split(' '); - - classes[topic] = {}; - classes[topic].node = node; - classes[topic].prop = []; - classes[topic].line = []; - classes[topic].button = new Button(topic); - - var open_decl = document.createElement('div'); - var end_decl = document.createElement('div'); - - open_decl.textContent = name + ' {'; - end_decl.textContent = '}'; - node.appendChild(open_decl); - - for (var i in properties) - crateOutputNode(topic, properties[i]); - - node.appendChild(end_decl); - } - - var Button = function Button(topic) { - var button = document.createElement('div'); - - button.className = 'button'; - button.textContent = topic; - button.style.left = button_offset + 'px'; - button_offset += 100; - - button.addEventListener("click", function() { - toggleDisplay(topic); - }) - - menu.appendChild(button); - return button; - } - - var toggleDisplay = function toggleDisplay(topic) { - active.button.removeAttribute('data-active'); - active.node.style.display = 'none'; - active = classes[topic]; - active.node.style.display = 'block'; - active.button.setAttribute('data-active', 'true'); - } - - var toggleButton = function toggleButton(topic, value) { - var display = (value === true) ? 'block' : 'none'; - classes[topic].button.style.display = display; - - if (value === true) - toggleDisplay(topic); - else - toggleDisplay('element'); - } - - var updateProperty = function updateProperty(topic, property, data) { - try { - classes[topic].prop[property].textContent = data + ';'; - } - catch(error) { - // console.log("ERROR undefined : ", topic, property, data); - } - } - - var toggleProperty = function toggleProperty(topic, property, value) { - var display = (value === true) ? 'block' : 'none'; - try { - classes[topic].line[property].style.display = display; - } - catch(error) { - // console.log("ERROR undefined : ",classes, topic, property, value); - } - } - - var init = function init() { - - menu = getElemById('menu'); - - var elem = document.querySelectorAll('#output .output'); - var size = elem.length; - for (var i = 0; i < size; i++) - OutputClass(elem[i]); - - active = classes['element']; - toggleDisplay('element'); - - ButtonManager.subscribe("before", function(value) { - toggleButton('before', value); - }); - - ButtonManager.subscribe("after", function(value) { - toggleButton('after', value); - }); - } - - return { - init : init, - updateProperty : updateProperty, - toggleProperty : toggleProperty - } - - })(); - - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - OutputManager.init(); - ColoPicker.init(); - SliderManager.init(); - LayerManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); - - -</code></pre> -</div> - -<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div> - -<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p> diff --git a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index f93bbe1292..0000000000 --- a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/CSS/box_model ---- -<h2 id="Özet">Özet</h2> - -<p>Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.</p> - -<p>CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: <strong>margin kenarı</strong>, <strong>border kenarı</strong>, <strong>padding kenarı</strong> ve <strong>içerik kenarı</strong>.</p> - -<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/11171/boxmodel-%283%29.png" style="height: 384px; width: 548px;"></p> - -<p><a name="content"></a><strong>İçerik alanı, </strong>gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.</p> - -<p>Eğer CSS'in {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.</p> - -<p><a name="padding"></a><strong>Padding alanı </strong>borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.</p> - -<p>Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.</p> - -<p><a name="border"></a><strong>Border alanı </strong>padding alanını<strong> </strong>border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.</p> - -<p><a name="margin"></a><strong>Margin alanı </strong>border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan <em>margin kenarı </em>içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.</p> - -<p>Margin alanının boyutları {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.</p> - -<p><a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.</p> - -<p>Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.</p> - -<h2 id="Özellikleri">Özellikleri</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Özellik</th> - <th scope="col">Durum</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td> - <p>Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor</p> - </td> - </tr> - <tr> - <td>{{ SpecName("CSS1","#formatting-model")}}</td> - <td>{{ Spec2('CSS1') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Bunlara_da_bakın">Bunlara da bakın</h2> - -<ul> - <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> - <li>{{ CSS_key_concepts() }}</li> - <li>İlgili CSS özellikleri: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> -</ul> diff --git a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index bc33ddb4dd..0000000000 --- a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: CSS Sayaçlarını Kullanmak -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS Counter - - CSS Sayaçlar - - MDN - - Sayaçlar -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/CSS/Sayaçlar ---- -<p>{{CSSRef}}</p> -<p><span class="seoSummary">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document.</span> CSS counters are an implementation of <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p> -<p>The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the <code>counter()</code> or <code>counters()</code> function of the <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> property.</p> -<h2 id="Using_counters" name="Using_counters">Sayaçları kullanmak</h2> -<p>To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".</p> -<pre class="brush: css">body { - counter-reset: bolum; /* bolum adlı sayacın değerini 0 olarak ayarla */ -} -h3:before { - counter-increment: bolum; /* bolum adlı sayacı arttır */ - content: "Bölüm" counter(bolum) ": "; /* Sayacı görüntüle */ -} -</pre> -<p>Örnek:</p> -<pre class="brush: html"><h3>Giriş</h3> -<h3>Gövde</h3> -<h3>Sonuç</h3></pre> -<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p> -<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2> -<p>A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the <code>counters()</code> function, a string can be inserted between different levels of nested counters. For example this CSS:</p> -<pre class="brush: css">ol { - counter-reset: section; /* Creates a new instance of the - section counter with each ol - element */ - list-style-type: none; -} -li:before { - counter-increment: section; /* Increments only this instance - of the section counter */ - content: counters(section,".") " "; /* Adds the value of all instances - of the section counter separated - by a ".". */ - /* if you need to support < IE8 then - make sure there is no space after - the ',' -} -</pre> -<p>Combined with the following HTML:</p> -<pre class="brush: html"><ol> - <li>item</li> <!-- 1 --> - <li>item <!-- 2 --> - <ol> - <li>item</li> <!-- 2.1 --> - <li>item</li> <!-- 2.2 --> - <li>item <!-- 2.3 --> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - </ol> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - <li>item</li> <!-- 2.3.3 --> - </ol> - </li> - <li>item</li> <!-- 2.4 --> - </ol> - </li> - <li>item</li> <!-- 3 --> - <li>item</li> <!-- 4 --> -</ol> -<ol> - <li>item</li> <!-- 1 --> - <li>item</li> <!-- 2 --> -</ol></pre> -<p>Yields this result:</p> -<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</p> -<h2 id="Specifications" name="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> - <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> -</ul> -<p><em>There is an additional example available at <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. This blog entry was posted on November 01, 2006, but appears to be accurate.</em></p> -<p> </p> diff --git a/files/tr/web/css/css_selectors/index.html b/files/tr/web/css/css_selectors/index.html deleted file mode 100644 index af5308fe63..0000000000 --- a/files/tr/web/css/css_selectors/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: CSS seçiciler -slug: Web/CSS/CSS_Selectors -tags: - - Başlangıç - - CSS - - Nitelik - - Sozde - - id - - oğrenin - - seçiciler - - sınıf -translation_of: Web/CSS/CSS_Selectors -original_slug: Öğren/CSS/CSS_yapi_taslari/Selectors ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p class="summary">Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Ön koşullar:</th> - <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Seçici_nedir">Seçici nedir?</h2> - -<p>Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin <em>konusu</em> olarak anılır.</p> - -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> - -<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici <code>h1</code> veya sınıf seçici <code>.special</code> gibi.</p> - -<p>CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler spesifikasyonunda</a> tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.</p> - -<h2 id="Seçici_listeleri">Seçici listeleri</h2> - -<p>Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi, bir <em>seçici listesinde</em> birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan <code>h1</code> eleman seçicim ve <code>.special</code> sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -.special { - color: blue; -} </code></pre> - -<p>Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> - -<pre class="brush: css notranslate"><code>h1, .special { - color: blue; -} </code></pre> - -<p>Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.</p> - -<pre class="brush: css notranslate"><code>h1, -.special { - color: blue; -} </code></pre> - -<p>Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> - -<p>Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> - -<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> şekillendirmesi hala uygulanacaktır.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -..special { - color: blue; -} </code></pre> - -<p>Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de <code>h1</code> elemanı biçimlendirilmez</p> - -<pre class="brush: css notranslate"><code>h1, ..special { - color: blue; -} </code></pre> - -<h2 id="Seçici_türleri">Seçici türleri</h2> - -<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..</p> - -<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> - -<p>Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <code><h1></code>:</p> - -<pre class="brush: css notranslate">h1 { }</pre> - -<p>Ayrıca bir sınıfı hedefleyen seçicileri de içerir <code>class</code>:</p> - -<pre class="brush: css notranslate">.box { }</pre> - -<p>veya bir kimlik <code>id</code>:</p> - -<pre class="brush: css notranslate">#unique { }</pre> - -<h3 id="Nitelik_seçiciler">Nitelik seçiciler</h3> - -<p>Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:</p> - -<pre class="brush: css notranslate">a[title] { }</pre> - -<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:</p> - -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> - -<h3 id="Sözde_sınıflar_ve_sözde_elemanlar">Sözde sınıflar ve sözde elemanlar</h3> - -<p>Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin <code>:hover</code> sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:</p> - -<pre class="brush: css notranslate">a:hover { }</pre> - -<p>Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin <code>::first-line</code> her zaman bir elemanın içindeki ilk metin satırını seçer (<code><p></code> şağıdaki durumda, sanki ilk satırın etrafı <code><span></code> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.</p> - -<pre class="brush: css notranslate">p::first-line { }</pre> - -<h3 id="Birleştiriciler">Birleştiriciler</h3> - -<p>Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <code><article></code> eleman etiketi (<code>></code>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:</p> - -<pre class="brush: css notranslate">article > p { }</pre> - -<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> - -<p>Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> makalesine devam ederek yolculuğunuza başlayabilirsiniz.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Seçicilerin_referans_tablosu">Seçicilerin referans tablosu</h2> - -<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">CSS makaleleri</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/tr/docs/Web/CSS/Type_selectors">Tür seçici</a></td> - <td><code>h1 { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> - <td><code>* { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Class_selectors">Sınıf seçici</a></td> - <td><code>.box { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf seçici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> - <td><code>#unique { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçici</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Pseudo-elements">Sözde elelman seçici</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde eleman</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Descendant_combinator">Torun birleştiricisi</a></td> - <td><code>article p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Child_combinator">Çocuk birleştiricisi</a></td> - <td><code>article > p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştiricisi</a></td> - <td><code>h1 + p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> - </tr> - <tr> - <td><a href="/tr/docs/Web/CSS/General_sibling_combinator">Genel kardeş birleştiricisi</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> - </tr> - </tbody> -</table> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> -</ol> diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html deleted file mode 100644 index 2b26ff1cd5..0000000000 --- a/files/tr/web/css/display/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: display -slug: Web/CSS/display -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/display ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p><strong><code>display</code> </strong>özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan <code>display</code> değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan <code>display</code> değeri <code>inline</code>'dır.</p> - -<p>Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, <code>none </code>değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sözdizimi_kuralları">Sözdizimi kuralları</h2> - -<pre class="brush:css">display: none; -display: inline; -display: block; -display: inline-block; -display: contents; -display: list-item; -display: inline-list-item; -display: table; -display: inline-table; -display: table-cell; -display: table-column; -display: table-column-group; -display: table-footer-group; -display: table-header-group; -display: table-row; -display: table-row-group; -display: table-caption; -display: flex; -display: inline-flex; -display: grid; -display: inline-grid; -display: ruby; -display: ruby-base; -display: ruby-text; -display: ruby-base-container; -display: ruby-text-container; -display: run-in; - -/* Global values */ -display: inherit; -display: initial; -display: unset; -</pre> - -<h3 id="Değerler">Değerler</h3> - -<p><em><strong>display-value </strong></em>bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.</p> - -<dl> - <dd> - <table class="standard-table"> - <thead> - <tr> - <td class="header" colspan="1">Değer kümesi</td> - <td class="header">Değer</td> - <td class="header">Tanım</td> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="4">Basic values (CSS 1)</td> - <td><code>none</code></td> - <td> - <p>Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.</p> - - <p>Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.</p> - </td> - </tr> - <tr> - <td><code>inline</code></td> - <td>bir veya daha fazla satıriçi kutusu oluşturur.</td> - </tr> - <tr> - <td><code>block</code></td> - <td>blok element kutusu oluşturur.</td> - </tr> - <tr> - <td><code>list-item</code></td> - <td>Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.</td> - </tr> - <tr> - <td>Gelişletilmiş değerler (CSS 2.1)</td> - <td><code>inline-block</code></td> - <td>inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.</td> - </tr> - <tr> - <td colspan="1" rowspan="10">Table model değerler (CSS 2.1)</td> - <td><code>inline-table</code></td> - <td><code>inline-table </code>değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir. {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.</td> - </tr> - <tr> - <td><code>table</code></td> - <td>Bu elementler block {{HTMLElement("table")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-caption</code></td> - <td>Bu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.</td> - </tr> - <tr> - <td><code>table-cell</code></td> - <td>Bu elementler {{HTMLElement("td")}} gibi davranır..</td> - </tr> - <tr> - <td><code>table-column</code></td> - <td>Bu elementler {{HTMLElement("col")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-column-group</code></td> - <td>Bu elementler {{HTMLElement("colgroup")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-footer-group</code></td> - <td>Bu elementler {{HTMLElement("tfoot")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-header-group</code></td> - <td>Bu elementler {{HTMLElement("thead")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-row</code></td> - <td>Bu elementler {{HTMLElement("tr")}} gibi davranır.</td> - </tr> - <tr> - <td><code>table-row-group</code></td> - <td>Bu elementler {{HTMLElement("tbody")}} gibi davranır.</td> - </tr> - <tr> - <td colspan="1">CSS3 liste değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> - <td><a href="https://drafts.csswg.org/css-lists/#valdef-display-inline-list-item">inline-list-item</a></td> - <td>The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.</td> - </tr> - <tr> - <td colspan="1" rowspan="2">Flexbox model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> - <td><code>flex</code></td> - <td>Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.</td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td>Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.</td> - </tr> - <tr> - <td colspan="1" rowspan="2">Grid box model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td> - <td><code>grid</code></td> - <td> - <p>Element, block elementi gibi davranır ve<br> - grid modeline uygun olarak görünür.</p> - - <div class="note">Deneyimlenebileceği üzere, <a href="/en-US/docs/CSS/display#Browser_Compatibility" title="https://developer.mozilla.org/en/CSS/display#Browser_Compatibility">çoğu tarayıcı henüz desteklememektedir</a>. Özellikle <code>-moz-grid</code> 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10" title="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10">XUL layout model</a> 'de belirtilen ve kullanmamanız gereken bir prefix'tir.</div> - </td> - </tr> - <tr> - <td><code>inline-grid</code></td> - <td>Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.</td> - </tr> - <tr> - <td colspan="1" rowspan="5">Ruby formatting model values (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td> - <td><code>ruby</code></td> - <td>Element inline element gibi davranır ve<br> - içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.</td> - </tr> - <tr> - <td><code>ruby-base</code></td> - <td>Bu elementler {{HTMLElement("rb")}} gibi davranır.</td> - </tr> - <tr> - <td><code>ruby-text</code></td> - <td>Bu elementler {{HTMLElement("rt")}} gibi davranır</td> - </tr> - <tr> - <td><code>ruby-base-container</code></td> - <td>These elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.</td> - </tr> - <tr> - <td><code>ruby-text-container</code></td> - <td>These elements behave like {{HTMLElement("rtc")}} elements.</td> - </tr> - <tr> - <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td> - <td><code>run-in</code></td> - <td> - <ul> - <li>If the run-in box contains a block box, same as block.</li> - <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li> - <li>If an inline box follows, the run-in box becomes a block box.</li> - </ul> - </td> - </tr> - <tr> - <td><code>contents</code></td> - <td>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<p><a href="/samples/cssref/display.html">View Live Examples</a></p> - -<pre class="brush: css">p.secret { display: none } -<p style="display:none"> invisible text </p> -</pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td>Added the inline-list-item values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td> - <td>{{Spec2('CSS3 Display')}}</td> - <td>Added the <code>run-in</code> and <code>contents</code> values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td> - <td>{{Spec2('CSS3 Ruby')}}</td> - <td>Added the <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container </code></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td> - <td>{{Spec2('CSS3 Grid')}}</td> - <td>Added the grid box model values.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Added the flexible box model values.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Added the table model values and <code>inline-block<em>.</em></code></td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#display', 'display')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td><code>none</code>, <code>inline</code> and <code>block</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>inline-block</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>5.5 [4]</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>list-item</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>6.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td>inline-list-item</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}} [6]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td> - <td>1.0 [5]</td> - <td rowspan="2">{{CompatNo}}</td> - <td rowspan="2">8.0</td> - <td rowspan="2">7.0</td> - <td>1.0 (85) [5]</td> - </tr> - <tr> - <td> - <p>4.0</p> - - <p>Removed in 32</p> - </td> - <td> - <p>5.0 (532.5)</p> - - <p>Removed in 8.0</p> - </td> - </tr> - <tr> - <td><code>inline-table</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9")}}</td> - <td>8.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>8.0</td> - <td>7.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>flex</code></td> - <td>21.0{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("18.0")}} [1]<br> - {{CompatGeckoDesktop("20.0")}}</td> - <td>11</td> - <td>12.50</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td><code>inline-flex</code></td> - <td>21.0{{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("18.0")}} [1]<br> - {{CompatGeckoDesktop("20.0")}}</td> - <td>11</td> - <td>12.50</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td><code>grid</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>10.0{{property_prefix("-ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>inline-grid</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>10.0{{property_prefix("-ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{experimental_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("34.0")}} [3]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>contents</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("37")}} [2]</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>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>7.0{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>. Multi-line flexbox are supported since Firefox 28.</p> - -<p>[2] In Firefox 36, it the preference governing this feature was off by default.</p> - -<p>[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.</p> - -<p>[4] Natural inline elements only</p> - -<p>[5] Not before inline-elements</p> - -<p>[6] See {{bug(1105868)}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li> - <li>{{Cssxref("flex")}}</li> -</ul> diff --git a/files/tr/web/css/font-size/index.html b/files/tr/web/css/font-size/index.html deleted file mode 100644 index 89ce88d475..0000000000 --- a/files/tr/web/css/font-size/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - CSS Fontlar - - CSS özelliği - - Referans -translation_of: Web/CSS/font-size ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>font-size</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>'in bir özelliği olup yazı boyutunu ayarlar.</span> This property is also used to compute the size of <code>em</code>, <code>ex</code>, and other relative {{cssxref("<length>")}} units.</p> - -<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <absolute-size> values */ -font-size: xx-small; -font-size: x-small; -font-size: small; -font-size: medium; -font-size: large; -font-size: x-large; -font-size: xx-large; -font-size: xxx-large; - -/* <relative-size> values */ -font-size: smaller; -font-size: larger; - -/* <length> values */ -font-size: 12px; -font-size: 0.8em; - -/* <percentage> values */ -font-size: 80%; - -/* Global values */ -font-size: inherit; -font-size: initial; -font-size: unset; -</pre> - -<p>The <code>font-size</code> property is specified in one of the following ways:</p> - -<ul> - <li>As one of the <a href="#absolute-size">absolute-size</a> or <a href="#relative-size">relative-size</a> keywords</li> - <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> -</ul> - -<h3 id="Değerler">Değerler</h3> - -<dl> - <dt id="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, <code>xxx-large</code></dt> - <dd>Absolute-size keywords, based on the user's default font size (which is <code>medium</code>).</dd> - <dt id="relative-size"><code>larger</code>, <code>smaller</code></dt> - <dd>Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.</dd> - <dt id="<length>">{{cssxref("<length>")}}</dt> - <dd> - <p>A positive {{cssxref("<length>")}} value. For most font-relative units (such as <code>em</code> and <code>ex</code>), the font size is relative to the parent element's font size.</p> - - <p>For font-relative units that are root-based (such as <code>rem</code>), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.</p> - </dd> - <dt id="<percentage>">{{cssxref("<percentage>")}}</dt> - <dd> - <p>A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.</p> - </dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> To maximize accessibility, it is generally best to use values that are relative to the user's default font size.</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Açıklama">Açıklama</h2> - -<p>There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p> - -<h3 id="Anahtar_Kelimeler">Anahtar Kelimeler</h3> - -<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p> - -<h3 id="Pixels">Pixels</h3> - -<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p> - -<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p> - -<div class="note"><strong>Note:</strong> Defining font sizes in <code>px</code> is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.</div> - -<h3 id="Ems">Ems</h3> - -<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an <code>em</code> is equal to the font size of the element on which the <code>em</code> is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p> - -<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p> - -<pre class="brush: plain notranslate">em = desired element pixel value / parent element font-size in pixels</pre> - -<p>For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p> - -<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p> - -<p>One important fact to keep in mind: em values compound. Take the following HTML and CSS:</p> - -<pre class="brush: css notranslate">html { - font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ -} -span { - font-size: 1.6em; -}</pre> - -<pre class="brush: html notranslate"><div> -<span>Outer <span>inner</span> outer</span> -</div> -</pre> - -<p>The result is:</p> - -<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> - -<p>Assuming that the browser's default <code>font-size</code> is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s <code>font-size</code> is 1.6em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p> - -<h3 id="Rems">Rems</h3> - -<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p> - -<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p> - -<pre class="brush: css notranslate">html { - font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ -} -span { - font-size: 1.6rem; -} -</pre> - -<p>Then we apply this CSS to the same HTML, which looks like this:</p> - -<pre class="brush: html notranslate"><span>Outer <span>inner</span> outer</span></pre> - -<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> - -<p>In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's <code>font-size</code> has been left at the default value of 10px).</p> - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Örnek_1">Örnek 1</h3> - -<pre class="brush: css notranslate">/* Paragraf boyutunu çok büyük yapar */ -p { font-size: xx-large; } - -/* <h1> etiketininin boyutunu kendisini kaplayan - etikete göre 2.5 kat daha büyük yapar */ -h1 { font-size: 250%; } - -/* span etiketiyle çevrelenmiş yazının boyutu 16px yapar */ -span { font-size: 16px; } -</pre> - -<h3 id="Örnek_2">Örnek 2</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.small { - font-size: xx-small; -} -.larger { - font-size: larger; -} -.point { - font-size: 24pt; -} -.percent { - font-size: 200%; -} -</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h1 class="small">Small H1</h1> -<h1 class="larger">Larger H1</h1> -<h1 class="point">24 point H1</h1> -<h1 class="percent">200% H1</h1></pre> - -<h4 id="Sonuç">Sonuç</h4> - -<p>{{EmbedLiveSample('Example_2','600','200')}}</p> - -<h2 id="Notlar">Notlar</h2> - -<p><code>em</code> and <code>ex</code> units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{cssxref("font-size")}}.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>Adds <code>xxx-large</code> keyword.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<p>{{Compat("css.properties.font-size")}}</p> diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html deleted file mode 100644 index f1cd50e15c..0000000000 --- a/files/tr/web/css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)' -slug: Web/CSS -tags: - - CSS - - CSS3 - - HTML - - Referans - - Stil - - Stil Sayfası - - Tasarım - - Yerleşim -translation_of: Web/CSS ---- -<p>{{CSSRef}}</p> - -<p><span class="seoSummary">Bir <a href="/tr/docs/DOM/stylesheet">stylesheet</a> (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan <strong>Cascading Style Sheets</strong>, <a href="/tr/docs/HTML" title="The HyperText Mark-up Language">HTML</a> ya da <a href="https://developer.mozilla.org/tr/docs/XML">XML</a> ile yazılmış (<a href="https://developer.mozilla.org/tr/docs/Web/SVG">SVG </a>ya da <a href="https://developer.mozilla.org/tr/docs/Glossary/XHTML">XHTML</a> gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS, yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. </span></p> - -<p><strong>CSS</strong>, <em>open web'</em>in temel dillerinden biridir ve <a href="http://w3.org/Style/CSS/#specs">W3C standartlarına</a> sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.</p> - -<p>CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, <a href="https://www.w3.org/Style/CSS/current-work">önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak</a> daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak <a href="https://www.w3.org/TR/css/">CSS spesifikasyonunun en son kararlı sürümünün</a> anlık görüntüsünü alıyor..</p> - -<section id="sect1"> -<ul class="card-grid"> - <li><span>CSS Referansı</span> - - <p>Deneyimli Web Geliştiricileri için CSS'in her özellik ve konseptini tanımlayan kapsamlı bir <a href="/tr/docs/Web/CSS/Reference">referans</a>.</p> - </li> - <li><span>CSS Dersi</span> - <p>Tüm yeni başlayanlara yardım için bir <a href="/tr/docs/Web/Guide/CSS/Getting_started" title="tr/docs/CSS/Getting_Started">adım adım giriş </a>kısmı. Bu kısım, ihtiyaç duyulabilecek tüm temel bilgileri içerir.</p> - </li> - <li><span>CSS3 Örnekleri</span> - <p>CSS teknolojilerini bir aksiyon içinde gösteren bir <a href="/tr/demos/tag/tech:css3" title="https://developer.mozilla.org/tr/demos/tag/tech:css3">demo kolleksiyonu</a> ki yaratıcılık için destekleyicidir.</p> - </li> -</ul> - -<div class="callout"> -<h3 id="Bir_front-endArayüz_geliştiricisimi_olmak_istiyorsunuz">Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?</h3> - -<p>Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Buradan Başlayın</a></p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Eğitim_Aşamaları">Eğitim Aşamaları</h2> - -<p>Bu <a href="/tr/docs/Learn/CSS">CSS Eğitimi</a> CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'ye ilk adım</a></dt> - <dd>CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.</dd> - <dd>Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir. </dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşları</a></dt> - <dd> - <p class="summary">Bu adım <a href="/tr/docs/Learn/CSS/First_steps">ilk adımın</a> kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.</p> - - <p class="summary">Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.</p> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_text">Metin stilini belirleme</a></dt> - <dd>CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.</dd> - <dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt> - <dd>Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek için CSS kullanın</a></dt> - <dd>Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Tools" id="Kaynaklar">Kaynaklar</h2> - -<ul> - <li><a href="/tr/docs/Web/CSS/Reference">CSS kaynağı</a>: Deneyimli Web geliştiricileri için, CSS'sin her özelliğini ve konseptini açıklayan kapsamlı bir kaynak.</li> - <li>CSS temel kavramları: - <ul> - <li><a href="/tr/docs/Web/CSS/Syntax">Dilin sözdizimi ve biçimleri</a></li> - <li><a href="/tr/docs/Web/CSS/Specificity">Özgüllük</a>, <a href="/tr/docs/Web/CSS/Inheritance">kalıtım</a> ve <a href="/tr/docs/Web/CSS/Cascade">Cascade</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS birim ve değerleri</a></li> - <li><a href="/tr/docs/Web/CSS/box_model">Kutu modelelri</a> ve <a href="/tr/docs/Web/CSS/margin_collapsing">Kenar boşluğu</a></li> - <li>The <a href="/tr/docs/Web/CSS/All_About_The_Containing_Block">containing blok kapsamları</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Yığınlar</a> ve <a href="/tr/docs/Web/CSS/block_formatting_context" title="block formatting context">blok biçimlendirme</a> bağlamları</li> - <li><a href="/tr/docs/Web/CSS/initial_value">İlklendirilen</a>, <a href="/tr/docs/Web/CSS/computed_value">hesaplanan</a>, <a href="/tr/docs/Web/CSS/used_value">kullanılan</a>, ve <a href="/tr/docs/Web/CSS/actual_value">gerçek</a> değeler</li> - <li><a href="/tr/docs/Web/CSS/Shorthand_properties">CSS kısaltma özellikleri</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box özellikleri</a></li> - <li><a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid özellikleri</a></li> - <li><a href="/tr/docs/Web/CSS/Media_Queries">Medya sorguları</a></li> - <li><a href="/tr/docs/Web/CSS/animation">Animasyon</a></li> - </ul> - </li> -</ul> - -<h2 class="Tools" id="Tarifler_kitabı">Tarifler kitabı</h2> - -<p><a href="/tr/docs/Web/CSS/Layout_cookbook">CSS düzen tarifleri kitabı</a> sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.</p> - -<h2 class="Tools" id="CSS_geliştirme_araçları">CSS geliştirme araçları</h2> - -<ul> - <li>CSS'sinizin gerçeli olup olmadığını kontrol etmek için <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a>'si kullanabilirsiniz. Bu, paha biçilemez bir hata ayıklama aracıdır.</li> - <li><a href="/tr/docs/Tools">Firefox Developer Tools</a>, <a href="/tr/docs/Tools/Page_Inspector">Denetçi</a> ve <a href="/tr/docs/Tools/Style_Editor">Stil Düzenleyici</a> araçlarıyla bir sayfanın canlı CSS'sini görüntülemenizi ve düzenlemenizi sağlar.</li> - <li>Firefox için <a class="link-https" href="https://addons.mozilla.org/tr/firefox/addon/web-developer/">Web Developer uzantısı</a>, izlenen sitelerde canlı CSS'si izlemenizi ve düzenlemenizi sağlar</li> - <li>Web topluluğu, kullanmanız için başka çeşitli <a href="/tr/docs/Web/CSS/Tools">CSS araçlarını</a>'da oluşturdu.</li> -</ul> - -<h2 id="Meta_bugs">Meta bugs</h2> - -<ul> - <li>Firefox: {{bug(1323667)}}</li> -</ul> -</div> -</div> -</section> - -<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> - -<ul> - <li><a href="/tr/docs/Web/Demos_of_open_web_technologies#CSS">CSS demoları</a>: En yeni CSS teknolojileri ile oluşturulmuş örnekleri keşfederek kendinize destek elde edin</li> - <li>CSS'nin sıklıkla uygulandığı web dilleri: <a href="/tr/docs/Web/HTML">HTML</a>, <a href="/tr/docs/Web/SVG">SVG</a>, <a href="/tr/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}}, and <a href="/tr/docs/XML_introduction">XML</a>.</li> - <li>CSS'den kapsamlı bir şekilde yararlanan Mozilla teknolojileri: <a href="/tr/docs/Mozilla/Firefox">Firefox</a>, ve <a href="/tr/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/tr/docs/Mozilla/Add-ons">euzantıları</a> ve <a href="/tr/docs/Mozilla/Add-ons/Themes">temaları</a>.</li> - <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla e-posta listesi</a></li> - <li><a href="https://stackoverflow.com/questions/tagged/css">CSS hakkındaki Stack Overflow soruları</a></li> -</ul> diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html deleted file mode 100644 index e226907d8a..0000000000 --- a/files/tr/web/css/margin/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: marjin -slug: Web/CSS/margin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new -original_slug: Web/CSS/marjin ---- -<div>{{CSSRef}}</div> - -<h2 id="Özet">Özet</h2> - -<p> </p> - -<p><strong><code>Marjin</code></strong> CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.</p> - -<p>Eksi değerlere müsade edilir.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sözdizimi">Sözdizimi</h2> - -<pre class="brush:css">/* Her dört kenara uygulanır */ -margin: 1em; - -/* dikey | yatay */ -margin: 5% auto; - -/* üst | yatay | alt */ -margin: 1em auto 2em; - -/* üst | sağ | alt | sol */ -margin: 2px 1em 0 auto; - -/* Genel değerler */ -margin: inherit; -margin: initial; -margin: unset; -</pre> - -<h3 id="Değer_Atamaları">Değer Atamaları</h3> - -<p>Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:</p> - -<dl> - <dt><code><length></code></dt> - <dd>Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .</dd> - <dt><code><percentage></code></dt> - <dd>{{cssxref("<percentage>")}} içinde bulunduğu bloğun <strong>width</strong> özelliğine orantılıdır. Eksi değerlere müsade edilir.</dd> - <dt><code>auto</code></dt> - <dd><code>auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.</code><br> - <code>div { width:50%; margin:0 auto; }</code> div bloğunu yatay olarak merkeze konumlandırır.</dd> -</dl> - -<ul> - <li><strong>Tek</strong> bir değer <strong>tüm dört kenara uygulanır</strong>.</li> - <li><strong>İki</strong> değerin ilki <strong>üst ve alt kenara</strong> ikincisi <strong>sağ ve sol kenara uygulanır</strong>.</li> - <li><strong>Üç </strong> değerin ilki <strong>üst </strong>kenara ikincisi <strong>sağ</strong> ve <strong>sol</strong> kenara üçüncüsü <strong>alt</strong> kenara uygulanır.</li> - <li><strong>Dört değer</strong> <strong>üst, sağ, alt </strong>ve<strong> sol kenarlara</strong> sırasıyla (saat yönünde) uygulanır.</li> -</ul> - -<h3 id="Formel_sözdizimi">Formel sözdizimi</h3> - -{{csssyntax}} - -<h2 id="Örnekler">Örnekler</h2> - -<h3 id="Basit_bir_örnek">Basit bir örnek</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="ex1"> - margin: auto; - background: gold; - width: 66%; -</div> -<div class="ex2"> - margin: 20px 0 0 -20px; - background: gold; - width: 66%; -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight:[2,7]">.ex1 { - margin: auto; - background: gold; - width: 66%; -} -.ex2 { - margin: 20px 0px 0 -20px; - background: gold; - width: 66%; -}</pre> - -<p>{{ EmbedLiveSample('Simple_example') }}</p> - -<h3 id="başka_bir_örnek_daha">başka bir örnek daha</h3> - -<pre class="brush: css">margin: 5%; /* tüm kenarlar 5% marjinli */ - -margin: 10px; /* tüm kenarlar 10px marjinli */ - -margin: 1.6em 20px; /* üst ve alt 1.6em, sağ ve sol 20px marjinli */ - -margin: 10px 3% 1em; /* üst 10px, sağ ve sol 3%, alt 1em marjinli */ - -margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */ - -margin: 1em auto; /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */ - -margin: auto; /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */ -</pre> - -<h2 id="Yatay_olarak_merkeze_konumlama_margin_0_auto">Yatay olarak merkeze konumlama <code>margin: 0 auto;</code></h2> - -<p>Modern tarayıcılarda yatay merkez konumlandırma için <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> kullanınız.</p> - -<p>Bununla birlikte, eski tarayıcılarda IE8-9 gibi, bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente marg<code>in: 0 auto; kullanınız.</code></p> - -<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> - <td>{{ Spec2('CSS3 Box') }}</td> - <td>Belirgin değişiklik yok</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> - <td>{{ Spec2('CSS3 Transitions') }}</td> - <td>"margin" transitions ta animasyon özellikiği kullanılabilir</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>Inline elementeki efekleri kaldırıldı</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>başlangic değeri atandı</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("1") }}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>auto</code> value</td> - <td>1.0</td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("1") }}</td> - <td>6.0 (strict mode)</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("1") }}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> - -<ul> - <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Marjin çakışması</a></li> -</ul> diff --git a/files/tr/web/css/reference/index.html b/files/tr/web/css/reference/index.html deleted file mode 100644 index 4d415d65a6..0000000000 --- a/files/tr/web/css/reference/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Referansı -slug: Web/CSS/Reference -tags: - - CSS - - CSS Referans -translation_of: Web/CSS/Reference ---- -<p><span class="seoSummary">Bu<em> CSS Referansı, </em>bütün standart <a href="/tr/docs/Web/CSS">CSS</a> özelliklerini, pseudo sınıflarını, pseudo elementlerini, @-kurallarını, birimleri* ve seçicileri alfabetik olarak sıralar. Bunların her biri için hızlı ve detaylı bilgiye ulaşabilirsiniz. Sadece CSS1 ve CSS2 özellikleri değil, aynı zamanda konsept standartlı veya stabil her <a href="/tr/docs/Web/CSS/CSS3">CSS3</a> ile bağlantılı özellik için de bir referans niteliğindedir.</span></p> - -<p>Ayrıca <code>-moz</code><a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions"> </a>prefix'i aracılığıyla Gecko-spesifik olarak tanımlanan<a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions"> Mozilla CSS Eklentileri</a> sayfasını ziyaret edebilir veya dilerseniz Webkit-spesifik olarak tanımlanan <a href="/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Eklentileri</a> sayfasını ziyaret edebilirsiniz. Tüm prefixed özellikleri incelemek için <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> ismi ile Peter Beverloo tarafından hazırlanan sayfayı ziyaret edebilirsiniz.</p> - -<div>{{CSS_Ref}}</div> - -<h2 id="Seçiciler">Seçiciler</h2> - -<ul> - <li>Temel Seçiciler - <ul> - <li><a href="/en-US/docs/Web/CSS/Type_selectors">Tip seçicileri</a> <code>elementname</code></li> - <li><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf seçicileri</a> <code>.classname</code></li> - <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID seçiciler</a> <code>#idname</code></li> - <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçiciler</a><code> * ns|* *|*</code></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Özellik seçicileri</a><code> [attr=value]</code></li> - </ul> - </li> - <li>Combinators - <ul> - <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Bitişik kardeş(komşu) seçiciler</a> <code>A + B</code></li> - <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Ardışık kardeş(komşu) seçiciler</a> <code>A ~ B</code></li> - <li><a href="/en-US/docs/Web/CSS/Child_selectors">Bir alt seviye seçiciler</a> <code>A > B</code></li> - <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Sıra bağımsız seçiciler</a> <code>A B</code></li> - </ul> - </li> - <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementleri</a></li> - <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-sınıfları</a></li> -</ul> - -<p>CSS3 özelleştirmeleri için <a href="http://www.w3.org/TR/selectors/#selectors">tüm seçicilerin listesi</a>.</p> - -<h2 id="CSS3_Kullanımı">CSS3 Kullanımı</h2> - -<p>Küçük boyutlu sayfalar oluşturmak için yeni bir teknoloji ortaya çıktı CSS3, ancak yakın zamana kadar düşük destekli olan CCS2.1 kullanılıyordu.</p> - -<ul> - <li><a href="/tr/docs/">CSS Medya sorgularını kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Counters">CSS Sayaçları kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients">CSS gradyanların kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS Dönüşümleri kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS Animasyonları kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Geçişleri kullanma</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds">CSS Çoklu Arkaplan kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">CSS Esnek-kutu kullanımı</a></li> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">CSS Çok sütunlu düzenlerde kullanma</a></li> -</ul> - -<h2 id="Kavramlar">Kavramlar</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> - <li><a href="/en-US/docs/Web/CSS/At-rule">At-rule</a></li> - <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> - <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> - <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> - <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> - <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> - <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> - <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> - <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> - <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> - <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced element</a></li> - <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> -</ul> diff --git a/files/tr/web/css/right/index.html b/files/tr/web/css/right/index.html deleted file mode 100644 index 3c5c003132..0000000000 --- a/files/tr/web/css/right/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: right -slug: Web/CSS/right -translation_of: Web/CSS/right ---- -<div>{{CSSRef}}</div> - -<h2 id="Summary" name="Summary">Özet</h2> - -<p>Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.</p> - -<p>{{Cssxref("position")}}<code>:</code> <code>absolute</code> or <code>position:</code> <code>fixed</code> olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.</p> - -<p><code>right</code> değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.</p> - -<p>Hem <code>right</code> hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise <code>right</code> değeri geçerli kabul edilir. Soldan sağa yerleşimlerde <code>right</code> değeri <code>-left</code>, sağdan sola yerleşimlerde <code>left</code> değeri -<code>right</code> olarak tekrar hesaplanır.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Yazım</h2> - -<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("right")}} -</pre> - -<pre>right: 3px /* <uzunluk> değeri */ -right: 2.4em - -right: 10% /* barındıran bloğun yüzdesi olarak */ - -right: auto - -right: inherit -</pre> - -<h3 id="Values" name="Values">Değerler</h3> - -<dl> - <dt><code><uzunluk></code></dt> - <dd>Negatif, null veya pozitif {{cssxref("<length>")}} değerdir. - <ul> - <li>Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;</li> - <li>Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.</li> - </ul> - </dd> - <dt><code><yüzde></code></dt> - <dd>Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. </dd> - <dt><code>auto</code></dt> - <dd>Is a keyword that represents: - <ul> - <li>for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat <code>width: auto</code> as a width based on the content.</li> - <li>for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if <code>left</code> is also <code>auto</code>, do not offset it at all.</li> - </ul> - </dd> - <dt><code>inherit</code></dt> - <dd>Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("<length>")}}, {{cssxref("<percentage>")}} or the <code>auto</code> keyword.</dd> -</dl> - -<h2 id="Examples" name="Examples">Examples</h2> - - -<pre class="brush: css; highlight:[16]">#example_3 { - width: 600px; - height: 400px; - background-color: #FFC7E4; - position: relative; - top: 20px; - left: 20px; -} - -#example_4 { - width:200px; - height:200px; - background-color: #FFD7C2; - position:absolute; - bottom:10px; - right: 20px; -}</pre> - -<pre class="brush: html"> <div id="example_3">Example 3</div> - <div id="example_4">Example 4</div> -</pre> - -<p>{{LiveSampleLink('Examples', 'Example Demo Link')}}</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Defines <code>right</code> as animatable.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>5.5</td> - <td>5.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/tr/web/css/shape-outside/index.html b/files/tr/web/css/shape-outside/index.html deleted file mode 100644 index 4a05560e8a..0000000000 --- a/files/tr/web/css/shape-outside/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: shape-outside -slug: Web/CSS/shape-outside -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Property - - Reference - - Shape - - margin - - 'recipe:css-property' - - shape-outside - - wrapping -translation_of: Web/CSS/shape-outside ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">The <strong><code>shape-outside</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.</span> By default, inline content wraps around its margin box; <code>shape-outside</code> provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.</p> - -<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div> - - - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ -shape-outside: none; -shape-outside: margin-box; -shape-outside: content-box; -shape-outside: border-box; -shape-outside: padding-box; - -/* Function values */ -shape-outside: circle(); -shape-outside: ellipse(); -shape-outside: inset(10px 10px 10px 10px); -shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); -shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); - -/* <url> value */ -shape-outside: url(image.png); - -/* <gradient> value */ -shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); - -/* Global values */ -shape-outside: initial; -shape-outside: inherit; -shape-outside: unset; -</pre> - -<p>The <code>shape-outside</code> property is specified using the values from the list below, which define the <em>float area</em> for <em>float elements</em>. The float area determines the shape around which inline content (float elements) wrap.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>none</code></dt> - <dd>The float area is unaffected. Inline content wraps around the element's margin box, like usual.</dd> - <dt><code><shape-box></code></dt> - <dd>The float area is computed according to the shape of a float element's edges (as defined by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">CSS box model</a>). This can be <code>margin-box</code>, <code>border-box</code>, <code>padding-box</code>, or <code>content-box</code>. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).</dd> - <dd> - <dl> - <dt><code>margin-box</code></dt> - <dd><span style="line-height: 1.5;">Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the <code>border-radius / margin</code> </span>ratio is <code>1</code> or more, then the margin box corner radius is <code>border-radius + margin</code>. If the ratio is less than <code>1</code>, then the margin box corner radius is <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> - <dt><code>border-box</code></dt> - <dd> - <p>Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.</p> - </dd> - <dt><code>padding-box</code></dt> - <dd> - <p>Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.</p> - </dd> - <dt><code>content-box</code></dt> - <dd> - <p>Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of <code>0</code> or <code>border-radius - border-width - padding</code>.</p> - </dd> - </dl> - </dd> - <dt>{{cssxref("<basic-shape>")}}</dt> - <dd>The float area is computed based on the shape created by of one of <code><a href="/en-US/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>, or as added in the level 2 specification <code>path()</code>. If a <code><shape-box></code> is also supplied, it defines the reference box for the <code><basic-shape></code> function. Otherwise, the reference box defaults to <code>margin-box</code>.</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}.</dd> - <dd> - <div class="note"><strong>Note:</strong> {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a <code>shape-outside</code> value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value <code><strong>none</strong></code> had been specified.</div> - </dd> -</dl> - -<h2 id="Interpolation">Interpolation</h2> - -<p>When animating between one <code><basic-shape></code> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding <code>nonzero</code> in the same list position in both lists), those values do interpolate.</p> - -<ul> - <li>Both shapes must use the same reference box.</li> - <li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li> - <li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li> - <li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code><fill-rule></code>, interpolate between each value in the shape functions.</li> - <li>In all other cases no interpolation occurs.</li> -</ul> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Funneling_text">Funneling text</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="main"> - <div class="left"></div> - <div class="right"></div> - <p> - Sometimes a web page's text content appears to be - funneling your attention towards a spot on the page - to drive you to follow a particular link. Sometimes - you don't notice. - </p> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight[13,14,21,22] notranslate">.main { - width: 530px; -} - -.left, -.right { - width: 40%; - height: 12ex; - background-color: lightgray; -} - -.left { - -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); - shape-outside: polygon(0 0, 100% 100%, 0 100%); - float: left; - -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); - clip-path: polygon(0 0, 100% 100%, 0 100%); -} - -.right { - -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); - shape-outside: polygon(100% 0, 100% 100%, 0 100%); - float: right; - -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); - clip-path: polygon(100% 0, 100% 100%, 0 100%); -} - -p { - text-align: center; -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample("Funneling_text", "100%", 130)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}</td> - <td>{{Spec2('CSS Shapes 2')}}</td> - <td>Adds the <code>path()</code> value</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.properties.shape-outside")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li> - <li>{{cssxref("<basic-shape>")}}</li> - <li>{{cssxref("shape-margin")}}</li> - <li>{{cssxref("shape-image-threshold")}}</li> -</ul> diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html deleted file mode 100644 index 8c375757ba..0000000000 --- a/files/tr/web/css/type_selectors/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Type_selectors -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors -original_slug: Web/CSS/Tip_secicileri ---- -<div>{{CSSRef("Selectors")}}</div> - -<h2 id="Tanım">Tanım</h2> - -<p><em>Tip (type)</em> seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden<em> HTML tags </em>diye de bahsedilebilir. Örneğin, HTML'de <code><em><h1>, <a>, <p> </em></code>tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.</p> - -<h2 id="Sözdizim">Sözdizim</h2> - -<pre class="syntaxbox">element { <em>stil özellikleri</em> } -</pre> - -<h2 id="Örnek" name="Örnek">Örnek</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">span </span><span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> DodgerBlue<span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><span>span elementi</span> -<p>p (paragraf) elementi</p> -<span>tekrar span elementi</span></pre> - -<p>{{ EmbedLiveSample('Örnek', 200, 150) }}</p> - -<p> </p> - -<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spesifikasyon</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Değişiklik yok</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Değişiklik yok</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Baştaki tanım</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Özellik</th> - <th>Android</th> - <th>Android için Chrome</th> - <th>Firefox Mobil (Gecko)</th> - <th>IE Mobil</th> - <th>Opera Mobil</th> - <th>Safari Mobil</th> - </tr> - <tr> - <td>Temel destek</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> |