Luo tyylikkään näköisiä soittoääniä kevyellä CSS: llä

Äskettäinen kalenteriprojekti sisälsi vaatimuksen kuvien ja ankkurilinkkien kutsusta, joka muotoisi sisällön välimatkan, sisennyksen, kohdistuksen, fontin muotoilun ja sijainnin avulla. Tämä johti minut luomaan yksinkertaisen, mutta hienon soittopyynnön / työkaluvihjeen korvaamaan oletusvaihtoehtoiset (alt = "") tai title (title = "") kuva- ja ankkuritunnisteiden attribuutit. Hämmästyttävä asia kutsussa on, että se toimii missä tahansa sivulla ja melkein missä tahansa selaimessa!

Mikä on kutsu?

Vernakulaarisessa verkkosuunnittelussa soittaminen on samankaltainen työkaluvihjeellä, joka löytyy useimmista graafisista käyttöliittymäsovelluksista (GUI), joka näkyy yleensä hiiren osoittaessa ankkurilinkkien, kuten otsikkomääritteen, tai kun hiiri siirtyy kuvan päälle alt- tai otsikkomääritteet. Esimerkki tyypillisestä toiminnassa olevasta työkaluvihjeestä on esitetty alla olevassa kuvassa A Tooltip Wikissä. Itse asiassa termit "call out" ja "tooltip" ovat todella synonyymejä; Haluan käyttää termiä " call out", koska se heijastaa tarkemmin graafisen suunnittelun ilmapallojen ominaisuuksia ja historiaa ... ajattele sarjakuvia.

Kuvio A

Miksi luoda hieno CSS-tyylinen kutsu?

Oletuksena on työkaluvihje yksinkertaisten kuvien tai ankkurilinkkien yksinkertaisissa nimikkeissä ja vaihtoehtoisessa tekstissä, mutta entä jos haluat lisätä kuvan tai yksityiskohtaisemman tekstisisällön puheluusi? Oletustyökaluvihje ei anna sinulle paljon valita ulkoasun ja ulkoasun suhteen. Oletko koskaan nähnyt työkaluvinkkiä, joka näytti lauseelta? Katso alla oleva kuva B ; Tämä on esimerkki alustamattomasta oletustyökaluvihjeestä, jossa on aivan liian paljon tietoa.

Kuvio B

Toinen näkökohta tyylillisten soittoäänien luomiseen sisältää selaimen näytön suorituskyvyn rajoitukset oletustyökaluvihjeelle. Kuten kuvasta B näet, Google Chromen näytönkaappaus asettaa rajan 19 tekstiriville, IE 8: ssa työkaluvinkki leikattiin 9 tekstirivin jälkeen.

Selaimen hyväksyntä

Olen testannut esittelyn verkkosivun hyödyntämällä tämän oppaan kutsukoodia seuraavilla selaimilla erittäin menestyksekkäästi:

  • Firefox 11.0
  • Google Chrome 23.0.1271.97 m
  • Internet Explorer 8
  • Ooppera 12.5
  • Safari 5.1.5

HTML-koodi

Tässä kappaleessa esitetyt soittoäänet ankkuroivat linkit, kuvat tai molemmat yhdistetään elementtisäiliöön. Yritin käyttää sivu- ja artikkelin elementtejä, mutta IE 8 ei tunnista niitä, joten päätin pitää elementit nyt. Jos asiakas käyttää jotain muuta selainta kuin IE, voit korvata kaikki viittaukset "div": iin HTML- ja CSS-koodissa "sivuun". Uskon, että se parantaisi kutsujen tai työkaluvihjeiden semanttista merkintää, koska sitä pidetään liittyvänä, mutta irrotettuna informaationa ankkurin yhdistämiseen tai kuvaan.

Perusteet

Jokaisen kutsuun liittyvän kohteen on oltava ankkuritunnisteessa href = " # " luokka = "ilmapallo" > luokan kanssa yhtä kuin "ilmapallo". Tätä demonstraatiota varten todellinen "href" osoittaa nuken linkin, linkin napsauttamisella ei ole vaikutusta. Kuvailen CSS-muotoilua artikkelin seuraavassa osassa. Jos esine on kuva, se on kutsuttava seuraavaksi, ja jos esine on ankkurilinkki, se on sijoitettava heti avautuvan ankkuritunnisteen jälkeen. Molemmat HTML-koodin perusesimerkit näkyvät alla.

Ankkurin kytkentäesimerkki

 Hämmästyttävä asia kutsussa 
 Tämä on perus "Soita" 
 Lisää järjestämätön luettelo, jos haluat! 
  • b
  • C
  •  Huomasitko, että luettelotyyliin ei ole asetettu mitään? 
     on, että se toimii missä tahansa sivulla ja melkein missä tahansa selaimessa! 

    Välittömästi seuraavan ankkuritunnisteen jälkeen on teksti, jonka haluat ankkuroida ja linkittää. Seuraava on aukko, ja heti sen jälkeen on kuvan lähdesoitto "nuoli.gif" -kuvaan luokan kanssa vastaavan "nuolen" kanssa. " Tämän jälkeen on jäljellä oleva puhelun sisältö. Huomaa, että kaikki kutsuvan sisällön sisältö on avautuvassa ja sulkevassa säiliössä. Sulkemisastian jälkeen on sulkeva ankkuritunniste ja sitten kaikki jäljellä oleva tekstisisältö, jonka haluat ehkä lisätä, tässä tapauksessa jäljellä olevan virkkeen.

    Tuloksena oleva yllä olevan koodin tuloste näkyy Google Chromen versiossa 23.0.1271.97 m alla olevassa kuvassa C.

    Kuvio C

    Kuvaesimerkki

     Vain CSS "Soita" 
     Ei jQuery tai JavaScriptiä tarvita! 

    Kuvan kutsuminen alkaa samalla tavalla kuin ankkuriviittauslinkkien kanssa, luokan ollessa yhtä suuri kuin "ilmapallo" < a href = "#" class = "balloon ">, kutsuun liitettävän kuvan on kuitenkin seurattava heti avautuvan ankkurin jälkeen, kuten esimerkissä src = "img / kehittäjä / 569 / luo-tyylikäs-näköinen-kutsu-ulos-kevyt-css-4.gif" / > . Heti kuvakoodin jälkeen avaaminen ja sulkeminen on huomioteksti-koodilla, jota seuraa sulkeva ankkuritunniste .

    Kuvaesimerkki näkyy Google Chromen versiossa 23.0.1271.97 m alla olevassa kuvassa D.

    Kuvio D

    CSS

    Nyt kun meillä on HTML-koodi, katsotaanpa kuinka soittoäänet luodaan ja muotoillaan, ja keskityn koodin kohokohtiin, jotka tekevät tästä toiminnasta onnistuneen.

    Ilmapallo

    Kaikki kutsut ilmapallo-luokan CSS: ään alkaa pseudoluokalla a.ballo. Itse asiassa ensimmäinen CSS on juuri alla esitetyllä tavalla, ääriviivat ja tekstikoristeet asetettu tyhjiin ja väri asetettu arvoon # 00F.

     a.pallo { 
      ääriviivat : ei mitään ; 
      tekstikoriste : ei mitään ; 
      väri : # 00F ; 
     } 

    Seuraava pseudoluokka on .pallonvahva, joka asettaa viivankorkeudeksi 30px, Candaran, Tahoman ja Geneve Sans Serif -kirjasinperheen fontti fonttikoko 1, 2em ja väri asetettu # F06.

     a.pallo vahva { 
     line-height: 30px; 
     kirjasinperhe: Candara, Tahoma, Geneve, sans-serif; 
     kirjasinkoko: 1, 2em; 
     kirjasinpaino: lihavoitu; 
     } 

    Seuraavaksi olen luetellut muutamia näennäisluokan valitsimia hover- ja hover-kuville, joilla on samanlaisia ​​tehosteita tekstin koristeluun ja tekstin ääriviivaan, reuna- ja väriasetuksien lisäksi.

     a.ballo: leiju { 
      tekstikoriste : ei mitään ; 
     tekstin ääriviivat: ei mitään ; 
      väri : # F06 ; 
     } 
     a.pallo: hover img { 
      tekstikoriste : ei mitään ; 
     tekstin ääriviivat: ei mitään ; 
      raja : ei mitään ; 
     } 

    Seuraavaksi meillä on ankkuripallokuvatyyli, joka asettaa reunan tyhjäksi ja korjaa ongelman, kun IE näyttää ankkurissa olevien kuvien reunat. Tätä seuraa ilmapallojaon muotoilu, asettamalla z-indeksi 10 pitämään ilmapallonäyttö muiden sivun elementtien yläpuolella, näyttö, marginaalit, vähimmäisleveysasetus 275 kuvapistettä, viivan korkeus, reunan säde ja laatikon varjoasetukset myyjän kanssa etuliitteet mozille ja webkitille sekä fonttikoko ja perheasetukset alla esitetyllä tavalla.

     a.balloon img { 
     raja: ei mitään; 
     } 
     a.balloon div { 
     z-indeksi: 10; 
     näyttö: ei mitään; 
     täyte: 5xx5x; 
     marginaalin yläosa: -30 pikseliä; 
     marginaali-vasen: 10px; 
     min-leveys: 275px; 
     linjan korkeus: 16 kuvapistettä; 
     raja-säde: 6px; 
     -moz-raja-säde: 6px; 
     -verkkosivun raja-säde: 6px; 
     -moz-box-varjo: 6px 6px 10px #CCC; 
     -Webkit-box-shadow: 6px 6px 10px #CCC; 
     laatikko-varjo: 6px 6px 10px #CCC; 
     kirjasinperhe: Calibri, Tahoma, Geneve, sans-serif; 
     kirjasinkoko: .8em; 
     } 

    Seuraavaksi on ilmapalloja, jotka asettavat näytön linjaan absoluuttisen sijainnin, värin, reunuksen ja taustan kanssa. Reunan leijutusluettelotyyli, joka asettaa luettelotyylin olemattomaksi, näkyy myös alla.

     a.pallo: hover div { 
     näyttö: inline; 
     asema: ehdoton; 
     väri: # 111; 
     reuna: 1px kiinteä #DCA; 
     tausta: # fffAF0; 
     } 
     a.pallo: hover li { 
     list-style: none; 
     } 

    Ja lopuksi nuoliluokka asetetaan ats-indeksillä, joka on yhtä suuri kuin 20 pitämään sen ilmapallo-div-elementin yläpuolella absoluuttisen sijainnin kanssa, yläasento 30 px: ssä, raja 0, vasen yhtä suuri kuin -12 pikseliä ja väritausta asetettu arvoon läpinäkyvä alla esitetyllä tavalla.

     .nuoli{ 
     z-indeksi: 20; 
     asema: ehdoton; 
     yläosa: 30xx; 
     reuna: 0; 
     vasen: -12px; 
     taustaväri: läpinäkyvä; 
     } 

    Tämä vain CSS-muotoilua hyödyntävä kevyt kutsu voidaan toteuttaa melkein millä tahansa verkkosivulla ja onnistuu melkein missä tahansa selaimessa. Jotkut CSS-asetukset on ehkä tarkistettava sopimaan omaan sovellukseesi, mutta suurin osa tästä on loistava alku yksinkertaiselle, mutta tehokkaalle ja tyylitellylle soitolle tai työkaluvihjeelle. Aion tutkia joitain edistyneempiä vaihtoehtoja mukautettujen puheluiden soittamiseksi tulevassa segmentissä.

    Index.html, styles.css ja niihin liittyvät kuvat ovat ladattavissa.

    © Copyright 2021 | mobilegn.com