25 Tutorials biex itejbu l-istampi bis-CSS u jQuery

CSS-3-kaxxa-dell-immaġni-imbagħad jerġgħu-effetti-immaġni-styling-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

Meta ntejbu l-immaġini nistgħu nagħżlu li nagħmluha bil-Photoshop u mbagħad immuntawha fuq il-paġna tal-web jew nistgħu nagħżlu wkoll l-għażla B: tagħmel dan bit-tekniki HTML, CSS u Javascript li huma disponibbli.

Wara l-qabża hemm bosta tekniki biex itejbu l-immaġini, kważi kollha magħmulin bil-jQuery bħala l-bażi ewlenija jew bis-CSS3 billi nieħu vantaġġ mill-aħħar standards tal-web, għalkemm infakkarkom li f'dak il-każ nitilfu l-kompatibilità ma 'xi browsers.

Huma bl-Ingliż iżda jinqabdu fuq il-fly, imwiegħed :)

Sors | 1stWD

CSS3 Immaġni ttundjata Bil jQuery

Tgħallem tgeżwer span tag madwar l-element tal-immaġni biex tikseb immaġini ttundjati li jintwerew eżatt fil-browsers moderni kollha.

CSS-3-immaġni-tond-ma 'jQuery-immaġni-imbagħad-effetti-ta' l-immaġni-styling-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

2.

Sfondi u Fruntieri Multipli bis-CSS 2.1

Tgħallem kif tuża psewdoelementi CSS 2.1 biex tipprovdi sa 3 kanvas fl-isfond, 2 immaġini ta 'preżentazzjoni ta' daqs fiss, u fruntieri kumplessi multipli għal element HTML wieħed.

Sfondi multipli-fruntieri-css-2-immaġni-grafika-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

3.

Ħjiel ta 'Ħeffa: Fruntieri Multipli b'sempliċi CSS

Screencast mgħaġġel li jurik kif tikseb fruntieri multipli b's CSS sempliċi b'dak il-mod billi żżid aktar fond mad-disinni tiegħek. Verżjoni ħafna aktar sempliċi tat-tutorja preċedenti.

Quick-tip-multiple-border-with-simple-css-image-styling-sfondi-dehra-ispirazzjoni-add-shadow-border-make-images-stand-out

4.

Fruntieri Multipli fuq Elementi ta 'Daqs Dinamiku ma' CSS2

It - tielet verżjoni ta ' Nicolas Gallagher jurik x'għandek tagħmel jekk ma tagħmilx id-daqs tal-element.

Fruntieri multipli-elementi ta 'daqs dinamiku-bi-CSS-2-immaġni-stil-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

5.

Have Fun w / Borders - Beveled, Pressed, & More!

Tgħallem kif tikseb effett ippressat bis-CSS u xi tricks ta 'stil ta' fruntiera sempliċi biex tikseb effetti varji.

Have-fun-with-border-beveled-pressed-more-image-styling-sfondi-dehra-ispirazzjoni-add-shadow-border-make-images-stand-out

6.

Polaroids ma 'CSS3

Tgħallem kif tuża xi CSS2 u CSS3 tal-biża 'biex tibdel lista ta' immaġini mod ieħor bla pretensjoni f'sett sħiħ ta 'stampi Polaroid.

Polaroids-css-3-image-styling-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

7.

Immaġni ta 'Sfond ta' Paġna Sħiħa Perfetta

Tgħallem kif iżżid immaġni ta 'sfond ma' CSS li timla paġna sħiħa b'immaġni, mingħajr spazju abjad, iqiegħed l-immaġni kif meħtieġ, ma jikkawżax scrollbars u ħafna aktar.

Perfetta-paġna sħiħa-sfond-immaġni-imbagħad jerġgħu-effetti-immaġni-styling-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

8.

CSS3 Kaxxa Shadow u Effetti Image Hover

Esplora mod ġdid ta 'kif iżżid effetti ta' shadow shadow biss billi teditja folja ta 'stil.

CSS-3-kaxxa-dell-immaġni-imbagħad jerġgħu-effetti-immaġni-styling-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

9.

Fancy Thumbnail Hover Effect w / jQuery

Kiseb effett ta 'flash stil pulita b'CSS u jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-sfondi-dehra-ispirazzjoni-add-dell-fruntieri-jagħmlu-immaġini-jispikkaw

10.

Kif Toħloq Effett Sempliċi ta 'Qlib tal-Immaġni CSS

F'dan it-tutorja int se titgħallem kif toħloq effett sempliċi ta 'qlib ta' immaġni CSS bi stil bażiku HTML u CSS.

Kif-toħloq-immaġni-sempliċi-css-effett-qlib-immaġni-jerġgħu-jimxu-effetti-immaġni-stil-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

11.

Floatutorjali

Floatutorial tieħdok permezz tal-baŜi ta 'elementi li jżommu f'wiċċ l-ilma bħal stampi, drop caps, buttuni li jmiss u ta' wara, galleriji ta 'immaġni, listi inline u taqsimiet b'ħafna kolonna. Iċċekkja 4 tutorials iddedikati għall-immaġni f'wiċċ l-ilma.

Image-floatutorial-styling-sfondi-dehra-ispirazzjoni-żid-shadow-fruntieri-jagħmlu-immaġini-jispikkaw

12.

Snazzy Hover Effects Bl-użu ta 'CSS

F'dan it-tutorja, tkun qed tmur fuq il-ħolqien ta 'tekniki flessibbli avvanzati ta' imbagħad jerġgħu jużaw proprjetajiet CSS2.1.

Snazzy-hover-effect-using-css-image-styling-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

13.

Qlib Mgħaġġel Mingħajr

Preload

Meta tuża qlib ta 'immaġni CSS, għandhom jitgħabbew żewġ, tlieta, jew aktar immaġini (u spiss ikunu mgħobbija minn qabel għall-aħjar riżultati). Tgħallem kif tqiegħed l-istati kollha f'immaġni waħda tagħmel bidliet dinamiċi aktar malajr u ma teħtieġ l-ebda tagħbija minn qabel.

Qlib mgħaġġel-mingħajr-pre-load-image-styling-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

14.

jQuery Kantunieri Arrotondati

Ħafna effetti jQuery għal kantunieri ttundjati u ħafna aktar mudelli.

Kantunieri mdawra

15.

Tooltip eħfef u Preview tal-Immaġni Bl-użu ta 'jQuery

Ara 3 eżempji ta 'użu ta' skript ta 'preview tal-qlib ta' jQuery. Din l-iskrittura sempliċi tista 'tiġi applikata għal diversi skopijiet.

L-eħfef-tooltip-preview-billi tuża-jquery-image-styling-sfondi-dehra-ispirazzjoni-żid-shadow-fruntieri-jagħmlu-immaġini-jispikkaw

16.

Daqs kbir - Sfond ta 'Skrin sħiħ

Slideshow

jQuery Plugin

Superzided huwa plugin jQuery li jdaħħal id-daqs tal-immaġini biex jimla l-brawżer filwaqt li jżomm proporzjon tad-dimensjoni tal-immaġni u jiċċikla Stampi / sfondi permezz ta 'slideshow bi transizzjonijiet u preloading.

Sfond ta 'skrin sħiħ ta' daqs kbir - slideshow-jwuery-plugin-image-styling-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

17.

PNG Overlay

Qatt iltqajt mal-problema tal-ħolqien ta 'sit bi stampi mogħtija mill-klijent, biex issib aktar tard wara li jaġġornaw il-fotografija tagħhom id-dehra u s-sensazzjoni oriġinali ma tinżammx? Din is-soluzzjoni tinvolvi l-ħolqien ta 'kisja PNG trasparenti li tista' tintuża bħala maskra / qafas madwar JPEG jew GIF regolari. B'dan il-mod, installazzjoni tipika ta 'CMS tista' tiġi kkonfigurata sabiex l-utenti jkunu jistgħu jtellgħu ritratti mingħajr ma jkollhom għalfejn jinkwetaw dwar l-użu ta 'kwalunkwe programm grafiku biex japplikaw filtri.

Png-overlay-image-styling-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

18.

BeZoom

Piż ħafif

JQuery

Zoom Plugin

BeZoom hija alternattiva sempliċi u ħafifa għal JQZoom. Huwa eħfef u huwa aktar faċli biex tużah.

Bezoom-jquery-lightweight-zoom-plugin-image-styling-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

19.

Bl-użu ta 'jQuery għal Animazzjonijiet ta' Image ta 'Sfond

Ilgħab ma 'jQuery u ibdel il-pożizzjoni tal-immaġni tal-isfond biex toħloq it-tip ta' effett li qed tfittex. Hemm artikolu ġdid li jwieġeb il- "Kif nista 'nimmaniġġja stati attivi?" - Immaniġġjar ta 'Stat Attiv għal Sfondi Animati jQuery.

Bl-użu ta 'jquery-għall-animazzjonijiet ta' immaġni ta 'sfond-immaġni-stil-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

20.

5 Modi ta 'Ħwawar ix-Xbihat Tiegħek bis-CSS

Hawn huma ftit tricks sempliċi biex iżżid ftit togħma ma 'l-immaġini tipiċi tiegħek bland. L-użu tal-Photoshop għall-istil ta 'kull immaġni jista' jkun tedjanti u diffiċli biex tinżamm fit-tul. Dawn it-tekniki CSS li ġejjin jgħinuk ittaffi dak l-uġigħ.

Modi biex tħawwru l-immaġini tiegħek bl-isfond ta 'l-isfond ta' l-istampi ta 'l-immaġni-CSS-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

21.

Kif:

Daqs

Immaġni ta 'Sfond

Tgħallem kif twaqqaf immaġni tal-isfond li tista 'tiddawwar bis-CSS. Għandek 3 għażliet minn fejn tagħżel.

Kif tista 'terġa' tiddaħħal l-isfond ta 'l-isfond ta' l-immaġni ta 'l-isfond ta' l-isfond tad-dehra ta 'ispirazzjoni żid ix-xbieki tad-dell-tagħmel l-immaġini-jispikkaw

22.

Stilja l-Ħoloq tal-Immaġni Tiegħek

Li tħalli lill-utenti jkunu jafu li sezzjoni partikolari tal-websajt tagħna hija maħsuba biex tkun ikklikkjata fuqha tinkiseb l-aħjar permezz tal-mouse over effect Dawk it-taqsimiet "li jistgħu jiġu kklikkjati" ċertament jinkludu immaġini tal-kontenut. Image Link hija skript li jippermettilek tapplika grafika addizzjonali għall-links tal-immaġni tiegħek.

Stil-immaġni-tiegħek-links-immaġni-grafika-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

23.

Stampi ta 'Sfond Multipli ma' CSS

Kultant, jagħmel iktar sens li tuża stampi fl-isfond milli ddaħħalhom direttament fil-paġna. U filwaqt li kull element - bħall-lametta tal-ġisem tiegħek - jista 'jkollu immaġni waħda biss fl-isfond, dawn jistgħu jiġu applikati għal diversi elementi.

Immaġini ta 'sfond multipli-bi-CSS-immaġni-styling-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw

24.

Fruntieri tal-Immaġni bis-CSS

Tagħlim tassew faċli li jurik kif iżżid bord solidu ma 'immaġini billi tuża CSS.

Fruntieri tal-immaġni-bi-CSS-immaġni-stil-sfondi-dehra-ispirazzjoni-żid-fruntieri-dell-jagħmlu-immaġini-jispikkaw

25.

CSS Sprites mingħajr ma Jużaw Stampi fl-Isfond

Tgħallem kif tapplika l-effett tat-tluq mingħajr ħafna għarfien dwar CSS sprites.

Css-sprites-mingħajr-użu ta 'sfond-immaġini-immaġni-stil-sfondi-dehra-ispirazzjoni-żid-dell-fruntieri-jagħmlu-immaġini-jispikkaw


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

Kun l-ewwel li tikkummenta

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.