Kullanıcı Kılavuzu İptal

CSS dosyalarını ayıklama | Illustrator

Ara

Son güncelleme: 25 May 2023

Illustrator Kullanıcı Kılavuzu
Illustrator’ı tanıyın
1. Illustrator’a giriş
2. Çalışma alanı
3. Illustrator’da araçlar
  1. Bir bakışta araçlar
  2. Seçme araçları
  3. Gezinme araçları
  4. Boyama araçları
  5. Metin araçları
  6. Çizim araçları
  7. Değiştirme araçları
    1. Döndür
    2. Yansıtma
    3. Ölçek
    4. Yamultma
    5. Genişlik
    6. Serbest Dönüştürme
    7. Damlalık
    8. Karışım
    9. Silgi
    10. Makas
    11. Boyut
4. Üretken Yapay Zeka (Çin ana karasında kullanılamamaktadır)
5. Hızlı eylemler
Web'de Illustrator (beta)
iPad'de Illustrator
1. iPad’de Illustrator uygulamasına giriş
2. Çalışma alanı
3. Belgeler
  1. iPad’de Illustrator uygulamasında belgelerle çalışma
  2. Photoshop ve Fresco belgelerini içe aktarma
4. Nesneleri seçme ve düzenleme
  1. Tekrar nesneleri oluşturma
  2. Nesneleri karıştırma
5. Çizim yapma
  1. Yolları çizme ve düzenleme
  2. Şekil çizme ve düzenleme
6. Yazım
7. Görüntülerle çalışma
  1. Raster görüntüleri vektörleştirme
8. Renk
  1. Renkleri ve degradeleri uygulama
Bulut belgeleri
1. Temel bilgiler
2. Sorun giderme
  1. Illustrator bulut belgelerinde oluşturma veya kaydetme sorunlarını giderme
  2. Illustrator bulut belgelerinde sorun giderme
İçerik ekleme ve düzenleme
İçe aktarma, dışa aktarma ve kaydetme
1. İçe aktarma
2. Illustrator’da Creative Cloud Libraries
  1. Illustrator’da Creative Cloud Libraries
3. Kaydetme ve dışa aktarma
Yazdırma
1. Baskıya hazırlama
2. Yazdırma
Görevleri otomatikleştirme
Sorun giderme

Bağımsız nesnelerin veya Illustrator’da tasarlanan tüm mizanpajın CSS kodunu ayıklamayı ve dışa aktarmayı öğrenin.

Illustrator’da bir HTML sayfası için tasarım oluşturabilirsiniz. Web Geliştirici, iyi bir görsel kılavuz niteliğinde olan bu tasarım sayesinde bir HTML düzenleyicide bir sayfaya mizanpajı, stilleri ve nesneleri kodlayabilir. Ancak, bileşenlerin ve nesnelerin tam görünümünü ve pozisyonunu tekrarlamak zaman alan, zorlu bir işlemdir.

Illustrator ile bir HTML sayfası için mizanpaj oluşturduğunuzda, bileşenlerin ve nesnelerin sayfadaki görünümünü belirleyen ilgili CSS kodunu da oluşturabilir ve dışa aktarabilirsiniz. CSS, metnin ve nesnelerin görünümünü (karakter ve grafik stillerine benzer şekilde) kontrol etmenizi sağlar.

CSS kodunu görüntüleme ve ayıklama

CSS Özellikleri paneli, kullanıcıların aşağıdakileri yapmasına olanak tanır:

Seçilen nesnelerin CSS kodunu görüntüleyebilir ve kopyalayabilirler.
Bir ya da daha fazla öğeyi veya seçilen tüm Illustrator öğelerini bir CSS dosyasına dışa aktarabilirler.
Kullanılan bit eşleme dönüştürülebilir görüntüleri dışa aktarabilirler.
Tarayıcıya özel CSS kodu oluşturabilirler.

A. Bazı stiller CSS koduna dönüştürülemediğinde uyarı verilir B. CSS Dışa Aktarma Seçenekleri iletişim kutusu C. Seçili CSS’yi Dosyaya Dışa Aktar D. Seçilen Stili Panoya Kopyala E. CSS Oluştur F. CSS Özellikleri Panel menüsü G. Seçilen nesnelerde kullanılan stiller H. CSS kodu

CSS kodunu görüntüleyip ayıklamak için aşağıdaki adımları uygulayın:

Pencere > CSS Özellikleri'ni seçin.

Not:

Illustrator belgenizdeki nesnelerin Katmanlar panelinde adlandırılmış olduğundan emin olun.
Oluşturulan CSS kodunu görüntülemek için:

Bir nesne için:

Bir nesne seçin. Nesnenin CSS kodu, CSS Özellikleri panelinde görüntülenir.

Birden çok nesne için:

Shift tuşunu basılı tutun, birden çok nesne seçin ve ardından CSS Özellikleri panelinde CSS Oluştur seçeneğini belirleyin.

Tüm nesneler için:

Ctrl/Cmd + A tuşlarına basarak tüm nesneleri seçin ve ardından CSS Özellikleri panelinde CSS Oluştur seçeneğini belirleyin.
Oluşturulan CSS kodunu almak için aşağıdakilerden birini yapın:
Seçilen kodu kopyalamak için:

Belirli bir kodu seçin ve panoya kopyalamak için Seçilen Stili Kopyala seçeneğini belirleyin.

CSS Özellikleri Panel menüsünü seçin ve bir dosyaya dışa aktarmak için Seçili CSS’yi Dışa Aktar seçeneğini belirleyin.

Tüm kodları kopyalamak için:

CSS kodunda seçim yapmayın ve kodu panoya kopyalamak için Seçilen Stili Kopyala seçeneğini belirleyin.

CSS Özellikleri Panel menüsünü seçin ve bir dosyaya dışa aktarmak için Tümünü Dışa Aktar seçeneğini belirleyin.
CSS kodunu bir dosyaya kaydederken CSS Dışa Aktarma Seçenekleri iletişim kutusundaki seçenekler arasından seçim yapın.

CSS Dışa Aktarma Seçenekleri

Örnek CSS Kodu

Degrade uygulanmış dikdörtgen (tüm tarayıcılar)

.GRADIENT_BOX
{
  background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)&quot;;
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}

Degrade uygulanmış dikdörtgen (yalnızca webkit tabanlı tarayıcılar)

.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

Birden fazla nesne

.NormalCharacterStyle
{
  font-family : Myriad Pro;
  font-size : 12px;
}
.st0
{
  border-style : Solid;
  border-color : #FFFFFF;
  border-color : rgba(255, 255, 255, 1);
  border-width : 0px;
}
.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}