Etiket: css3

CSS3 perspective-origin

perspective-origin :

Elemanın perspektif görüntüsünün açısını değiştirir. x ve y değerleri alır. Başlangıç değeri kapsayıcının orta noktası olan 50% 50%’dir.

Not: Bu özellik perspektif özelliğini ile birlikte kullanılması gerekir ve yalnızca 3D dönüştürülmüş elementleri etkiler.

Örnek

.div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 100px; /* Chrome, Safari, Opera  */
    perspective: 100px;
    perspective-origin: 50% 50%;
  
}
.div2 {
    padding: 50px;
    position: absolute;
    border: 5px solid red;
    background-color: green;
    -webkit-transform: rotateX(50deg); /* Chrome, Safari, Opera  */
    transform: rotateX(50deg);
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
x-axisy Görünümün x eksenine yerleştirildiği tanımlamanın olası değerleri: left/center/right/lenght/%
y-axisy Görünümün y eksenine yerleştirildiği tanımlamanın olası değerleri: left/center/right/lenght/%
İnital
İnherit

Tarayıcı Desteği
36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0.3-webkit		 23.0
15.0-o
Posted on by Samed GÖZÜTOK 0

CSS3 perspective

perspective :

Perspective özelliği elemanların görüntüsünün bakış açısını değiştirmek(derinlik hissi) için kullanılır. perspective özelliği 3 Boyutlu Dönüştürme işlemleri için önemli bir özelliktir. perspective özelliği kolay kullanımı vardır, tabi karışık yapılı  alanlardaki kullanımı hariç.

Not: perspektif özelliği yalnızca 3D dönüştürülmüş öğeleri etkiler !İpucu: 3D elemanları alt konumunu değiştirmek için izin verir.  perspective-origin özelliğiyle birlikte kullanın.

Örnek

.div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 100px; /* Chrome, Safari, Opera  */
    perspective: 100px;
  
}
.div2 {
    padding: 50px;
    position: absolute;
    border: 5px solid red;
    background-color: green;
    -webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera  */
    transform: rotateX(45deg);
    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
36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0.3-webkit		 23.0
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 overflow-y

overflow-y :

Bir elementin içindeki yukarı ve aşağı yöndeki taşmalarının nasıl olacağını belirlemek için kullanılır.

Örnek

div {
  width: 500px;
  height: 300px;
  overflow-y: hidden;
  overflow: scroll;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
visible Taşma gizlenmez.
hidden Taşma gizlenir.
scroll Taşma scroll ile gizlenir.
auto Taşma otomatik ayarlanır.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 9.5 3.0 9.5
Posted on by Samed GÖZÜTOK 0

CSS3 overflow-x

overflow-x :

Bir elementin içindeki sağ ve sol yöndeki taşmalarının nasıl olacağını belirlemek için kullanılır.

Örnek

div {
  width: 300px;
  height: 200px;
  overflow-x: hidden;
  border: 1px solid green;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
visible Taşma gizlenmez.
hidden Taşma ebgellenir.
scroll Taşma scroll ile gizlenir.
auto Taşma otomatik ayarlanır.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 3.0 9.0 9.5
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

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

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

CSS3 hanging-punctuation

hanging-punctuation :

Asılı-noktalama özelliği bir noktalama işareti başlangıcında ya da metnin tam bir satır sonunda, hat kutunun dışında yerleştirilebileceğini belirtir.

Örnek

.font {
     hanging-punctuation: first;
}

Css Sözdizimi

Değer Açıklama
none Değer almaz.
first Noktalama ilk satırın başlangıç kenarından dışında askıda kalabilir.
last Noktalama son satırın bitiş kenarından dışında askıda kalabilir
allow-end Noktalama tüm çizgilerin uç kenarı dışında askıda kalabilir.
force-end Noktalama tüm çizgilerin uç kenarı dışında askıda kalabilir.
İnital
İnherit

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

CSS3 font-stretch

font-stretch :

Bu font özelliği metni daha geniş veya dar yapmanıza olanak verir.

Örnek

.font {
  font-stretch: condensed;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ultra-condensed Metni ultra daraltır.
extra-condensed Metni extra daraltır.
condensed Metni daraltır.
semi-condensed Metni normalden biraz daha daraltır.
normal Metne normal değerini verir.
semi-expanded Metni normal değerden biraz daha genişletir.
expanded Metni genişletir.
extra-expanded Metni extra genişletir.
ultra-expanded Metni ultra genişletir.
İnital
İnherit

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

CSS3 font-size-adjust

font-size-adjust :

Web tarayıcısı ilk fontu okumadığı zaman ikinci fonta geçer ve font boyutunda önemli ölçüde değişimlere neden olabilir. Bu durumu önlemek için bu özellik her font un aynı boyutta gözükmesini sağlar.

Örnek

.font1 {
  font-family: 'arial',sans-serif;
  font-size-adjust : 1.0;
}
.font2 {
    font-family: 'verdana',sans-serif;
     font-size-adjust : 1.0;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Alacağı değeri belirlemek için kullanılır.
none Değer almaz.
İnital
İnherit

Tarayıcı Desteği
desteklenmiyor 3.0 desteklenmiyor desteklenmiyor desteklenmiyor
Posted on by Samed GÖZÜTOK 0