Archiv

CSS3

@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/

Ab CSS 3

Code-Beispiel für border-radius:

div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}

Aufruf der o.g. Stylsheetangabe Rahmen mit abgerundeten Ecken:

Beispiel 1 div1

<div class="div1">Inhalt </div>

Beispiel 2 div2

<div class="div2">Inhalt</div>

Browser

Alle Browser, die das -moz- oder khtml-prefix nicht unterstützen, zeigen normale eckige Rahmen an, deshalb ist der Einsatz kein Problem.

Beispiel1

Code Beispiel des Elementes (Divs) mit dem grauem Rand für die CSS Angabe im Blockelement, ohne die .CSS von WordPress zu verändern. Gesetzt:“was zu letzt steht gilt“

< div style=“border:6px solid #aaaaaa;left:1.2em;top:30px;-moz-border-radius:10px;-khtml-border-radius:30px;“>Beispiel1 < /div >

Die folgenden Eigenschaften lassen Netscape ab Version 6, Mozilla und Firefox abgerundete Ecken darstellen. Dabei steht 1.für alle vier Ecken, die anderen entsprechend für oben links, oben rechts, unten links und unten rechts

Für Mozilla  (Gecko)

-moz-border-radius

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomrigh

CSS3

border-radius

  • border-top-left-radius
  • border-top-right-radius

Webkit

-webkit-border-radius

  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius

Konqueror und Safari

-khtml-border-radius

  • -khtml-border-radius-topleft
  • -khtml-border-radius-topright
Beispiel2 runde Ecken

Code Beispiel des grünen Elementes (Divs) für die CSS Angabe im Blockelement, ohne die .CSS von WordPress zu verändern. Gesetzt:“was zu letzt steht gilt“

< div style=“border: 3px solid #aaaaaa; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: absolute; width: 100px; height: 200px; background-color: #058020; top: 140px; left: 450px; padding: 10px;“>Beispiel2 runde Ecken < /div >

Hier kann man sich den Borderradius online anzeigen lassen: http://border-radius.com/

Hier gibt es Informationen zum erstgenanntem ausgelagertem CSS http://www.css4you.de/trickkiste/tr00012.html

Bilder Skalieren mit Yaml

Wie können bei der Vergrößerung im Browser die Bilder mit skaliert werden?
In den verschiedenen Templates funktioniert das dank CSS, und dem em ja fantastisch- nur die Bilder aus dem Hintergrund oder dem Header setzen sich beim Zoomen sehr unschön ab.
Hier versuche ich das Problem anzugehen:

HTML-Code:
< blockquote style=“width: 90%; height: 90%;“< ein Lösung aus Yaaml CSS Layout (2008) &gt:/blockquote<
ob sich die Bilder auch wie bei den Schriften mit dem tollen „em“ vergrößeren lassen werde ich mal ausprobieren. Morgen.

Date: 26.02.2011 | Bilder | Plattform übergreifend | Browser Lupe

So heute aber noch mal:

Abendhimmel

Ergebnis: Für das Block- Element Artikel und die Seiten im Frontend geht es nicht. Hier ist bereits vererbte Skalierung in Kraft getreten.

Dies kann daher nur im Backend auch für andere Bereiche eingestellt werden

Nur noch mal das Bild normal eingefügt

Abendhimmel