Hvordan lage CSS-tilpassede utrop

Dette er en fortsettelse av et nylig innlegg, "Create fancy-look call outs with lightweight CSS, " som ble inspirert av et nylig kalenderprosjekt som inkluderte et krav om en samtale for både bilder og ankerkobling som ville formatere innholdet med avstand, innrykk, justering, fontstyling og plassering. Dette førte til at jeg opprettet et enkelt, men likevel fancy call out / verktøytips for å erstatte standard alternative (alt = "") eller title (title = "") attributter for bilde- og ankermerker. Det overraskende med denne og den lette utropen er at den fungerer hvor som helst på siden og i omtrent hvilken som helst nettleser!

En merknad ved bruk av denne typen CSS-funksjonalitet er at den setter begrensninger for den semantiske markeringen i koden og gir også utfordringer for tilgjengeligheten, spesielt for skjermlesere. Vær oppmerksom når du bruker disse teknikkene i koden din, og prøv alltid endringene før du bruker dem i produksjonsmiljøet.

For denne opplæringen vil jeg gjennomgå å lage tilpassede utrop basert på innholdsnivåer av betydning og alvorlighetsgrad, samt noen få for sosiale nettverk. De tilpassede avropene bruker også flere ikoner for bildetekst-filtype, inkludert kategoriene kritiske, hjelp, informasjon og advarsler og sosiale medieikoner som Facebook og Twitter.

Nettleseraksept

Demonstrasjonswebsiden som bruker utkallingskoden for denne opplæringen, er testet i følgende nettlesere med stor suksess. De eneste unntakene er flere CSS3-egenskaper i IE8:

  • Firefox 11.0
  • Google Chrome 23.0.1271.97 moh
  • Internet Explorer 8 (Borderadius og skyggekasse støttes ikke)
  • Opera 12.5
  • Safari 5.1.5

HTML-koden

HTML-en er ganske lik utropene i forrige veiledning, med unntak av at verktøytipsdelen er eliminert og erstattet med de tilpassede ikonbildene. Nedenfor finner du eksemplet på HTML-kodestykket for "kritisk" -utrop:

Kritisk

Dette er et eksempel på et kritisk

 Dette er den tilpassede "Critical Call Out" 
 Plasser din "kritiske" melding her! 
 tilpasset utrop.

Grunnleggende HTML for hver utrop starter med ankeret med en klasse tilsvarer "ballong", opprettholder utrop ballongstruktur og styling som i forrige demonstrasjon. Href = "#" er en dummy-kobling bare for demonstrasjonsformål. Merket har en klasse som tilsvarer "kritisk" som angir bakgrunnsfarge og kantlinje for utropsballongen, etterfulgt av ikonbildet "Kritisk", utropet tekstinnhold følger, og deretter blir lukkingen inneholdt den lukkende ankeretiketten . Den resulterende utrop vises i figur A nedenfor som vist i Chrome versjon 23.0.1271.97 m.

Figur A

Og det sosiale nettverket "Facebook" -eksempelet vises nedenfor i figur B som vist i Chrome versjon 23.0.1271.97 m.

Figur B

Den gjenværende HTML for hver forekomst i demonstrasjonen erstatter spanklassen med den respektive tilpassede utropstilen, dvs. klasse = "hjelp" for "Hjelp" -utropet, og så videre.

Ikonbildene

Som nevnt ovenfor, blir hvert utropsikon kalt umiddelbart etter åpningskoden. De seks bildefilnavnene i denne demonstrasjonen er critical.png, facebook.png, help.png, information.png, twitter.png og warning.png . De vises sammen i figur C nedenfor.

Figur C

CSS

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

Hovedfunksjonaliteten til ballongstiler ble gjennomgått i forrige stykke, så i dette segmentet vil jeg fremheve de tilpassede stilene. Hver tilpassede utrop har sin egen bakgrunnsfarge stilisert for å representere det respektive innholdet og kantene er alle satt til 1xx solid med sine respektive farger. CSS-kodebiten vises nedenfor. Legg merke til at stilene "hjelp" og "informasjon" opprettholder de samme bakgrunnsfarge- og kantinnstillingene:

 / ** Tilpassede anrop ** / 
 .vanlig { 
 bakgrunn: # fffAF0; 
 grense: 1px solid #DCA; 
 } 
 .kritisk { 
 bakgrunn: # e39595; 
 kant: 1px solid # a40a0a; 
 } 
 .hjelp { 
 bakgrunn: # b3e2f2; 
 grense: 1px solid # 133b95; 
 } 
 .informasjon { 
 bakgrunn: # b3e2f2; 
 grense: 1px solid # 133b95; 
 } 
 .varsling { 
 bakgrunn: # f6f6b9; 
 grense: 1px solid # e0a50b; 
 } 
 .facebook { 
 bakgrunn: # b2bed6; 
 border: 1px solid # 001857; 
 } 
 .twitter { 
 bakgrunn: # a8e1f9; 
 grense: 1px solid # 155875; 
 } 

Et ekstra sett med styling ble lagt til for ballongbildet som er satt til en kant og ingen kant, med en margin på -22 øverst og -26 til venstre, en polstring på 5, tekstdekorasjon satt til ingen og tekstkontur satt til ingen .

 .ballong img { 
 grense: ingen; 
 } 
 .ballong: hover img { 
 grense: 0; 
 margin: -22px 0 0 -26px; 
 flyte: venstre; 
 polstring: 5px; 
 tekstdekorasjon: ingen; 
 tekst-disposisjon: ingen; 
 grense: ingen; 
 } 

Ballongspenn-stilene ble endret litt for å opprette ballongutrop for å vises under lenken med følgende CSS:

 .ballongspenn { 
 z-indeks: 99; 
 skjerm: ingen; 
 polstring: 5px 5px; 
 margin-top: 42px; 
 margin-venstre: -35px; 
 stilling: absolutt; 
 min-bredde: 316px; 
 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; 
 } 

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 tilpasset utrop eller verktøytips. Bare husk at hvis nettstedene dine har spesifikke semantiske, brukervennlige og tilgjengelighetskrav, kan det hende at noe av funksjonaliteten i denne demonstrasjonen ikke er tilgjengelig for noen skjermlesere eller nyttig for alternativ tekstatferd.

De resterende fire demonstrerte utropsballongene er vist i figur D nedenfor som vist i Chrome versjon 23.0.1271.97 m:

Figur D

Du kan laste ned index.html, styles.css og tilknyttede bilder her.

© Copyright 2021 | pepebotifarra.com