Kullanıcı Kılavuzu İptal

CSS dosyalarını ayıklama | Illustrator

  1. Illustrator Kullanıcı Kılavuzu
  2. Illustrator’ı tanıyın
    1. Illustrator’a giriş
      1. Illustrator’daki yenilikler
      2. Yaygın sorular
      3. Illustrator sistem gereksinimleri
      4. Apple silicon için Illustrator
      5. GPU performansı
    2. Çalışma alanı
      1. Çalışma alanı ile ilgili temel bilgiler
      2. Belge oluşturma
      3. Illustrator'daki Keşfet paneli ile daha hızlı öğrenin
      4. Bağlamsal Görev Çubuğu'nu kullanarak iş akışlarını hızlandırma
      5. Araç çubuğu
      6. Varsayılan klavye kısayolları
      7. Klavye kısayollarını özelleştirme
      8. Çalışma yüzeylerine giriş
      9. Çalışma yüzeylerini yönetme
      10. Çalışma alanını özelleştirme
      11. Özellikler paneli
      12. Tercihleri ayarlama
      13. Dokunmatik Çalışma Alanı
      14. Illustrator’da Microsoft Surface Dial desteği
      15. Düzenlemeleri geri alma ve tasarım geçmişini yönetme
      16. Görünümü döndür
      17. Cetveller, ızgaralar ve kılavuzlar
      18. Illustrator’da erişilebilirlik
      19. Çizimi görüntüleme
      20. Illustrator’ı Touch Bar ile kullanma
      21. Dosyalar ve şablonlar
    3. Illustrator’da araçlar
      1. Bir bakışta araçlar
      2. Seçme araçları
        1. Seçim
        2. Doğrudan Seçim
        3. Grup Seçimi
        4. Sihirli Değnek
        5. Kement
        6. Çalışma Yüzeyi
      3. Gezinme araçları
        1. El
        2. Görünümü Döndür
        3. Yakınlaştır
      4. Boyama araçları
        1. Degrade
        2. Kafes
        3. Şekil Oluşturucu
      5. Metin araçları
        1. Yazım
        2. Yola Yazma
        3. Dikey Metin
      6. Çizim araçları
        1. Kalem
        2. Bağlantı Noktası Ekle
        3. Bağlantı Noktasını Sil
        4. Bağlantı Noktası
        5. Kavis
        6. Çizgi Parçası
        7. Dikdörtgen
        8. Yuvarlak Köşeli Dikdörtgen
        9. Elips
        10. Çokgen
        11. Yıldız
        12. Boya Fırçası
        13. Kabarcık Fırçası
        14. Kurşun Kalem
        15. Şekillendirici
        16. Dilim
      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)
      1. Metin istemleri kullanarak sahneler, nesneler ve simgeler oluşturma
      2. Metin istemleri kullanarak vektör desenleri oluşturma
      3. Metin istemleri kullanarak vektör şekil dolguları oluşturma
      4. Metin istemleri kullanarak resimleri yeniden renklendirme
    5. Hızlı eylemler
      1. Retro metni
      2. Neon ışıması metni
      3. Eski tip metin
      4. Yeniden Renklendir
      5. Taslağı vektöre dönüştür
  3. iPad'de Illustrator
    1. iPad’de Illustrator uygulamasına giriş
      1. iPad’de Illustrator’a genel bakış
      2. iPad’de Illustrator ile ilgili SSS
      3. Sistem gereksinimleri | iPad’de Illustrator
      4. iPad’de Illustrator uygulamasında yapabilecekleriniz veya yapamayacaklarınız
    2. Çalışma alanı
      1. iPad’de Illustrator çalışma alanı
      2. Dokunmatik kısayollar ve dokunma hareketleri
      3. iPad’de Illustrator için klavye kısayolları
      4. Uygulama ayarlarınızı yönetme
    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
      1. Yazım ve fontlarla çalışma
      2. Yol boyunca metin tasarımları oluşturma
      3. Kendi fontlarınızı ekleme
    7. Görüntülerle çalışma
      1. Raster görüntüleri vektörleştirme
    8. Renk
      1. Renkleri ve degradeleri uygulama
  4. Bulut belgeleri
    1. Temel bilgiler
      1. Illustrator bulut belgeleriyle çalışma
      2. Illustrator bulut belgelerini paylaşma ve bu belgelerde iş birliği yapma
      3. Belgeleri inceleme için paylaşma
      4. Adobe Illustrator için bulut depolama alanını yükseltme
      5. Illustrator bulut belgeleri | Yaygın sorular
    2. Sorun giderme
      1. Illustrator bulut belgelerinde oluşturma veya kaydetme sorunlarını giderme
      2. Illustrator bulut belgelerinde sorun giderme
  5. İçerik ekleme ve düzenleme
    1. Çizim yapma
      1. Çizim hakkında temel bilgiler
      2. Yolları düzenleme
      3. Piksel bakımından kusursuz resimler çizme
      4. Kalem, Kavis veya Kurşun Kalem aracıyla çizim yapma
      5. Basit çizgiler ve şekiller çizme
      6. Dikdörtgen ve yuvarlak ızgaralar çizme
      7. Mercek parlamaları çizme ve düzenleme
      8. Görüntüleri izleme
      9. Yolu basitleştirme
      10. Sembolizm araçları ve sembol kümeleri
      11. Yol parçalarını ayarlama
      12. 5 kolay adımda çiçek tasarlama
      13. Perspektif ızgarası oluşturma ve düzenleme
      14. Perspektif ızgarasında nesneler çizme ve değiştirme
      15. Nesneleri tekrar kullanmak üzere sembollere dönüştürme
      16. Web iş akışları için pikselle hizalanmış yollar çizme
    2. Ölçüm
      1. Mesafe ve alan ölçme
      2. Boyutları ölçme ve çizme
    3. 3D nesneler ve malzemeler
      1. Illustrator’daki 3D efektler hakkında
      2. 3D grafikler oluşturma
      3. 3D nesneler üzerinde çizimi eşleme
      4. 3D metin oluşturma
      5. 3D nesneler oluşturma
    4. Renk
      1. Renk hakkında
      2. Renk seçme
      3. Renk örnekleri oluşturma ve kullanma
      4. Renkleri ayarlama
      5. Adobe Color Temaları panelini kullanma
      6. Renk grupları (renk uyumları)
      7. Renk Temaları paneli
      8. Resminizi yeniden renklendirme
    5. Boyama
      1. Boyama hakkında
      2. Dolgularla ve konturlarla boyama
      3. Canlı Boyama grupları
      4. Degradeler
      5. Fırçalar
      6. Saydamlık ve karıştırma modları
      7. Nesneye kontur uygulama
      8. Desen oluşturma ve düzenleme
      9. Kafesler
      10. Desenler
    6. Nesneleri seçme ve düzenleme
      1. Nesneleri seçme
      2. Katmanlar
      3. Nesneleri genişletme, gruplama ve grubu çözme
      4. Nesneleri taşıma, hizalama ve dağıtma
      5. Nesneleri yolda hizalama, yerleştirme ve taşıma
      6. Nesneleri glife yaslama
      7. Nesneleri Japonca glife yaslama
      8. Nesneleri yığınlama    
      9. Nesneleri kilitleme, gizleme ve silme
      10. Nesneleri kopyalama ve çoğaltma
      11. Nesneleri döndürme ve yansıtma
      12. Nesnelere örgü uygulama
      13. Gerçekçi taslaklar oluşturma
    7. Nesneleri yeniden şekillendirme
      1. Görüntüleri kırpma
      2. Nesneleri dönüştürme
      3. Nesneleri birleştirme
      4. Nesneleri kesme, bölme ve kırpma
      5. Kukla Çarpıt
      6. Nesneleri ölçekleme, yamultma ve deforme etme
      7. Nesneleri karıştırma
      8. Zarflar kullanarak yeniden şekillendirme
      9. Nesneleri efektlerle yeniden şekillendirme
      10. Şekillendirici ve Şekil Oluşturucu araçlarını kullanarak yeni şekiller oluşturma
      11. Canlı Köşeler ile çalışma
      12. Dokunma desteği ile geliştirilmiş yeniden şekillendirme iş akışları
      13. Kırpma maskelerini düzenleme
      14. Canlı şekiller
      15. Şekil Oluşturucu aracını kullanarak şekiller oluşturma
      16. Genel düzenleme
    8. Yazım
      1. Metin ekleme ve yazım nesneleriyle çalışma
      2. Yeniden Akış Görüntüleyici
      3. Madde işaretli ve numaralandırılmış listeler oluşturma
      4. Metin alanını yönetme
      5. Fontlar ve tipografi
      6. Görüntülerde ve anahatlı metinlerde kullanılan fontları bulma
      7. Metne temel biçimlendirme ekleme
      8. Metne gelişmiş biçimlendirme ekleme
      9. Metni içe ve dışa aktarma
      10. Paragrafları formatlama
      11. Özel karakterler
      12. Yola yazma oluşturma
      13. Karakter ve paragraf stilleri
      14. Sekmeler
      15. Eksik fontları önizleme, ekleme veya değiştirme
      16. Arapça ve İbranice fontlar
      17. Fontlar | SSS ve sorun giderme ipuçları
      18. Kreatif tipografi tasarımları
      19. Yazımı ölçekleme ve döndürme
      20. Satır ve karakter aralığı
      21. Tireleme ve satır sonları
      22. Yazım ve dil sözlükleri
      23. Asya dillerindeki karakterleri formatlama
      24. Asya dillerinde metinler için oluşturucular
      25. Karışım nesneleri ile metin tasarımları oluşturma
      26. Görüntü İzleme’yi kullanarak metin posteri oluşturma
    9. Özel efektler oluşturma
      1. Efektlerle çalışma
      2. Grafik stilleri
      3. Görünüm nitelikleri
      4. Taslaklar ve mozaikler oluşturma
      5. Alt gölgeler, ışımalar ve geçiş yumuşatma
      6. Efektler özeti
    10. Web grafikleri
      1. Web grafikleri oluşturmak için en iyi uygulamalar
      2. Grafikler
      3. SVG
      4. Dilimler ve görüntü eşlemeleri
  6. İçe aktarma, dışa aktarma ve kaydetme
    1. İçe aktarma
      1. Birden çok dosya yerleştirme
      2. Bağlantılı ve gömülü dosyaları yönetme
      3. Bağlantı bilgileri
      4. Gömülü görüntüleri çıkarma
      5. Photoshop’tan çizimleri içe aktarma
      6. Bitmap görüntüleri içe aktarma
      7. Adobe PDF dosyalarını içe aktarma
      8. EPS, DCS ve AutoCAD dosyalarını içe aktarma
    2. Illustrator’da Creative Cloud Libraries 
      1. Illustrator’da Creative Cloud Libraries
    3. Kaydetme ve dışa aktarma
      1. Çizimi kaydetme
      2. Çizimi dışa aktarma
      3. Adobe PDF dosyaları oluşturma
      4. Adobe PDF seçenekleri
      5. Illustrator çizimini Photoshop’ta kullanma
      6. Varlıkları toplama ve toplu hâlde dışa aktarma
      7. Dosyaları paketleme
      8. CSS dosyalarını ayıklama | Illustrator CC
      9. Belge bilgileri paneli
  7. Yazdırma
    1. Baskıya hazırlama
      1. Belgeleri baskı için ayarlama
      2. Sayfa boyutunu ve yönlendirmesini değiştirme
      3. Kırpma veya hizalama için kırpma işaretlerini belirleme
      4. Büyük tuval kullanmaya başlama
    2. Yazdırma
      1. Üst baskı
      2. Renk yönetimi ile yazdırma
      3. PostScript yazdırma
      4. Yazdırma hazır ayarları
      5. Yazıcı işaretleri ve taşma payları
      6. Saydam çizimleri yazdırma ve kaydetme
      7. Bindirme
      8. Renk ayrımlarını bastırma
      9. Degradeleri, kafesleri ve renk karışımlarını yazdırma
      10. Beyaz Üste Baskı
  8. Görevleri otomatikleştirme
    1. Değişkenler panelini kullanarak veri birleştirme
    2. Komut dosyaları ile otomasyon
    3. Eylemler ile otomasyon
  9. Sorun giderme 
    1. Düzeltilen sorunlar
    2. Bilinen sorunlar
    3. Çökme sorunları
    4. Çökmeden sonra dosyaları kurtarma
    5. Güvenli mod
    6. Dosya sorunları
    7. Desteklenen dosya formatları
    8. GPU cihaz sürücüsü sorunları
    9. Wacom cihaz sorunları
    10. DLL dosyası sorunları
    11. Bellek sorunları
    12. Tercihler dosyası sorunları
    13. Font sorunları
    14. Yazıcı sorunları
    15. Kilitlenme raporunu Adobe ile paylaşma
    16. Illustrator performansını iyileştirme

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.
CSS Özellikleri kodu

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:

  1. Pencere > CSS Özellikleri'ni seçin.

    Not:

    Illustrator belgenizdeki nesnelerin Katmanlar panelinde adlandırılmış olduğundan emin olun.

  2. 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.

  3. 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.

  4. 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 iletişim kutusu
    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: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";
  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;
}

İlgili konular

Bir sorunuz ya da fikriniz mi var?

Topluluğa Sorun

Sormak istediğiniz bir sorunuz veya paylaşmak istediğiniz bir fikriniz varsa Adobe Illustrator Topluluğu'na katılın. Görüşlerinizi almak isteriz.

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?