CSS'te Görüntüleme

Bu dersimizde CSS'te görüntüleme yapmak için kullanılan display, visibility ve opacity özelliklerini inceleyeceğiz.

visibility

Elementlerin gizlenmesi ve gösterilmesi için kullanılan bir özelliktir. none, visible, hidden ve collapse olmak üzere dört değer alır. Varsayılan olarak visible değerine sahiptir.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
        }
        .mavi {
            width: 300px;
            background-color: skyblue;
            padding: 20px;
            position: relative;
            float: left;
            margin-right: 20px;
        }
    

Bu şekilde CSS kodlarına sahip olduğumuzu varsayalım.

css'te görüntüleme
Büyütmek için resme tıklayınız.

Bu şekilde de bir ekran görüntüsüne sahibiz.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
        }
        .mavi {
            width: 300px;
            background-color: skyblue;
            padding: 20px;
            position: relative;
            float: left;
            margin-right: 20px;
            visibility: hidden;
        }
    

Eğer mavi div'imize visibility: hidden değerini verirsek...

css'te görüntüleme
Büyütmek için resme tıklayınız.

... bu şekilde bir ekran görüntüsü elde ederiz ve div'imiz belge içinde gizlenmiş bir hâle gelir.

opacity

Elementlere transparan yani şeffaflık özelliği vermek için kullanılır. 0 ile 1 arasında değer alır. Varsayılan olarak 1 değerine sahiptir.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
        }
        .mavi {
            width: 300px;
            background-color: skyblue;
            padding: 20px;
            position: relative;
            float: left;
            margin-right: 20px;
            opacity: 0;
        }
    

Örneğin; mavi div'imize opacity: 0 değerini verelim.

css'te görüntüleme
Büyütmek için resme tıklayınız.

Ekran görüntüsünde herhangi bir değişiklik olmayacaktır. opacity: 0 ve visibility: hidden aynı etkiyi gösterirler.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
        }
        .mavi {
            width: 300px;
            background-color: skyblue;
            padding: 20px;
            position: relative;
            float: left;
            margin-right: 20px;
            opacity: 0.5;
        }
    

Şimdi mavi div'imizin şeffaflığını %50 yapalım. Değerine 0.5 yazmamız yeterlidir. Çıktımız şu şekilde olacaktır:

css'te görüntüleme
Büyütmek için resme tıklayınız.

Görüldüğü gibi div'imiz %50 oranında şeffaflaştı.

display

Display dilimizde görüntü anlamına gelmektedir. Elementlerin belge içinde var olup olmamasını belirler. Visibility'den farkı display: none değerine sahip etiketler belge içinde hiçbir şekilde yer kaplamazlar.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
        }
        .mavi {
            width: 300px;
            background-color: skyblue;
            padding: 20px;
            position: relative;
            float: left;
            margin-right: 20px;
            display: none;
        }
    

mavi div'imize display: none değeri verdim.

css'te görüntüleme
Büyütmek için resme tıklayınız.

Görüldüğü üzere mavi div'imiz belge içinde hiçbir şekilde gözükmemekle birlikte sayfada kapladığı alan da yoktur.

Display elementi block, inline ve inline-block gibi birkaç farklı değere sahip olabilir. Display: block varsayılan elementi block düzeyinde görüntüler. Display: inline ise satır düzeyinde görüntüler. Display: inline-block ise hem satır hem de blok düzeyinde görüntüler. Yeri geldikçe bu değerleri kullanacağız.

Temel CSS3 derslerini burada bitiriyorum. Artık ileri CSS3 derslerini almaya hazırsınız.

İleri CSS3 derslerine geçmek için tıklayınız. >>>
Need a light? Beboobeep!