Archiv

Bilder

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