Hvordan lage Facebook-stil Påminnelser med CSS

Facebook bruker et par forskjellige typer meldinger, inkludert barer som pinne til bunnen av siden. Dette trikset er ikke vanskelig å implementere på ditt eget nettsted, men det vil ta ekstra koding utover CSS (Cascading Style Sheets) for å lage teksten for varslingene selv. Alt som trengs er noen enkle HTML for å lage boksen, styling av selve boksen, og deretter en eneste linje med CSS å gjøre boksen klebrig.

Bruksanvisning

1 Åpne websiden i Notepad eller en kode editor og bla ned til et sted over den avsluttende "</ body>" tag, fremfor noen "<script>" koder du kan finne der. Lag en div i HTML-koden og gi den en ID navnet på Legg til denne div en overskrift og ett avsnitt "varsling.":

<Div id = "notification">
<H3> Notification </ h3>
<P> Tekst for varsling går her. </ P>
</ Div>

2 Åpne stilark for ditt nettsted i Notepad eller en kode editor. På en ny linje, legg velgere for div, sin overskrift og avsnitt tekst:

gi beskjed {

}

varsle h3 {

}

varsle p {

}

3 Stil varselfeltet først. Hvis du ønsker å matche Facebook stil, bruk en hvit bakgrunn med en lys grå kant og gi den mørk grå tekst. Sett en bredde på boksen også:

gi beskjed {

bakgrunn: white;
color: # 555;
font-family: Arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
width: 200px;
}

4 Stil overskriften med hvit tekst på blå bakgrunn, deretter legge litt polstring. Du må også slå av marginene ved å sette dem til null:

varsle h3 {

bakgrunn: # 899ecb;
Farge: hvit;
font-size: 12px;
border-bottom: 1px solid # 6d8bc9;
padding: 5px 20px;
margin: 0;
}

5 Gi noen padding til avsnittet inne varslingen:

varsle p {

padding: 10px 20px;
}

Siden du allerede stylet skriftene for hele boksen inne i "#notify {}" stil regel, trenger du ikke å style dem i denne regelen.

6 Gå tilbake til "#notify {}" stil regelen og legg til litt posisjonering:

position: absolute;
bottom: 0;
høyre: 0;

Denne koden vil sette varslingsboksen nederst i høyre hjørne av nettleseren skjermen. Hvis du tester siden ut i en nettleser og forsøk på å rulle ned, vil boksen ikke holde seg til det hjørnet.

7 En linje med CSS-kode vil fikse boksen på plass:

stilling: fast;

Endre "absolutt" du brukte for posisjonering før til "faste". Nå boksen vil holde seg til det nederste hjørnet.

Hint

  • Veiledningen her dekker bare etableringen av varslingsboksen i CSS og ikke dekker animasjoner, oppdatere eller levere varslene. Prøv en jQuery script for noen animasjoner du ønsker og levere individuelle meldinger til brukerne gjennom en server-side script. PHP er et eksempel på en server-side skriptspråk.
  • "Position: faste" fungerer ikke i Internet Explorer 6, men det fungerer i versjon 7 og oppover.