Lag fancy-look call outs med lett CSS

Et nylig kalenderprosjekt inkluderte kravet om en samtale for bilder og ankerkobling som ville formatere innholdet med avstand, innrykk, justering, skriftstyling og plassering. Dette førte til at jeg opprettet et enkelt, men fancy call out / tool tip for å erstatte standard alternative (alt = "") eller title (title = "") attributter for bilde- og ankermerker. Det fantastiske med utropet er at det fungerer hvor som helst på siden og i omtrent hvilken som helst nettleser!

Hva er en samtale?

I webdesign språklig er en utrop lik en verktøytips som du finner i de fleste grafiske brukergrensesnitt (GUI) applikasjoner, som vanligvis vises når musen henger over ankerkoblinger som et tittelattributt, eller når musen henger over bilder med en alt- eller tittelattributt. Et eksempel på en typisk verktøytips i aksjon vises i figur A nedenfor fra verktøytipset Wiki. Faktisk er begrepene "call out" og "tooltip" virkelig synonyme; Jeg liker å bruke begrepet call out siden det mer nøyaktig gjenspeiler kvalitetene og historien til grafisk designballonger ... tenk tegneserier.

Figur A

Hvorfor lage en fancy CSS-stil utrop?

For enkle titler og alternativ tekst for bilder eller ankerkobling er standard verktøytipsen fin, men hva hvis du vil legge til et bilde eller mer detaljert tekstinnhold til utropet? Standard verktøytips gir deg ikke så mye å velge i for utseendet og alternativene. Har du noen gang sett en verktøytips som så ut som en løp på setning? Sjekk ut figur B nedenfor; dette er et eksempel på en uformatert standardverktøytips med altfor mye informasjon.

Figur B

En annen vurdering for å lage stilige samtaleutstyr inkluderer ytelsesbegrensninger for nettleserdisplay for standard verktøytips. Som du ser i figur B, utsetter skjermbildet fra Google Chrome en grense til 19 linjer med tekst, i IE 8 ble verktøytipset avskåret etter 9 linjer med tekst.

Nettleseraksept

Jeg har testet demonstrasjonswebsiden med utropskoden for denne opplæringen i følgende nettlesere med stor suksess:

  • Firefox 11.0
  • Google Chrome 23.0.1271.97 moh
  • Internet Explorer 8
  • Opera 12.5
  • Safari 5.1.5

HTML-koden

Utropene demonstrert i dette stykke-funksjonen for ankerkobling, bilder eller begge kombinert i en elementbeholder. Jeg prøvde å bruke side- og artikkelelementene, men disse er ikke anerkjent av IE 8, så jeg valgte å beholde elementene for nå. Hvis kunden din bruker en annen nettleser enn IE, kan du erstatte alle referanser til "div" i HTML og CSS-koden med "til side." Jeg tror det vil forbedre den semantiske markeringen for call outs eller verktøytips siden det anses som relatert, men løsrevet informasjon, til ankerkoblingen eller bildet.

Det grunnleggende

Hvert element som er assosiert med en samtale, må være inne i et ankermerke href = " # " class = "balloon" > med en klasse lik "ballong". For denne demonstrasjonen peker selve "href" på en dummy-kobling. Å klikke på lenken har ingen effekt. Jeg skal beskrive CSS-styling i den neste delen av artikkelen. Hvis varen er et bilde, må den kalles neste, og hvis varen er en ankerkobling, må den plasseres umiddelbart etter åpningens ankermerke. Begge grunnleggende eksempler på HTML-koden vises nedenfor.

Eksempel på ankerkobling

 Det fantastiske med utropet 
 Dette er den grunnleggende "Call Out" 
 Legg til en uordnet liste hvis du vil! 
  • en
  • b
  • c
  •  Merket du at listestilen er satt til ingen? 
     er at den fungerer hvor som helst på siden og i omtrent hvilken som helst nettleser! 

    Umiddelbart etter åpningen for anker taggen er teksten du vil bli forankret og koblet. Neste er åpningen, og umiddelbart etter er en bildekildeanrop til "pil.gif" -bildet med en klasse lik "pil". Etter det er det gjenværende innholdet i samtalen. Legg merke til at alt innhold som roper ut er inneholdt i åpnings- og lukkebeholderen. Etter lukkebeholderen er den lukkende ankeretiketten og deretter eventuelt gjenværende tekstinnhold som du kanskje vil legge til, i dette tilfellet, den resterende setningen.

    Den resulterende utgangen av koden over vises i Google Chrome versjon 23.0.1271.97 m i figur C nedenfor.

    Figur C

    Bildeeksempel

     CSS bare "Call Out" 
     Ingen jQuery eller JavaScript kreves! 

    Oppfordringen til et bilde starter på samme måte som for en ankerreferanselinking, med klassen lik "ballong" < a href = "#" class = "balloon "> Imidlertid må bildet som skal kobles til utropet umiddelbart følge etter åpningsankeret, som i eksemplet src = "img / Developer / 569 / create-fancy-look-call-outs-with-lightweight-css-4.gif" / > . Umiddelbart etter bildekoden er åpningen og lukkingen med innhold i forespørselskoden, etterfulgt av den lukkende ankerlappen .

    Bildeeksemplet vises i vist i Google Chrome versjon 23.0.1271.97 m i figur D nedenfor.

    Figur D

    CSS

    Nå som vi har HTML, la oss ta en titt på hvordan call outs opprettes og styles, og jeg vil fokusere på høydepunktene i koden som gjør at denne funksjonaliteten lykkes.

    Ballongen

    Alle anrop til CSS for ballongklassen starter med pseudoklasse på a.ballong, faktisk er den første CSS akkurat som vist nedenfor, med disposisjon og tekstdekorasjon satt til ingen, og farge satt til # 00F.

     a.balloon { 
      disposisjon : ingen ; 
      tekstdekorasjon : ingen ; 
      farge : # 00F ; 
     } 

    Den neste pseudoklassen er en .ballong sterk som setter en linjehøyde på 30 px, en fontfamilie av Candara, Tahoma og Geneva Sans Serif, med en skriftstørrelse på 1, 2 em, og et fargesett til # F06.

     a.ballong sterk { 
     linje-høyde: 30px; 
     font-family: Candara, Tahoma, Geneva, sans-serif; 
     skriftstørrelse: 1.2em; 
     font-vekt: fet; 
     } 

    Neste har jeg listet opp noen få pseudoklassevelgere for sveve og svevebilde med lignende effekter for tekstdekorasjon og tekstkontur, i tillegg til ramme- og fargeinnstillinger.

     a.balloon: hover { 
      tekstdekorasjon : ingen ; 
     tekst-disposisjon: ingen ; 
      farge : # F06 ; 
     } 
     a.balloon: hover img { 
      tekstdekorasjon : ingen ; 
     tekst-disposisjon: ingen ; 
      grense : ingen ; 
     } 

    Deretter har vi ankerballongbildestilen, som setter grensen til ingen og løser et problem med IE som viser grenser for bilder i et anker. Dette blir fulgt av ballong div-styling, og setter en z-indeks på 10 for å holde ballongvisningen over andre elementer på siden, display, marginer, en minimum breddeinnstilling på 275px, linjehøyde, grenseradius og kasseskyggeinnstillinger hos leverandør prefikser for moz og webkit, og en skriftstørrelse og familieinnstilling som vist nedenfor.

     a.balloon img { 
     grense: ingen; 
     } 
     a.balloon div { 
     z-indeks: 10; 
     skjerm: ingen; 
     polstring: 5px 5px; 
     margin-top: -30px; 
     margin-left: 10px; 
     min-bredde: 275px; 
     linjehøyde: 16px; 
     border-radius: 6px; 
     -moz-border-radius: 6px; 
     -webkit-border-radius: 6px; 
     -moz-box-skygge: 6px 6px 10px #CCC; 
     -webkit-box-skygge: 6px 6px 10px #CCC; 
     boksskygge: 6px 6px 10px #CCC; 
     font-family: Calibri, Tahoma, Geneva, sans-serif; 
     skriftstørrelse: .8em; 
     } 

    Neste er ballongpekeren div som setter skjermen i linje med en absolutt posisjon, farge, kant og bakgrunn. Nedenfor vises listeform for rammeoverføring, som setter listestilen til ingen.

     a.balloon: hover div { 
     skjerm: inline; 
     stilling: absolutt; 
     farge: # 111; 
     grense: 1px solid #DCA; 
     bakgrunn: # fffAF0; 
     } 
     a.balloon: hover li { 
     list-style: none; 
     } 

    Og til slutt er pilklassen satt med az-indeks tilsvarer 20 for å holde den over ballongen div-elementet med en absolutt posisjon, et toppsett til 30px, en kant på 0, en venstre tilsvarer -12px og en bakgrunnsfarge satt til gjennomsiktig som vist nedenfor.

     .pil{ 
     z-indeks: 20; 
     stilling: absolutt; 
     topp: 30px; 
     grense: 0; 
     venstre: -12px; 
     bakgrunnsfarge: gjennomsiktig; 
     } 

    Denne lette utropen som bare bruker CSS-styling, kan implementeres på omtrent hvilken som helst webside og lykkes på omtrent hvilken som helst nettleser. Noen av de spesifikke CSS-innstillingene må kanskje justeres for å passe til din egen applikasjon, men for det meste er dette en flott start på en enkel, men likevel effektiv og stilisert samtale eller verktøytips. Jeg vil undersøke noen mer avanserte alternativer for tilpassede utrop i et fremtidig segment.

    Index.html, styles.css og tilknyttede bilder kan lastes ned.

    © Copyright 2020 | mobilegn.com