Archiv

Archiv für den Monat März 2012

@font-face {
font-family: ‚Webfontr‘;
src: url(‚webfont.eot‘);
src: url(webfonts.eot?#iefix‘) format(‚embedded-opentype‘),
url(‚webfont.woff‘) format(‚woff‘),
url(‚webfont.ttf‘) format(‚truetype‘),
url(‚webfont.svg#Webfontr‘) format(’svg‘);
font-weight: normal;
font-style: normal;
}

background-image: url(‚../img/kreis.png‘), url(‚../img/quadrat.png‘), url(‚../img/dreieck.png‘);
background-position: top left, top right, bottom center;

/* Firefox */
-moz-column-count: 3;
-moz-column-width: 140px;
-moz-column-gap: 20px;

/* Chrome, Safari */
-webkit-column-count: 3;
-webkit-column-width: 140px;
-webkit-column-gap: 20px;

column-count: 3;
column-width: 140px;
column-gap: 20px;


Text


tr:nth-child(2n) { color: #C0C0C0 };

tr:nth-child(2n) {
background: #C7C7C7;
color: #000000;
}


23%

Um Texte, wie z.B. Links oder Überschriften vom Hintergrund eindrucksvoll abzuheben, kann man Ihr auch mit CSS einen Schein nach außen verleihen

Die Schrift bekommt einen Schein nach außen. Damit dieser deutlicher wird, ist noch die graue Hintergrundfarbe eingefügt.

Schattenspiel: Schein nach außen


<span style=“text-shadow:1px 1px 1px #EECAAE;background-color:black;“>Schattenspiel: Schein nach außen</span>

weiteres gibt es hier:

http://www.webmasterpro.de/coding/article/css3-buttons-erstellen.html

Man kann diesen Schatten mit CSS3 auch auf einen Block, einen DIV- Container anwenden

-moz-box-shadow: 8px 8px 4px black;
-khtml-box-shadow: 8px 8px 4px black;
-webkit-box-shadow: 8px 8px 4px black;

Schatten oder Schein nach außen für Schriften

Um Texte, wie z.B. Links oder Überschriften vom Hintergrund eindrucksvoll abzuheben, kann man Ihr auch mit CSS einen Schein nach außen verleihen

Schattenspiel: Schein nach außen

<h1><span style=“text-shadow:0 1px 1px #EECAAE;background-color:grey;“>Schattenspiel: Schein nach außen</span></h1>

Die Schrift bekommt einen Schein nach außen. Damit dieser deutlicher wird, ist noch die graue Hintergrundfarbe eingefügt.

http://www.selfhtml5.org/2012-css3/10-praktische-css3-div-boxen-designs/

Spieltest mit Pfeil, Perspektive

erster Test

zweiter Test

<div style=“
position: relative;
height:0px;
width:0px;
left: 35px;
top: 75px;
border-style:solid;
border-width:100px;
border-color: transparent #8f191c transparent transparent;
z-index: -1;“>erster Test</div>

<div style=“
position: relative;
height:100px;
width:0px;
left: 35px;
top: 75px;
border-style:solid;
border-width:100px;
border-color: transparent #8f191c transparent transparent;
z-index: -1;padding:5em;“>zweiter Test</div>

Auf dem folgendem Link werden fertige CSS Datei zum ansehen und downloaden angeboten.

Super, zum testen, wenn man zb Beispiel eine neue Funktion mit XML ausprobieren will und einfach schnell eine gute CSS datei braucht.

Bei mir geht es heute um das Spry aus Dreamweaver.

Daher vielen Dank an web-toolbox:

http://www.web-toolbox.net/webtoolbox/download/css-externe-dateien.html

Fertige Icons von Icondock

Eine Webseite mit kleinen Bildern zu bestücken, die zum Beispiel die Richtung als Pfeilgrafik anweisen, macht nicht nur Spass, sondern sieht auch klasse aus.

Grade, wenn man vor hat eine größer Seite zu erstellen und dahinter ein kommerzieller Charakter steht, macht es sinn, sich für ein Set zu entscheiden. Das garantiert einem in der Auswahl der Icons eine klare Line und hilft damit den CB zu unterstützen.

Für ein einzelnes Icon kann man sich hier aber auch für nur 1€ entscheiden.

http://icondock.com