Forum - [CSS] "Nachrichten Boxen"

Nicht eingeloggt

Registrieren

Forum / Tutorials / [CSS] "Nachrichten Boxen"

Beitrag schreiben

goeran
Ehrenmitglied

- 02.05.10 14:55 Uhr

Diese Boxen benutze ich auf meiner Webseite, www.goeran-eidens.de, um Informationen, Fehler oder Sonstiges, schön und leserlich zu kennzeichnen.

Benutzt sie doch auch !

Der Code: (unten gibt es die Live Demo und den Download)

css/message_boxen.css :

Spoiler: Anzeigen

Code:


/*message box start*/

.fave_css, .home_css, .idea_css, .author_css, .rss_css, .pen_css, .tooledit_css, .alert_css, .comment_css, .lock_css, .book_css {

border: 1px solid

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

}

.fave_css {

color: #00529B;

background-color: #BDE5F8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/heart_32.png);



}

.home_css {

color: #4F8A10;

background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image:url(images/home_32.png);

}

.idea_css {

color: #9F6000;

background-color: #FEEFB3; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/lightbulb_32.png);

}

.author_css {

color: #2E2D2D;

background-color: #A1C2C7; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/user_32.png);

}

.rss_css {

color: #4F8A10;

background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image:url(images/rss_32.png);

}

.pen_css {

color: #2E2D2D;

background-color: #C8E0C8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/pencil_32.png);

}

.tooledit_css {

color: #554529;

background-color: #F1C983; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/tools_32.png);

}

.alert_css {

color: #2E2D2D;

background-color: #D25F66; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/warning_32.png);

}

.comment_css {

color: #2E2D2D;

background-color: #A6C8D2; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/comment_user_32.png);

}

.lock_css {

color: #2E2D2D;

background-color: #FFBABA; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/lock_32.png);

}

.book_css {

color: #4F8A10;

background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image:url(images/address_book_32.png);

}

/*message box ende*/

index.html :

Spoiler: Anzeigen

Demo | Download

PS: Die Icons habe ich nicht erstellt.
Die habe ich gefunden, weiß aber den Namen nicht mehr.
Wenn ihn jemand weiß, sagt ihn mir bitte.

Edit: Das Iconset nennt sich "Woothemes Iconset".
Danke an iSn0w ;)

Der Eintrag wurde am 02.05.10 15:04 Uhr von goeran geändert.

Patrick_W
Administrator

- 02.05.10 15:17 Uhr

Super Eintrag

Message-Boxen kann man immer gut gebrauchen...

goeran
Ehrenmitglied

- 02.05.10 15:31 Uhr

Danke, Pro1.

How to: Neue Box erstellen.

Zuerst einmal, suchen wir uns einen Namen aus.
Nehmen wir hier einfach mal den

Code:


.search_css

Fügt dieses Code vor

Code:


.fave_css

ein und trennt beide mit einem Komma.

Nun fangen wir an, unsere Box zu gestalten.

Folgenden CSS Code fügt ihr vor dem

Code:


.fave_css {

color: #00529B;

background-color: #BDE5F8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/heart_32.png);



}

ein:

Code:


.search_css {

color: #ffffff;

background-color: #000000; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

background-image: url(images/search_32.png);



}

Ändert die Farben (color und backround-color) nach euren Wünschen.
Das Icon (search_32.png) und noch viele mehr, findet ihr
hier.

Viel Spaß, damit !

goeran
Ehrenmitglied

- 02.05.10 15:33 Uhr

Anzeigen lassen, tut sich das ganze, so:

<div class="search_css">
Ich bin eine Suche. Ich könnte ein Textfeld und einen Submit Button mit Action gebrauchen ;)</div>

Ti-Systems
Ehrenmitglied

- 02.05.10 16:06 Uhr

Hallo,

Ist zwar nichts weltbewegendes (vielleicht ja für ein paar schon :roll

, aber dennoch "Danke", dass du dir die Zeit genommen hast, diesen Eintrag zu schreiben ;)

mfg Timo

goeran
Ehrenmitglied

- 02.05.10 16:14 Uhr

Ja, weltbewegend ist es nicht.
Aber bestimmt irgendwas anderes.

Vielleicht hilfreich.

Beitrag schreiben