CSS ARKA PLAN ÖZELLİKLERİ

Tarhi : 15-05-2017 02:53:52 | Yazar : ÇAĞLAR BOSTANCI

CSS arkaplan özelliği div’lerin veya elementlerin arkaplanlarına renk, desen, resim gibi görseller atamak için kullanılır. Bir çok tasarımda arkaplanın önemli bir yer tuttuğu görülmektedir. Bu yazıda arkaplan rengi nasıl eklenir, konumlandırması nasıl yapırlır ve buna benzer background özelliklerini göreceğiz. Başarılar.

.arakaplanozellikleri{
	background-image: none;
	background-image:url('');
	background-attachment:scroll;/*Arkaplan hareketli*/
	background-attachment:fixed;/*Arkaplan sabit*/
	background-color:red; /*Arka planarenk verir.*/
	background-color:rgba(0,51,102,1)/*rgba(20%,50%,100%,1)*/;/*Arka plan renk belirleme*/
	background-position: top center, -50% -100%,200px 100px;/*Üst ortaya hizalar örn. çoğaltılabilir.*/
	background-repeat:;/*Arka plan terar edip etmeyeceğini belirler*/
	background-repeat: repeat;/*Arka plan tekrar eder*/
	background-repeat: repeat-x;/*Arka plan x düzleminde tekrar eder.*/
	background-repeat: repeat-y;/*Arka plan y düzleminde tekrar eder.*/
	background-repeat: no-repeat;/*Arka plan tekrar etmez.*/
	background:#09F url(picoffeeresim1.jpg) no-repeat fixed right top;/*Örnek bir kullanım*/
	background-clip:;/*Kutu modellerin arkaplanların nasıl gösterileceğni tanımlar. Üç değer alır*/
	background-clip: border-box;/*Arka plan kenarları da kapsar*/
	background-clip: padding-box;/*Sadece iç bolukları kapsar, kenarları kapsamaz*/
	background-clip: content-box;/*Arka plan sadece içeriği kapsar, iç boşluklarda (padding) ile kenarlarda gösterilmez*/
	background: url(1.jpg), url(y.jpg);
	background-position:top left, top right;
	background-size:;/*Arka plan resimlerinin istenilen boyuta göre ayarlanmasını ve yerleştirilmesini sağlar*/
	background-size:cover;/*Resmi arka plan boyutuna göre oranlar ve tamamen kaplayacak şekilde yerleştirir.*/
	background-size:contain;/*Resmi en boyuna göre arka plana tam olarak yerleştirir.*/
	background-size:100% 100%;/*Resmi arka plan olarak ayarlarken sayı ya da yüzde değeri olarak kullanılabilir.*/

.arakaplanozellikleri{

background-image: none;

background-image:url('');

background-attachment:scroll;/*Arkaplan hareketli*/

background-attachment:fixed;/*Arkaplan sabit*/

background-color:red; /*Arka planarenk verir.*/

background-color:rgba(0,51,102,1)/*rgba(20%,50%,100%,1)*/;/*Arka plan renk belirleme*/

background-position: top center, -50% -100%,200px 100px;/*Üst ortaya hizalar örn. çoğaltılabilir.*/

background-repeat:;/*Arka plan terar edip etmeyeceğini belirler*/

background-repeat: repeat;/*Arka plan tekrar eder*/

background-repeat: repeat-x;/*Arka plan x düzleminde tekrar eder.*/

background-repeat: repeat-y;/*Arka plan y düzleminde tekrar eder.*/

background-repeat: no-repeat;/*Arka plan tekrar etmez.*/

background:#09F url(picoffeeresim1.jpg) no-repeat fixed right top;/*Örnek bir kullanım*/

background-clip:;/*Kutu modellerin arkaplanların nasıl gösterileceğni tanımlar. Üç değer alır*/

background-clip: border-box;/*Arka plan kenarları da kapsar*/

background-clip: padding-box;/*Sadece iç bolukları kapsar, kenarları kapsamaz*/

background-clip: content-box;/*Arka plan sadece içeriği kapsar, iç boşluklarda (padding) ile kenarlarda gösterilmez*/

background: url(1.jpg), url(y.jpg);

background-position:top left, top right;

background-size:;/*Arka plan resimlerinin istenilen boyuta göre ayarlanmasını ve yerleştirilmesini sağlar*/

background-size:cover;/*Resmi arka plan boyutuna göre oranlar ve tamamen kaplayacak şekilde yerleştirir.*/

background-size:contain;/*Resmi en boyuna göre arka plana tam olarak yerleştirir.*/

background-size:100% 100%;/*Resmi arka plan olarak ayarlarken sayı ya da yüzde değeri olarak kullanılabilir.*/

CLİP ÖZELLİĞİ Grafilerde istenilen bölgenin gösterimesini sağlar. Absolute özelliği ile sabitlenmiş görseller üzerinde uygulanır. […]

Devamı...

CSS KUTU MODELİ

Tarhi : 09-05-2017 05:24:33 | Yazar : ÇAĞLAR BOSTANCI

KUTU MODELİ HTML elementlerinin satır düzeyinde ve blok düzeyde oluştururken dikdörtgen bir yer işgal ettikleri ve belli bir konumları bulunmaktadır. Bu duruma kutu modeli denir. width:Kutunun genişliğini belirler.PX,%,em gibi değerler verilir. height:Kutu modelinin yüksekliğini belirler. border:Kutu modelinin kenar çizgilerini ve özeliklerini belirler. margin:Kutunun dış boşluğunu belirler. padding:Kutunun iç boşluğunu belirler. background:Kutunun arkaplanını belirler.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS KUTU MODELİ</title>
        <!--ÇAĞLARBOSTANCI-->
        <style>
		#kutu{
			width:50%;/*Kutunun genişliğini verir.*/
			height:15em;/*Kutunun yüksekliğini belirler.*/
			background:rgba(0,51,51,0.5);/*Arka plan rengini belirler.*/
			border:1px solid #000;/*Kenarlıkları belirler.*/
			margin:20px;/*Kutunun dış boşluğunu belirler.*/
			padding:20px;/*Kutunun iç boşluğunu belirler.*/
			}
        </style>
    </head>
  <body>
  <div id="kutu">MERHABA DÜNYA</div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS KUTU MODELİ</title>

<style>

#kutu{

width:50%;/*Kutunun genişliğini verir.*/

height:15em;/*Kutunun yüksekliğini belirler.*/

background:rgba(0,51,51,0.5);/*Arka plan rengini belirler.*/

border:1px solid #000;/*Kenarlıkları belirler.*/

margin:20px;/*Kutunun dış boşluğunu belirler.*/

padding:20px;/*Kutunun iç boşluğunu belirler.*/

}

</style>

</head>

<body>

<div id="kutu">MERHABA DÜNYA</div>

</body>

</html>

Margin […]

Devamı...

Çağlar Bostancı

CSS ARKA PLAN ÖZELLİKLERİ

CSS KUTU MODELİ