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.