Menghasilkan CSS dari lapisan

Fitur Copy CSS menghasilkan properti Cascading Style Sheet langsung dari lapisan Photoshop, menangkap spesifikasi desain yang dapat ditempelkan ke dalam file stylesheet Anda. Alur kerja ini menjembatani kesenjangan antara desain visual dan implementasi kode, terutama saat menyiapkan aset untuk proyek web atau berkolaborasi dengan pengembang yang membutuhkan spesifikasi gaya yang presisi.

Gunakan Copy CSS saat Anda perlu menerjemahkan elemen desain visual ke dalam deklarasi gaya yang siap digunakan dalam kode. Fitur ini berfungsi dengan lapisan bentuk individual, lapisan teks, atau grup lapisan yang berisi elemen-elemen ini. Fitur ini menghasilkan CSS yang dapat ditempelkan langsung ke dalam stylesheet Anda, menangkap properti desain dengan akurasi piksel yang sempurna. Untuk alur kerja desain-ke-web yang lebih luas, jelajahi efek dan gaya lapisan untuk opsi gaya tambahan dan mengekspor aset untuk format output lainnya.

Properti CSS yang diambil dari lapisan

Copy CSS mengekstrak properti yang berbeda bergantung pada jenis lapisan yang Anda pilih.

Lapisan bentuk menghasilkan CSS untuk:

• Koordinat ukuran dan posisi
• Warna goresan
• Warna isian, termasuk definisi gradien
• Efek Bayangan

Lapisan teks memuat properti bentuk ditambah spesifikasi tipografi:

• Kelompok font
• Ukuran dan bobot font
• Tinggi baris
• Dekorasi teks (garis bawah, coret)
• Perataan vertikal (superskrip, subskrip)
• Perataan teks

Grup lapisan membuat kelas CSS terstruktur yang mewakili hubungan induk-anak. Grup itu sendiri menjadi div induk, sementara setiap lapisan di dalam grup menghasilkan div anak. Nilai posisi atas dan kiri untuk elemen anak dihitung relatif terhadap kontainer induk, yang mencerminkan perilaku pemosisian CSS standar.

Batasan Copy CSS

Copy CSS tidak berfungsi dengan Smart Objects. Jika lapisan Anda adalah Smart Object, klik dua kali untuk mengedit isinya dan salin CSS dari lapisan di dalam dokumen Smart Object, atau rasterkan lapisan tersebut terlebih dahulu jika sesuai dengan alur kerja Anda.

Fitur ini tidak dapat memproses beberapa lapisan bentuk atau lapisan teks yang dipilih secara bersamaan kecuali dikelompokkan dalam grup. Untuk menyalin CSS dari beberapa lapisan sekaligus, kelompokkan lapisan tersebut ke dalam grup lapisan terlebih dahulu.

Hasilkan kode CSS dari lapisan Anda

Kode CSS kini ada di clipboard Anda dan siap diintegrasikan ke dalam proyek web Anda. Tinjau properti yang dihasilkan untuk memastikan kesesuaiannya dengan kebutuhan pengembangan Anda, dan sesuaikan nilai sesuai kebutuhan untuk desain responsif atau kompatibilitas browser.