Etiket: css

CSS outline-style

outline-style :

Bir element sınırları ile outline çizgisinin stilini ayarlamak için kullanılır.

Örnek

div {
   outline-style: dashed;
   outline-color: green;
  width: 300px;
  padding: 20px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Outline çizgisini kaldırır.
hidden Outline çizgisini gizler.
dotted Noktalı outline çizgisini çizer.
dashed Kesik çizgili outline çizgisini çizer.
solid Düz outline çizgisini çizer.
double Çift outline çizgisini çizer.
groove 3D grooved(Yivli) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
ridge 3D ridge(Çıkıntılı) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
inset 3D inset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
outset 3D outset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS3 outline-offset

outline-offset :

Bir element sınırları ile outline çizgisinin arasındaki mesafeyi ayarlamak için kullanılır.

Örnek

div {
    margin: 40px;
    width: 200px;
    outline: 5px solid green;
    outline-offset: 20px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 Desteklenmiyor 3.1 10.5
Posted on by Samed GÖZÜTOK 0

CSS outline-color

outline-color :

Outline’ın rengini belirlemek için kullanılır.

Örnek

div {
    width: 200px;
    padding: 50px;
    outline-style: dashed;
    outline-color: #00ff00;
}

Codepen Ön izleme

 

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
invert Rengi arka planı gösterecek şekilde şeffaf yapar.
color Bir renk değeri alır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 1

CSS outline

outline :

Bir element sınırları dışında çizili olan çizgidir. Ayarlanabilir özellikleri sırayla: rengi – tarzı – genişliği’dir. Yukarıdaki değerlerden biri eksik olursa varsayılan değer geçerli olacaktır.

Örnek

div {
  width: 200px;
  outline: red dashed thick;
  padding: 20px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
outline-color Outline rengini ayarlamak için kullanılır.
outline-style Outline stilini ayarlamak için kullanılır.
outline-width Outline genişliğini(kalınlığını) ayarlamak için kullanılır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS order

order :

Bir element içindeki diğer elementlerin sıralamasını belirtir.

Not: çalışması için flex değerinin olması gerekir.

Örnek

div {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
  color: white;
  display: -webkit-flex; /* Safari */
  display: flex;
}
.order1 {
  background: red;
  -webkit-order: 4;
  order:4;
}
.order2 {
  background: green;
  -webkit-order: 3;
  order:3;
}
.order3 {
  background: blue;
  -webkit-order: 2;
  order:2;
}
.order4 {
  background: pink;
  -webkit-order: 1;
  order:1;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Elementin sırasını belirtir.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0 9.0
6.1-webkit		 7.0
Posted on by Samed GÖZÜTOK 0

CSS3 opacity

opacity :

Bir element için opaklık düzeyini belirler.

0.5 bize 50% lik opaklığa sahip olacağını belirtirken 0 tamamen saydam 1 ise hiç şeffaf olmayan değeri belirtir. Yani 0 ile 1 arasında bir değer alabilir.

Örnek

.opacity {
  background: red;
  width: 300px;
  height: 300px;
  color: white;
  opacity: 0.3;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number 0 (tamamen şeffaf) ile 1(tamamen opak) arası bir değer alır.
İnital
İnherit

Tarayıcı Desteği
4.0 2.0 9.0 3.1 9.0
Posted on by Samed GÖZÜTOK 0

CSS min-width

min-width :

Bir elementin minimum genişliğini ayarlamak için kullanılır. Bu özellik elementin daha fazla küçülmesine engel olur.

Örnek

div {
  background: red;
  color: white;
  min-width: 200px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiç bir değer almaz.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 7.0 2.0.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS min-height

min-height :

Bir elementin minimum yüksekliğini ayarlamak için kullanılır. Bu değer daha küçük yükseklik değerini önler.

Örnek

div {
  width: 200px;
  min-height: 200px;
  background: red;
  color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiç bir değer almaz.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 7.0 2.0.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS3 @media

@media :

Bu yöntem cihazlar için farklı stil kurallarını tanımlamak için kullanılır.

Not: Her cihazın media boyutları ve özellikleri farklıdır.

Örnek

.media {
  background: red;
  width: 300px;
  height: 300px;
  color: white;
}
@media screen and (min-width: 500px) {
    .media {
        background-color: green;
    }
}

Codepen Ön izleme

 

Medya Türleri

Değer Açıklama
all Bütün medya türleri için kullanılır.
aural Onaylanmamaktadır. Synthesizers konuşma ve ses için kullanılır.
braille Onaylanmamaktadır. Braille dokunsal cihazlar için kullanılır.
embossed Onaylanmamaktadır. Braille yazıcılar için kullanılır.
handheld Onaylanmamaktadır. Küçük yada avuç içi cihazlar için kullanılır.
print Yazıcılar için kullanılır.
projection Onaylanmamaktadır. Slaytlar için öngörülen sunumlar için kullanılır.
screen Bilgisayar ekranları, tabletler, cep telefonları gibi cihazlar için kullanılır.
speech Ekran okuyucular için yüksek sesle sayfayı okur.
tty
tv Televizyon tipi cihazlar için kullanılır.

Medya Özellikleri

Değer Açıklama
Aspect-ratio Genişlik ve görüntüleme alanının yüksekliği arasındaki oranı belirler.
color Çıkış cihazı için renk bileşeni başına bit sayısını belirtir.
Color-index Renk sayısını belirler.
embossed Onaylanmamaktadır. Braille yazıcılar için kullanılır.
Device-aspect-ratio Cihazın genişlik ve yüksekliği arasındaki oranını belirtir.
Device-height Cihazın yüksekliğini belirtir.
Device-width Cihazın genişliğini belirtir.
grid Aygıtın bir kılavuz cihazı olup olmadığını belirler.
height Tarayıcı penceresi olarak ekranın yüksekliğini belirtir.
max-aspect-ratio Genişlik ve görüntüleme alanının yüksekliği arasındaki maksimum oranı belirler.
Max-color Çıkış cihazı için maximum renk bileşeni başına bit sayısını belirtir.
Max-Color-index Maximum renk sayısını belirler.
Max-device-aspect-ratio Cihazın maximum genişlik ve yüksekliği arasındaki oranını belirtir.
Max-device-height Cihazın maximum yüksekliğini belirtir.
Max-device-width Cihazın maximum genişliğini belirtir.
Max-height Tarayıcı penceresi olarak ekranın maximum yüksekliğini belirtir.
Max-monochrome Bir tek renkli ( gri tonlama ) cihaz üzerinde ” renk ” başına maximum bit sayısını belirtir.
Max-resolution Dpi veya DPCM kullanılarak , cihaz için maksimum çözünürlük belirler.
max-width Tarayıcı penceresinin maximum genişliğini belirtir.
Max-aspect-ratio Minumum genişlik ve görüntüleme alanının yüksekliği arasındaki oranı belirler.
Min-color Çıkış cihazı için minimum renk bileşeni başına bit sayısını belirtir.
min-color-index minimum renk sayısını belirler.
min-device-aspect-ratio Cihazın minimum genişlik ve yüksekliği arasındaki oranını belirtir.
min-device-width Cihazın minimum genişliğini belirtir.
min-device-height Cihazın minimum yüksekliğini belirtir.
min-height Tarayıcı penceresi olarak ekranın minimum yüksekliğini belirtir.
min-monochrome Bir tek renkli ( gri tonlama ) cihaz üzerinde ” renk ” başına minimum bit sayısını belirtir.
min-resolution Dpi veya DPCM kullanılarak , cihaz için minimum çözünürlük belirler.
min-width Tarayıcı penceresinin minimum genişliğini belirtir.
monochrome Bir tek renkli ( gri tonlama ) cihaz üzerinde ” renk ” başına bit sayısını belirtir.
orientation Ekranın manzara modunda veya portre modunda olup olmadığını belirtir.
resolution Dpi veya DPCM kullanılarak , cihaz için çözünürlük belirler
scan Çıkış aygının tarama süreci belirtir.
width Tarayıcı penceresinin genişliğini belirtir.

Tarayıcı Desteği
21.0 3.5 9.0 4.0 9
Posted on by Samed GÖZÜTOK 0

CSS max-width

max-width :

Bir elementin maximum genişliğini ayarlamak için kullanılır. Bu değer elementin daha fazla genişlemesine engel olur.

Örnek

div {
  max-width: 500px;
  background: red;
  color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiç bir değer almaz.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 7.0 2.0.2 7.0
Posted on by Samed GÖZÜTOK 0