25 CSS жана jQuery менен сүрөттөрдү өркүндөтүү боюнча окуу куралдары

Css-3-box-shadow-shadow-image-hover-effects-image-styling-backgrounds-намуди-inspiration-add-shadow-border-make-images-stand-out

Сүрөттөрдү өркүндөтүүдө фотошоп менен тандап, андан кийин веб-баракчага орнотсо болот же В вариантын дагы тандап алсак болот: муну HTML, CSS жана Javascript техникалары менен жасаңыз.

Секирүүдөн кийин сүрөттөрдү өркүндөтүүнүн көптөгөн ыкмалары бар, алардын дээрлик бардыгы негизги база катары jQuery же CSS3 менен жасалган акыркы веб-стандарттардын артыкчылыгынан пайдаланып, бирок мындай учурда кээ бир браузерлер менен шайкештикти жоготобуз деп эскертем.

Алар англис тилинде, бирок учуп баратып кармалышат, убада кылышкан :)

Булак | 1stWD

көрсөткүч

CSS3 jQuery менен тегеректелген сүрөт

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

CSS-3 тегерек-сүрөт-jquery-сүрөт-hover-эффекттер-сүрөт-стилдөө-фондор-көрүнүш-илхам-көлөкө-чектерди жасоо-сүрөттөр-туруп-чыгуу

2.

CSS 2.1 менен бир нече фондук жана чек ара

CSS 2.1 псевдоэлементтерин кантип колдонсо болоорун билип алыңыз, 3 фондук полотнону, 2 туруктуу презентациялык сүрөттү жана бир HTML элементи үчүн бир нече татаал чектерди.

Бир нече фондор-чектер-css-2-сүрөт-стилдөө-фондор-көрүнүш-илхам-көлөкө-чектер-жасоо-сүрөттөрдү-туруп

3.

Ыкчам кеңеш: Жөнөкөй CSS менен бир нече чек ара

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

Жөнөкөй-CSS-сүрөт-стилдери-фондук-көрүнүшү-илхам-көлөкө-чектери-сүрөтүн-жасоо

4.

CSS2 менен динамикалык көлөмдүү элементтердеги бир нече чек

Үчүнчү версия Николас Галлахер элементтин көлөмү болбосо эмне кылуу керектигин көрсөтүп турат.

CSS-2 менен бир нече чек-динамикалык өлчөмдөгү элементтер, стилдөө-фондук-көрүнүшү-илхам-көмүскө-чектери-сүрөттөрдү-туруп-чыгып

5.

Чек аралар менен көңүл ачыңыз - Ийилген, Басылган жана башкалар!

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

Сүрөттөрдү стилдештирүү-фондук-көрүнүштөр менен чектелип, чек аралар менен көңүл ачыңыз-илхам-көлөкө-чектерди-сүрөттөрдү бөлүп алыңыз

6.

CSS3 менен поляроиддер

Сүрөттөрдүн жөнөкөй эмес тизмесин Polaroid сүрөттөрүнүн толук топтомуна айлантуу үчүн, кандай сонун CSS2 жана CSS3 колдонууну билип алыңыз.

Polaroids-css-3-сүрөт-стилдөө-фондук-келбети-илхам-көлөкө-чектери-сүрөттөрүн-туруп-чыгуу

7.

Кемчиликсиз толук беттин фон сүрөтү

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

Perfect-full-page-background-image-hover-effects-image-styling-backgrounds-görünüş-inspiration-add-shadow-border-make-images-stand-out

8.

CSS3 Box Shadow жана Image Hover Effects

Стилдер таблицасын түзөтүү менен көлөкө көлөкөсүнүн эффекттерин кошуунун жаңы ыкмасын изилдеңиз.

Css-3-box-shadow-shadow-image-hover-effects-image-styling-backgrounds-намуди-inspiration-add-shadow-border-make-images-stand-out

9.

JQuery / Кыска эскизди алып баруучу эффект

CSS жана jQuery менен жаркыраган стилдеги эффектке жетишүү.

Jquery-сүрөт-стилиндеги-фондук-көрүнүштөр менен кооз-эскиз-hover-effect-көрүнүш-илхам-көлөкө-чектерди-сүрөттөрдү-жасоо

10.

Жөнөкөй CSS Image Rollover Effectти кантип түзүү керек

Бул окуу куралы аркылуу сиз негизги HTML жана CSS стилдөө менен жөнөкөй CSS сүрөтүн жылдыруучу эффектти түзүүнү үйрөнгөнү жатасыз.

Жөнөкөй-CSS-сүрөт-ролловер-эффект-сүрөт-hover-эффекттер-сүрөт-стилдөө-фондук көрүнүш-түзүү-илхам-көлөкө-чектерди-сүрөттөрдү кантип-кантип түзүү керек

11.

Floatutorial

Floatutorial сизди калкып турган элементтердин сүрөттөрү, капкак капкактары, кийинки жана арткы баскычтар, сүрөттөр галереялары, сап тизмелери жана көп тилкелүү макеттер менен тааныштырат. Сүрөттү калкытууга арналган 4 окуу куралын карап көрүңүз.

Floatutorial-сүрөт-стилдөө-фондук-көрүнүш-илхам-көлөкө-чектерди жасоо-сүрөттөрдү-чыгып туруу

12.

Snazzy Hover Effects CSS колдонуу

Бул окуу куралы, сиз CSS2.1 касиеттерин колдонуп ийкемдүү илгерилетүү ыкмаларын жаратуу менен таанышасыз.

Snazzy-hover-effect-using-css-styling-backgrounds-пайда-илхам-көлөкө-чектерин-сүрөттөрдү-туруп-чыгуу

13.

Fast Rollovers without

Алдын ала жүктөө

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

Алдын-ала жүктөлбөстөн-тез которулуучу сүрөт-стилдөө-фондук көрүнүштөр-илхам-көлөкө-чектерди-сүрөттөрдү-бөлүп көрсөтүү

14.

jQuery тегеректелген бурчтары

Бурчтарды тегеректөө үчүн көптөгөн jQuery эффекттери жана башка көптөгөн үлгүлөр.

Тегерек бурчтар-jquery-сүрөт-стилдөө-фондук-көрүнүш-илхам-көлөкө-чектерди жасоо-сүрөттөр-чыгып туруу

15.

JQuery колдонуп, колдонмонун оңой кеңеши жана сүрөттү алдын ала карап көрүү

JQuery алдын ала көрүү скриптин колдонуунун 3 мисалын караңыз. Бул жөнөкөй сценарийди ар кандай максаттарда колдонсо болот.

Jquery-сүрөт-стилдөө-фондук-көрүнүш-илхам-көмөкчү-көлөкө-чектерди-сүрөттөрдү-тургузуу

16.

Supersized - Толук экрандын өбөлгөлөрү /

слайдшоу

jQuery плагини

Superzided - бул jQuery плагини, ал сүрөттөрдүн көлөмүн ченемдеди жана сүрөттөрдүн өлчөмдөрүнүн катышын сактайт жана сүрөттөрдү / фондорду слайдшоу аркылуу өткөөлдөр жана алдын-ала жүктөөлөр менен айландырат.

Supersized-full-screen-background-slideshow-jwuery-plugin-image-styling-backgrounds-пайда-inspir-add-shadow-border-make-images-stand-out

17.

PNG каптоо

Кардар берген сүрөттөрдү камтыган сайтты түзүү көйгөйүнө кабылып, кийинчерээк алардын сүрөтүн жаңыртып, түпнуска көрүнүшүн сактап калбастан кийин гана таба аласызбы? Бул чечим тунук PNG катмарын түзүүнү камтыйт, аны кадимки JPEG же GIFтин айланасында маска / кадр катары колдонсо болот. Ошентип, кадимки CMS орнотууну конфигурациялоого болот, андыктан колдонуучулар чыпкаларды колдонуу үчүн ар кандай графикалык программаны колдонуудан убара болбой сүрөттөрдү жүктөй алышат.

Png-overlay-сүрөт-стилдөө-фондук-келбети-илхам-көлөкө-чектерин-сүрөтүн-жасоо

18.

BeZoom

Жеңил салмак

JQuery

Zoom Plugin

BeZoom - бул жөнөкөй жана жеңил альтернатива JQZoom. Ал жеңилирээк жана аны колдонуу оңой.

Bezoom-жеңил-jquery-зум-плагин-сүрөт-стилдөө-фондук-көрүнүшү-илхам-көлөкө-чектери-сүрөттөрдү-туруп-чыгуу

19.

Фондук сүрөт анимациялары үчүн jQuery колдонуу

Сиз издеп жаткан эффекттин түрүн түзүү үчүн jQuery менен ойноңуз жана фондук сүрөттүн ордун өзгөртүңүз. "Активдүү мамлекеттерди кантип башкарсам болот?" Деп жооп берген жаңы макала бар. - JQuery Animated Backgrounds үчүн активдүү абалды башкаруу.

Фондогу сүрөт-анимациялар үчүн jquery-колдонуу, сүрөт-стилдөө-фондор-көрүнүшү-илхам-көмүскө-чектери-сүрөттөрдү-жасоо

20.

Сүрөттөрдү CSS менен кооздоонун 5 жолу

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

Сүрөттөрүңүздү-татымалдандыруу жолдору css-сүрөт-стилдөө-фондук-көрүнүш-илхам-көлөкө-чектерди-сүрөттөрдү-тургузуу

21.

Кантип:

Өлчөмүн өзгөртүү

Негизги Image

Өлчөмүн өзгөртүүчү фондук сүрөттү CSS менен орнотууну үйрөнүңүз. Сизде тандай турган 3 вариант бар.

Фон-сүрөт-стилдөө-фондук-көрүнүш-илхам-көлөкө-чектерди-сүрөттөрдү-кантип-өлчөмүн өзгөртүүгө болот

22.

Сүрөттөгү шилтемелерди стилдеңиз

Колдонуучуларга биздин веб-сайтыбыздын белгилүү бир бөлүгүн чыкылдатуу керектигин билдирүү, натыйжада, чычкан аркылуу күчүнө кирет. Ошол "чыкылдатуу" бөлүмдөрү, албетте, мазмундук сүрөттөрдү камтыйт. Image Link - бул сүрөт шилтемелериңизге кошумча стилдөө колдонууга мүмкүндүк берген сценарий.

Сиздин сүрөтүңүздүн шилтемелеринин стили-стилдери-стилдери-көрүнүшү-илхам-көлөкө-чектери-сүрөтүн-жасоо

23.

CSS менен бир нече фондук сүрөт

Айрым учурларда, аларды түз эле баракчага салгандан көрө, фондук сүрөттөрдү колдонуу акылдуулукка жатат. Ошондой эле, ар бир элемент, мисалы, сиздин денеңиздин белгиси сыяктуу эле, бир гана фондук сүрөттү камтыса, аларды бир нече элементтерге колдонсо болот.

CSS сүрөтү менен бир нече фондук сүрөттөр, стилдөө-фондук көрүнүштөр-илхам-көлөкө-чектерин-сүрөттөрдү-тургузуу

24.

CSS менен сүрөт чек аралары

CSS колдонуп сүрөттөргө чек араны кантип кошууга болорун көрсөткөн оңой эле окуу куралы.

CSS-сүрөт-чектери-сүрөт-стилдөө-фондук-көрүнүшү-илхам-көлөкө-чектери-сүрөтүн-жасоо

25.

CSS Sprites фондук сүрөттөрдү колдонбостон

CSS спрайттары жөнүндө билими жок туруп, hover эффектин кантип колдонууну үйрөнүңүз.

CSS-sprites-фондо-сүрөттөрдү-колдонбостон-сүрөт-стилдөө-фондор-көрүнүш-илхам-көлөкө-чектерди-сүрөттөрдү-туруп-чыгып


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

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

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

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

*

*

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