MandoRadio: CSS

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUC7y4t3ZNAVYAfe-vmpROIC0nQZK9H1p9NWNX9bXKUoUC__nk0UURVUeLRE6xo-djlB6c5RK0L6wzIica5Eki4wcIxwJsk8T0pE_j5ReVOTQq4imiJHz_N8FiGl6Jy5GtauLdWvYKiU18aL_lDzhURiDIYtQemurqfRuFtwY1YGSg3FlGa0wtnXD9-Fo/s940/shorthand%20.jpg" style="display: block; padding: 1em 0px; text-align: center;"><img alt="Shorthand Css içinde kullanımı" border="0" data-original-height="585" data-original-width="940" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUC7y4t3ZNAVYAfe-vmpROIC0nQZK9H1p9NWNX9bXKUoUC__nk0UURVUeLRE6xo-djlB6c5RK0L6wzIica5Eki4wcIxwJsk8T0pE_j5ReVOTQq4imiJHz_N8FiGl6Jy5GtauLdWvYKiU18aL_lDzhURiDIYtQemurqfRuFtwY1YGSg3FlGa0wtnXD9-Fo/s600-rw/shorthand%20.jpg" width="100%" /></a></div>
<h1>Shorthand CSS Nedir?</h1>
<p>Shorthand CSS, stil dosyaları yazılırken CSS elementlerinin minimum kod ile oluşturulmasıdır.</p>

<h2>Longhand CSS Nedir?</h2>
<p>Longhand CSS, stil dosyaları yazılırken CSS elementlerinin uzun uzun kodlarla oluşturulmasıdır.</p>

<h2>Kısaltılmış CSS ve Uzunltılmış CSS</h2>
<p>Shorthand CSS kullanımında yük sayısı azaltılır ve tarayıcının yükleyeceği yük sayısı da azalacağı için performansa olumlu yönde katkısı olur.</p>
<p>
Evet, background-size gibi bazı özellikler shorthand (kısayol) içerisinde 
doğrudan kullanılamıyor, çünkü shorthand yapısının kendisi zaten birçok özelliği 
bir araya getiriyor. Shorthand kullanımlarında her özelliği doğru sırada ve 
biçimde eklemek gerekir. Aşağıda, CSS'de yaygın kullanılan shorthand özellikleri 
ve bunların kısa Örnekleriyle birlikte açıklamalı bir liste bulacaksınız.</p>
<h3>
1- Arka Plan Yapıcılar (Background Shorthand)</h3><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwaRkemX3eUEPJ4NI65MW_EuEqpcXQc2axcSMaM_DhZv3IXafUI2S7JsM37grlw9x3tRm9ts_MiQztseB6kuvotEUr_el6j2_ZbxsVTH-r6yA5KWrcnm6EZvn6ogu0OI6IL0q1dTmfA3YzCVvcJEiWBPB0PkjZ2YVUAbT-i0VO6dZMN5Rd8cCfy64vfE/s1807/shorthand%20-background.png" style="box-shadow: 4px -3px 6px -2.9px; clear: right; display: block; float: right; height: 215px; padding: 1em 0px; text-align: center; width: 479px;"><img alt="" border="0" data-original-height="981" data-original-width="1807" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwaRkemX3eUEPJ4NI65MW_EuEqpcXQc2axcSMaM_DhZv3IXafUI2S7JsM37grlw9x3tRm9ts_MiQztseB6kuvotEUr_el6j2_ZbxsVTH-r6yA5KWrcnm6EZvn6ogu0OI6IL0q1dTmfA3YzCVvcJEiWBPB0PkjZ2YVUAbT-i0VO6dZMN5Rd8cCfy64vfE/s600-rw/shorthand%20-background.png" /></a></div>
<p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>background-color</li>
	<li>background-image</li>
	<li>background-position</li>
	<li>background-size</li>
	<li>background-repeat</li>
	<li>background-attachment</li>
	<li>background-origin</li>
</ul>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod1')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod1">
<pre>		div { background: url("image.jpg") no-repeat center / cover, #ff0000; }</pre></div></div>
<p>
Bu Örnek, background-image, background-repeat, background-position, 
background-size, ve background-color özelliklerini bir arada kullanır. <a class="btnn green" href="https://ishadeed.com/article/css-multiple-backgrounds/" rel="external dofollow" target="_blank" title="Background Shorthand Tavsiye Makale">Thank you ishadeed.com</a></p>
<hr />
<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td rowspan="3" valign="top"><h3><br>
		2- Kenarlık Yapıcılar (Border Shorthand)</h3> Genişlik, Sitil, Renk<br>
		<p><br>
		Kullanılabilen Özellikler:</p><br>
		<ul><br>
		<li>border-width</li><br>
		<li>border-style</li><br>
		<li>border-color</li><br>
		</ul></td>
		<td bgcolor="#FFFF99"><span class="cssselectorcolor" style="color:brown">
		p <span class="cssdelimitercolor" style="color:black">{</span><span class="csspropertycolor" style="color:red"><br>  
		border<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 
		5px solid red<span class="cssdelimitercolor" style="color:black">;</span></span><br></span><span class="cssdelimitercolor" style="color:black">
		}</span> </span></td>
		<td bgcolor="#FFFF99"><p style="border: 5px solid red;">Örnek : Border<br />Gürünümü</p></td>
	</tr>
	<tr>
		<td valign="top"><span class="cssselectorcolor" style="color:brown">
p <span class="cssdelimitercolor" style="color:black">{</span><span class="csspropertycolor" style="color:red"><br> 
border-left<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 6px solid red<span class="cssdelimitercolor" style="color:black">;</span></span><br></span><span class="cssdelimitercolor" style="color:black">}</span> </span></td>
		<td valign="top"><p style="border-left:6px solid red;padding:5px 5px;">Bu şekilde: <br />Görünür</p></td>
	</tr>
	<tr>
		<td bgcolor="#FFFF99"><span class="cssselectorcolor" style="color:brown">
p <span class="cssdelimitercolor" style="color:black">{</span><span class="csspropertycolor" style="color:red"><br> 
border-bottom<span class="csspropertyvaluecolor" style="color:mediumblue"><span class="cssdelimitercolor" style="color:black">:</span> 6px solid red<span class="cssdelimitercolor" style="color:black">;</span></span><br></span><span class="cssdelimitercolor" style="color:black">}</span> </span></td>
		<td bgcolor="#FFFF99"><p style="border-bottom:6px solid red;padding:5px 5px;">Bu şekilde<br />Görünür</p></td>
	</tr>
	</table>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod2')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod2">
<pre>		div { border: 2px solid #000; }</pre></div></div>
<p>
Bu, kenarlık genişliğini (border-width), stilini (border-style), ve rengini (border-color) 
tek satırda belirtir. Bu koda ek olarak alttaki resimden uygulamalı ve açıklamalı halini görüyoruz.</p>
 
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGZ1GrhDmC9BqGdyhVb9gn5i_oGifcc-Xrwyd5YkkcYR9qFuOJHn5N61YB_J3Ffm-FHR5of_5aIAiTANtL9WcutLaO9Eq5SRvFjd1UAPd_UYVSrNLFbwHQ-45_N_quDzy8LmVi0asYn-sk-HgItsHFmNWOibmcH0D-OlVg3pxRQ13nTPPyEu4KNed45-c/s1600/shorthand-Div.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="458" data-original-width="761" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGZ1GrhDmC9BqGdyhVb9gn5i_oGifcc-Xrwyd5YkkcYR9qFuOJHn5N61YB_J3Ffm-FHR5of_5aIAiTANtL9WcutLaO9Eq5SRvFjd1UAPd_UYVSrNLFbwHQ-45_N_quDzy8LmVi0asYn-sk-HgItsHFmNWOibmcH0D-OlVg3pxRQ13nTPPyEu4KNed45-c/s1600-rw/shorthand-Div.jpg"/></a></div>  
<hr />
<h3>
3- Yazı Tipi Yapıcılar (Font Shorthand)</h3>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihR0WgiYKkPPATi1G4rCJKDnUJRgDpTE0cSl1nn0JwQkAwbW1pHugospIyqdRx_cunSqZEpYerZA_GhPw1bjKW-T8X7PDSIp2QMw1mDK2amATSQVUjzmRdOeuu5Eb29N2VR1-chDUcgpVFgfv8lqAFiC6ymho4FB7XFUOsoSfaCvDnPK9N10O2UefL7EU/s725/shorthand%20-font.jpg" style="box-shadow: 4px -3px 6px -2.9px; clear: right; display: block; float: right; padding: 1em 0px; text-align: center;"><img alt="Yazı Tipi Yapıcılar (Font Shorthand)" border="0" data-original-height="282" data-original-width="725" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihR0WgiYKkPPATi1G4rCJKDnUJRgDpTE0cSl1nn0JwQkAwbW1pHugospIyqdRx_cunSqZEpYerZA_GhPw1bjKW-T8X7PDSIp2QMw1mDK2amATSQVUjzmRdOeuu5Eb29N2VR1-chDUcgpVFgfv8lqAFiC6ymho4FB7XFUOsoSfaCvDnPK9N10O2UefL7EU/s725-rw/shorthand%20-font.jpg" width="495px" /></a></div>
<p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>font-style</li>
	<li>font-variant</li>
	<li>font-weight</li>
	<li>font-size</li>
	<li>line-height</li>
	<li>font-family</li>
</ul>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod3')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod3">
<pre>		p { font: italic small-caps bold 16px/1.5 Arial, sans-serif; }</pre></div></div>
<p>
Bu, yazı tipi stili, varyantı, kalınlığı, boyutu, satır yüksekliği ve yazı tipi 
ailesini birleştirir.</p>
<hr />
<h3>
4- Liste Stili Yapıcılar (List Style Shorthand)</h3>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top"><p><br>
		Kullanılabilen Özellikler:</p><br>
		<ul><br>
		<li>list-style-type</li><br>
		<li>list-style-position</li><br>
		<li>list-style-image</li><br>
		</ul></td>
		<td bgcolor="#FFFF99"><ul><br>
		<li>Pasta</li><br>
		<li>Böğrek</li><br>
		<li>Ayran</li><br>
		</ul></td>
		<td bgcolor="#FFFF99"><ul style="list-style-image: linear-gradient(to left bottom, red, blue);">
  <li>Pasta</li>
  <li>Böğrek</li>
  <li>Ayran</li>
</ul></td>
	</tr>
	</table>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod4')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod4">
<pre>		ul { list-style: circle inside url("bullet.png"); }</pre></div></div>
<p>
Bu, liste stili türü (list-style-type), pozisyonu (list-style-position), ve 
resmini (list-style-image) bir araya getirir.</p>
<hr />
<h3>
5- Margin/Padding Yapıcılar (Margin ve Padding Shorthand)</h3>
<p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>margin-top, margin-right, margin-bottom, 
	margin-left</li>
	<li>padding-top, padding-right, padding-bottom, 
	padding-left</li>
</ul>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod5')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod5">
<pre>		div { margin: 10px 20px 30px 40px; padding: 5px; }</pre></div></div>
<p>
margin ve padding shorthand kullanımı sırasıyla dört farklı kenara (üst, sağ, 
alt, sol) uygulanır.</p>
<hr /><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDMj5gjSftbPtUXKZr4Abgcy0NIRZLKyxcX72s3icKKu1JS9ZehXfoh7jUvJ5hFWMzEvQWM02mAdaMcPh0s6nXSuv1XCvvXh8-SGeZcHtzSZ12b_KeucwJoGtauQ7KYMhldl6_JS-Pj9ZTB1G0y1AwkWlXcuqMtGdy9CXxsH8cpi2xn7W5-ODt43NR1I/s548/flex-grow-shrink-basis.jpg" style="clear: right; display: block; float: right; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="451" data-original-width="548" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDMj5gjSftbPtUXKZr4Abgcy0NIRZLKyxcX72s3icKKu1JS9ZehXfoh7jUvJ5hFWMzEvQWM02mAdaMcPh0s6nXSuv1XCvvXh8-SGeZcHtzSZ12b_KeucwJoGtauQ7KYMhldl6_JS-Pj9ZTB1G0y1AwkWlXcuqMtGdy9CXxsH8cpi2xn7W5-ODt43NR1I/s200-rw/flex-grow-shrink-basis.jpg" title="ÖRNEK: Grow Shrink Basis" width="200" /></a></div>
<h3>
6- Fleks Kutu Yapıcılar (Flex Shorthand)</h3>
<p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>flex-grow</li>
	<li>flex-shrink</li>
	<li>flex-basis</li>
</ul>
<br />
<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod6')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod6">
<pre>		div { flex: 1 1 auto; }</pre></div></div>
<p>
Bu shorthand, esneme (flex-grow), daralma (flex-shrink), ve temel boyut 
(flex-basis) özelliklerini birleştirir.</p>
 
<iframe allow="clipboard-write" class="interactive is-default-height" data-readystate="complete" height="400" loading="lazy" src="https://interactive-examples.mdn.mozilla.net/pages/css/flex.html" title="MDN Web Docs Interactive Example" width="100%"></iframe>  
  
<hr />
<h3>
7- Geçiş Yapıcılar (Transition Shorthand)</h3>
  
    <style>
        .button_transition {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }
        .button_transition:hover {
            background-color: green;
        }
    </style>
<table border="0" width="860" height="218" cellspacing="0">
	<tr>
		<td width="150" rowspan="2"><p>
Kullanılabilen Özellikler:</p>
<ul>
<li>list-style-type</li>
<li>list-style-position</li>
<li>list-style-image</li>
</ul></td>
		<td height="173" bgcolor="#FFFFCC">transition: Bir CSS özelliğinde bir 
		değişiklik olduğunda bu değişimin süresini ve şeklini belirler.<br />
		all: Tüm stil değişiklikleri için geçerlidir. (Örneğin, renk, boyut, 
		pozisyon gibi).<br />
		0.3s: Geçişin ne kadar süreceğini belirler. Bu durumda 0.3 saniye 
		sürecek.<br />
		ease-in-out: Geçişin başında ve sonunda yavaşlamasını sağlar.<br />
		
		Bu örnekte, düğmenin üzerine geldiğinizde rengin mavi yerine yavaşça 
		yeşile dönüştüğünü göreceksiniz.</td>
	</tr>
	<tr>
		<td height="45" width="445" bgcolor="#FFFFCC">
    <style>
        .button_transition {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }
        .button_transition:hover {
            background-color: green;
        }
    </style>

<button class="button_transition">Üzerine Gel!</button>

</td>
	</tr>
</table>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod7')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod7">
<pre>		div { transition: all 0.3s ease-in-out; }</pre></div></div>
<p>
Bu shorthand, hangi özelliğin geçiş yapacağını (transition-property), süresini (transition-duration), 
zamanlamasını (transition-timing-function), ve gecikmesini (transition-delay) tanımlar. Alttaki kod bilmeyenler için transition örneğidir.</p>
<iframe height="300" style="width: 100%;" scrolling="no" title="WebAnimation: Hover with transition" src="https://codepen.io/nucliweb/embed/OJVJBeV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nucliweb/pen/OJVJBeV">
  WebAnimation: Hover with transition</a> by Joan Leon (<a href="https://codepen.io/nucliweb">@nucliweb</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
  <hr />
<h3>
8- Animasyon Yapıcılar (Animation Shorthand)</h3>
    <style>
        .button_transition {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }
        .button_transition:hover {
            background-color: green;
        }
    </style>
<table border="0" width="100%" height="230" cellspacing="0">
	<tr>
		<td width="300" rowspan="2">
<p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>animation-name</li>
	<li>animation-duration</li>
	<li>animation-timing-function</li>
	<li>animation-delay</li>
	<li>animation-iteration-count</li>
	<li>animation-direction</li>
	<li>animation-fill-mode</li>
	<li>animation-play-state</li>
</ul>
</td>
		<td height="180" bgcolor="#FFFFCC" colspan="2">Bu kodda, div öğesi yatay olarak sağa doğru kayar ve ardından geri döner. Animasyon 2 saniye sürer, 1 saniyelik bir gecikme ile başlar ve sonsuz olarak devam eder.</td>
	</tr>
	<tr>
		<td width="4"> </td>
		<td height="50" width="634" bgcolor="#FFFFCC">
    <style>
        .div_animation {
            width: 200px;
            height: 100px;
            background-color: #4CAF50;
            animation: slideIn 2s ease-in 1s infinite alternate both;
        }

@keyframes slideIn {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(300px);
            }
        }
    </style>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod8')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod8">
<pre>		div { animation: slideIn 2s ease-in 1s infinite alternate both; }</pre></div></div>
<p>
Bu shorthand animasyon ismi (animation-name), süresi (animation-duration), 
zamanlaması (animation-timing-function), gecikmesi (animation-delay), ve diğer 
özellikleri birleştirir.</p>
<hr />
<h3>
9- Çerçeve Yapıcılar (Outline Shorthand)</h3>
<table>
	<tr>
		<td><p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>outline-width</li>
	<li>outline-style</li>
	<li>outline-color</li>
</ul>
 <code>
p.br1 {outline: dashed;}<br />
p.br2 {outline: dotted green;}<br />
p.br3 {outline: 5px solid yellow;}<br />
p.br4 {outline: thick ridge pink;}</code>     
      </td>
		<td><style>
p.br1 {outline: dashed;}
p.br2 {outline: dotted blue;}
p.br3 {outline: 5px solid yellow;}
p.br4 {outline: thick ridge orange;}
</style>

<h2>Border Kullanım Şekli</h2>

<p class="br1">A dashed outline.</p>
<p class="br2">A dotted red outline.</p>
<p class="br3">A 5px solid yellow outline.</p>
<p class="br4">A thick ridge pink outline.</p></td>
	</tr>
</table>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod9')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod9">
<pre>		div { outline: 2px dotted red; }</pre></div></div>
<p>
Bu, çerçeve genişliğini (outline-width), stilini (outline-style), ve rengini (outline-color) 
birleştirir.</p>
<hr />
<h3>
10- Kutu Gölgesi Yapıcılar (Box Shadow Shorthand)</h3>
<table>
	<tr>
		<td rowspan="2"><p>
Kullanılabilen Özellikler:</p>
<ul>
	<li>offset-x</li>
	<li>offset-y</li>
	<li>blur-radius</li>
	<li>spread-radius</li>
	<li>color</li>
</ul><br />---------------------------------</td>
		<td align="right"><style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
<style>
.box_shdov{
	top:5px;
  	right:60px;
    width: 100px;
    height: 100px;
    background-color: #fff;
    box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.9);
}</style>
<div class="box_shdov"></div>
 </td>
</tr>
	<tr>
		<td valign="top">Bu örnekte:

10px yatay gölge,<br />
10px dikey gölge,<br />
50px bulanıklık yarıçapı,<br />
10px yayılma yarıçapı,<br />
rgba(0, 0, 0, 0.9) ise neredeyse tamamen siyah bir gölge oluşturuyor.</td>
	</tr>
</table>

<div>

<div class="MandoRadio_PRE"><div class="CB_Heading">
<span>Örnek Shorthand Kullanımı:</span>
<button class="C_box_main" id="copy1" onclick="copyC('copy1','kod10')"><i class="CBox_icn" title="Kodu Kopyalamak için Tıkla"></i></button>
</div>
    
    <div id="kod10">
<pre>		div { box-shadow: 10px 5px 5px 0px rgba(0, 0, 0, 0.5); }</pre></div></div>
<p>
Bu shorthand, gölgenin x ve y ofsetini, bulanıklığını ve yayılımını birleştirir.</p>
<hr />
<p>
Bu shorthand özellikleri, CSS kodlarını daha kısa ve okunabilir hale getirmek 
için faydalıdır. Her bir shorthand kullanımı ilgili özellikleri birleştirerek 
daha temiz bir kod yazımı sağlar.</p></div></div></div></div></div></div></div></div></div></div>

Blog CSS CSS Shorthand Ve Kullanımı

Shorthand CSS Nedir? Shorthand CSS, stil dosyaları yazılırken CSS elementlerinin minimum kod ile oluşturulmasıdır. Longhand CSS Nedir? ...

Midas Sponsored

CSS Shorthand Ve Kullanımı

Blog Menü

Comments

Rasgele Yazılar[combine][random][5]