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 CC 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ü kontrol etmenizi sağlar (karakter ve grafik stillerine benzer şekilde). Tercihinize göre, bağımsız nesnelerin veya Illustrator'da tasarlanan tüm mizanpajın CSS kodunu dışa aktarabilirsiniz.   

Kullanıcılar, CSS Özellikleri paneli (Pencere > CSS Özellikleri) sayesinde şunları yapabilir:

  • Seçilen nesnelerin CSS kodunu görüntüleyebilirler
  • Seçilen nesnelerin CSS kodunu 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

Video: Illustrator CC'de CSS çıkarma

Video: Illustrator CC'de CSS çıkarma
Illustrator CC'nin metin, nesne, hatta tüm mizanpajlar için CSS kodu oluşturması sayesinde daha hızlı web sitesi oluşturma yöntemleri hakkında bilgi edinin.
Rufus Deuchler

CSS kodunu görüntüleme ve çıkarma

Not:

CSS kodu oluşturmak için aşağıdakilerden birini yapın:

  • Illustrator belgenizdeki nesnelerin Katmanlar panelinde adlandırılmış olduğundan emin olun.
  • Pencere > CSS Özellikleri > açılır menü > Dışa Aktarma Seçenekleri'ni tıklatın ve Adlandırılmamış Nesneler için CSS Oluştur'u seçin. 

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

    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. Açılır menü G. Seçilen nesnelerde kullanılan stiller H. CSS kodu 
  2. Açık bir Illustrator belgesinde, aşağıdakilerden birini yapın:

    • Bir nesne seçin. Nesnenin CSS kodu, CSS Özellikleri panelinde görüntülenir.
    • Shift tuşunu basılı tutun, birden fazla nesne seçin ve CSS Özellikleri panelindeki CSS Oluştur düğmesini tıklatın.
    • Ctrl/Cmd + A tuşlarına basarak tüm nesneleri seçin ve CSS Özellikleri panelindeki CSS Oluştur düğmesini tıklatın.

    Oluşturulan CSS kodu görüntülenir.

  3. Oluşturulmuş olan CSS kodunu almak için aşağıdakilerden birini yapın:

    • Seçilen kodu kopyalamak için belirli kodu seçin ve:
      • Panoya kopyalamak için Seçilen Stili Kopyala'yı tıklatın
      • Bir dosyaya dışa aktarmak için açılır menüyü ve Seçilen CSS'yi Dışa Aktar'ı tıklatın
    • Tüm kodu kopyalamak için CSS kodunda seçim yapmayın ve:
      • Panoya kopyalamak için Seçilen Stili Kopyala'yı tıklatın
      • Bir dosyaya dışa aktarmak için açılır menüyü ve Tümünü Dışa Aktar'ı tıklatın
  4. CSS kodunu bir dosyaya kaydederken aşağıdaki seçeneklerden birini belirleyin:

    Not:

    Oluşturulan CSS kodunun içeriğini değiştirmek için CSS Özellikleri panelinde Dışa Aktarma Seçenekleri'ni tıklatın ve gerekli seçimleri yapın.

Ö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;
}

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi