23
Jul
6
Jul
6
CSS och HTML meddelande boxar (uppdaterat med demo)
Tänkte skulle dela med mig enklare HTML och CSS uppsättning av meddelande boxar som kan användas i alla dina projekt. Använder dessa själv i olika webb eller app projekt med vissa modifieringar för att anpassa till ett viss tema eller profil. Dessa får användas utan några former av copyright rättigheter eller liknande. Hoppas du gillar dem!
HTML
<div class="success">This is a Success block</div> <div class="info">This is a Notification block</div> <div class="warning">This is a Warning block</div> <div class="error">This is a Error block</div>
CSS
/** CSS **/
.warning {
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
text-align: center;
font-weight:600;
border:1px solid #E6DB55;
margin:0 0 10px 0px;
padding:10px;
background: url(../images/warning.png) #FFFFE0 1% 50% no-repeat;
}
.success {
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
text-align: center;
font-weight:600;
border:1px solid #a9dc70;
margin:0 0 10px 0px;
padding:10px;
background: url(../images/success.png) #e4fbcb 1% 50% no-repeat;}
.error {
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
text-align: center;
font-weight:600;
border:1px solid #fdabae;
margin:0 0 10px 0px;
padding:10px;
background: url(../images/error.png) #ffdfe0 1% 50% no-repeat;
}
.info {
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
text-align: center;
font-weight:600;
border:1px solid #bad9f4;
margin:0 0 10px 0px;
padding:10px;
background: url(../images/info.png) #d5eafc 1% 50% no-repeat;
}
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Relaterade inlägg
Karl Laurentius Roos (July 23, 2011 at 14:48)
Kortare version:
.message{
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-align: center;
font-weight: 600;
border: 1px solid;
margin: 0 0 10px 0px;
padding: 10px;
}
.warning{
border-color #E6DB55;
background: url(../images/warning.png) #FFFFE0 1% 50% no-repeat;
}
.success{
border-color: #a9dc70;
background: url(../images/success.png) #e4fbcb 1% 50% no-repeat;
}
.error{
border-color: #fdabae;
background: url(../images/error.png) #ffdfe0 1% 50% no-repeat;
}
.info{
border-color: #bad9f4;
background: url(../images/info.png) #d5eafc 1% 50% no-repeat;
}
Sedan använder du den så här:
Woho!Santos (July 23, 2011 at 17:51)
Härliga boxar. Men varför inte spara lite kod genom att använda sig av dubbla klasser?
Exempel:
HTML:
This is a Success block
CSS:
.message {
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
text-align: center;
font-weight:600;
border:1px solid #E6DB55;
margin:0 0 10px 0px;
padding:10px;
background: url(../images/warning.png) #FFFFE0 1% 50% no-repeat;
}
.message.success {
border-color: #a9dc70;
background-image: url(../images/success.png);
}
Johan (July 24, 2011 at 09:39)
Tjena,
Jag tänkte skriva så först men nu finns möjligheten och plocka ut CSS’en lättare
Unity (July 30, 2011 at 12:06)
Short, sweet, to the point, FREE-exactly as inofrmaiton should be!
Zaylin (July 30, 2011 at 02:39)
Very true! Makes a chgane to see someone spell it out like that.