Бир мүнөткө жетпеген убакытта Photoshop дизайныңызды CSS кодуна кантип которсо болот

css-фотошоп

CS6 версиясы келгенден бери Adobe Photoshop программасында веб-дизайндын макетин иштеп чыгуу үчүн абдан пайдалуу вариантты ишке киргизди. Операция болуп саналат абдан жеңил жана, өзгөчө, орозо. Колдонмо аркылуу биз фигураларыбызга жана тексттик катмарларга шилтеме катары каскаддык стилдик баракчаларды түзө алабыз. Процедура биздин макетти иштеп чыгуу, элементтерибиздин коддук версиясын көчүрүү жана баракчабызга чаптоо сыяктуу эле жөнөкөй.

Бул абдан жакшы вариант, айрыкча, биздин дизайныбыздын өнүгүшүн визуалдык түрдө жана реалдуу убакытта көрө алабыз. Бул параметрди колдонуу жана алуу үчүн бир нече кеңеш максималдуу аткаруу:

Так болууга аракет кылыңыз

Кесипкөй натыйжага жетүү үчүн, өзүңүздүн сайтыңыздын өлчөөсүн жана пропорциясын эске алуу сунушталат. Дизайндап жаткан шаблондун Width and Heigh маанилерин орнотуп, аларды макетиңизде колдонуңуз. CSS кодун көчүргөндө, биз ар бир элементти полотнонун ар бир элементинин жана четтеринин ортосундагы пикселдеги аралыкты эске алуу менен жайгаштырабыз. Дизайныңызга киргизе турган көлөмдөрдү жана иерархиялык себептерди, анын ичинде ар бир элементтин тегизделишин жана алардын ар биринин ортосундагы аралыкты колдонуп, колдонуучуларга максималдуу окулушун камсыз кылыңыз.

Гиддерди жана интерфейстин эрежелерин колдонуу бардык элементтери толук шайкеш келтирилген тыкан жана таза шаблонду курууга жардам берет.

веб-фотошоп

Ар бир элементтин бардык мүнөздөмөлөрүн конфигурациялаңыз

CSS кодун көчүрүп алуу мүмкүнчүлүгү сайтыбызды форма жана текст катмарларын колдонуудан өтө тактык менен иштеп чыгууга мүмкүнчүлүк берет. Ар бир катмардын мазмуну алмашуу буферине көчүрүлөт жана биз аны тез арада стилдик баракчабызга чаптай алабыз. Формалардын катмарларынан төмөнкү орнотуулар үчүн маанини жазыңыз:

  • көлөм
  • абал
  • Штрих түсү
  • Толтуруу түсү (градиенттерди кошо)
  • Көлөкө түшүрүү

Текст катмарларынан биз төмөнкү баалуулуктарды көрө алабыз:

  • Ариптер үй-бүлөсү
  • тексттин өлчөмү текст
  • Ариптин калыңдыгы
  • Саптын бийиктиги
  • Асты сызылган
  • сызылган
  • Superscript
  • Subscript
  • Текстти тегиздөө

Муну эсиңизден чыгарбаңыз жана издеген стилиңизди камсыз кылуу үчүн ушул баалуулуктардын ар бирин коюңуз.

Катмар топтору менен иштөө

Бул функция биздин класстын эки түрү боюнча уюштурулган, фигуралардын же тексттин катмарларын бириктирген ар бир топ үчүн бир түр жана ушул типтердин биринин ар бир катмары үчүн класс которот. Ар бир топтун классы ар бир топко киргизилген катмарларга дал келе турган div div элементтерин камтыган ата-эне див элементин билдирет. Ушундайча, бала контейнерлеринин жогорку жана сол маанилери ата-эне контейнерине шилтеме берүү менен орнотулат. Бул параметр акылдуу объектилерде жок экендигин жана бир нече катмарга бир эле учурда, эгер алар топтолбосо, колдонулбай тургандыгын эсиңизден чыгарбаңыз.

Которуу кадамдары

Макетти жасап бүткөндөн кийин, ар бир элементти настройкалап, аларды топтор боюнча топтоштургандан кийин, сиз төмөнкү кадамдарды гана аткарыңыз:

 

  • Катмарлар панелине өтүп, ушул эки жолдун бирин тандаңыз:
    • Форманы же тексттик катмарды же катмарлар тобун оң баскыч менен чыкылдатып, тандаңыз CSSти көчүрүү контексттик менюда.
    • Формаларды же тексттик катмарды же катмарлар тобун тандап, андан кийин параметрди тандаңыз CSSти көчүрүү Катмарлар панелинин менюсунда.
  • Кодду стилиңиздин документине чаптап, html5 аркылуу баракчаларыңызга колдонсоңуз болот.

    CSS-Photoshop1

    CSS-Photoshop2


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт.

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.