En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Kullanıcı arayüzü

❮ Önceki Sonraki Bölüm ❯

CSS3 Kullanıcı Arayüzü

CSS3 gibi yeniden boyutlandırma elemanları, ana hatlarıyla, ve kutu boyutlandırma gibi yeni kullanıcı arayüzü özellikleri vardır.

Bu bölümde aşağıdaki kullanıcı arayüzü özellikleri hakkında öğreneceksiniz:

  • resize
  • outline-offset

Tarayıcı Desteği

Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.

Sayılar ardından -webkit- veya -moz- bir önek ile çalıştığım ilk versiyonunu belirtin.

özellik
resize4.0 Desteklenmiyor 5.0
4.0 -moz-		4.015.0
outline-offset4.0 Desteklenmiyor 5.0
4.0 -moz-		4.09.5

CSS3 boyutlandırma'nın

resize özelliği bir unsur Kullanıcı boyutunu olmalıdır olup olmadığını belirtir.

Bu div elemanı Kullanıcı boyutunu ise (works in Chrome, Firefox, Safari and Opera) .

Aşağıdaki örnek kullanıcı sadece genişliğini yeniden boyutlandırabilirsiniz <div> elemanı:

Örnek

div {
    resize: horizontal;
    overflow: auto;
}
Kendin dene "

Aşağıdaki örnek kullanıcı yalnızca yüksekliğini yeniden boyutlandırabilirsiniz <div> elemanı:

Örnek

div {
    resize: vertical;
    overflow: auto;
}
Kendin dene "

Aşağıdaki örnek, kullanıcı yükseklik ve bir genişliğini hem boyutunu sağlayan <div> öğesi:

Örnek

div {
    resize: both;
    overflow: auto;
}
Kendin dene "

CSS3 Anahat Ofset

outline-offset özelliği, bir elemanın bir çizgisi ve kenar veya sınır arasında boşluk ekler.

Anahatları üç şekilde sınırları farklıdır:

  • Bir anahat bir çizgi sınır kenarının dışında, elementlerin etrafında çizilir
  • Bir anahat yer almaz
  • Bir anahat dikdörtgen olmayan olabilir
Bu div sınır kenarının dışında 15px bir taslağını sahiptir.

Aşağıdaki örnek sınır ve anahat arasında bir 15px boşluk eklemek için anahat-ofset özelliğini kullanır:

Örnek

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}
Kendin dene "

CSS3 Kullanıcı Arayüzü Özellikleri

Aşağıdaki tabloda tüm kullanıcı arayüzü özelliklerini listeler:

özellik Açıklama
box-sizing Bir elementin toplam genişlik ve yükseklik dolgu ve kenarlık eklemek izin verir
nav-down ok aşağı gezinme tuşu kullanıldığında gidilecek yerle belirtir
nav-index Bir element için sekme sırasını belirtir
nav-left ok-sol gezinti tuşu kullanıldığında gidilecek yerle belirtir
nav-right ok sağ navigasyon tuşu kullanıldığında gidilecek yerle belirtir
nav-up ok-up navigasyon tuşunu kullanırken gidilecek yerle belirtir
outline-offset Bir elemanın çizgisi ve kenar veya sınır arasında boşluk ekler
resize Bir öğe Kullanıcı boyutunu olup olmadığını belirler

❮ Önceki Sonraki Bölüm ❯