no.hideout-lastation.com
Paradis For Designere Og Utviklere


Legg til Margin Hover Text til noen nettsteder enkelt med Marginotes

Inline verktøytips er fantastiske, men noen ganger passer de ikke bra med bestemt innhold. De fleste nettsteder gir plass i marginene langs sidekroppen, og dette er perfekt for å legge til verktøytipsformat uten verktøytips .

Skriv inn Marginotes, en gratis åpen kildekode jQuery-plugin som legger til egendefinerte notater i margene på websiden din. Du kan bytte disse notatene basert på koblinger eller enkelte elementer på siden, for eksempel bilder.

Dette pluginet er overraskende enkelt å sette opp, og det leveres med standard stilark for marginalnotene dine. Disse vises til siden av innholdet ditt, og de justeres rett ved siden av avsnittet elementet på nettsiden din.

Hover-notatene legges manuelt til HTML-elementene dine, ved hjelp av et desc attributt . Jeg har aldri sett dette i HTML5, så jeg kan ikke si om det er fullt kompatibelt. Men det blir hentet av JavaScript som er alt du virkelig trenger.

Du kan også endre dette attributtet når du kjører marginotes() -funksjonen, slik at du kan endre den til noe som data-desc hvis du ønsker å være mer kompatibel.

Her er den ene linjen av jQuery som trengs for å få dette pluginet til å fungere:

 $ ( "Velgeren"). Marginotes () 

Du bør erstatte "selector" med hvilke elementer du målretter mot. Så, hvis de er inne i ".body span" din, kan du bruke ".body span" . Du kan også målrette ankerforbindelser eller av bestemte klasser som er lagt til disse elementene.

Innenfor marginotes() -funksjonen kan du legge til to valgfrie parametere for å endre marginalnotatformatet:

  1. width - setter notatbredden (standard til 100px)
  2. field - angir HTML-innholdsattributtet (standard til "desc" )

Også, hvis du ikke liker å bruke jQuery, kan du prøve Vanilje Marginotes-plugin . Den kjører på vanilje JS, så du har null avhengigheter for å få alle de samme funksjonene.

Du kan også sjekke ut denne live-demoen hvis du vil se den i aksjon. Dette er definitivt et unikt plugin, og det er en fin måte å legge til litt ekstra innhold på nettstedet ditt.

Slik legger du til miniatyrbilder til WordPress Kategorier og Tags

Slik legger du til miniatyrbilder til WordPress Kategorier og Tags

Noen ganger ser et WordPress-nettsted mye bedre ut hvis vi kunne vise et bilde ved siden av kategorier eller koder. For eksempel kan vi legge til et bilde om CSS i kategorien "CSS" eller HTML5-logoen i kategorien "HTML" (som vist nedenfor).Tilbake i versjon 2.9, har WordPress lagt til muligheten til å legge til en bildeminne (senere omdøpt bilde ) for innlegg, side og tilpasset posttype.

(Tekniske og design tips)

30 papirdesigner

30 papirdesigner

Designere amaze oss med deres talent og kreativitet når vi ser ulike logoer, destinasjonssider og bannere. Imidlertid kan vi være dobbelt imponert når de dabler i uvanlige kunstformer som gatekunst eller ved å leke med papir, som origami. Men man bør ikke undervurdere papir, eller hvor utrolig talentfulle noen artister kan være .I dag

(Tekniske og design tips)