Cookie

Vorsicht


Dieser Artikel wurde mehr als vor einem Jahr veröffentlicht, Es gab Entwicklungen können.
Bitte berücksichtigen Sie dies.

Wie viele wissen, die CSS3 noch nicht vollständig von den Browsern implementiert, wir nicht im ersten Teil dieses Tutorials dienen!. Bereits durch spezifische umgesetzt CSS2 war die Eigenschaft "umreißen". Lassen Sie uns ein Beispiel an:

p.test {
    Grenze: 1px solid #000000;
    umreißen: 3px solid #6374AB;
    Breite: 20in;
}

Diese wenigen Zeilen erfordern die Schaffung eines ein Pixel schwarzen Rand um den Absatz, und umreißen (esterno zum Ufer) Farbe "# 6374ab" von drei Pixeln. Er legt auch die Breite des Absatzes. Das Ergebnis ist der folgenden:

outline_css.jpg

Aber was sollen wir tun, wenn wir einen Umriss-Effekt auf die Konturen der Wörter benötigt? In diesem Fall sollten wir dienen der CSS3, die wie bereits erwähnt sind unvollständig und Umsetzung sind noch nicht Standard, aber da ist es nur eine optische Wirkung, die auf Text ist genug, um ein wenig Aufmerksamkeit zu geben, weil es um den Inhalt zu lesen weiter.

Die Technik hier unten ist vielleicht nicht die sein "Orthodox", aber sicher löst das Problem. Mit CSS3 können Sie einen oder mehr Schatten um Text zu erstellen, und sie schaffen wir acht verschiedene (alle Himmelsrichtungen und das Zwischenprodukt) würden wir das Problem gelöst haben. Un'ombra die nord, a Nordosten, einer Anzeige ist, usw.. Das folgende Bild ist eine kleine Erklärung, was ich erreichen möchte:

outline_lettera.jpg

Die einzige Regel angewendet werden soll "text-shadow", nur in der dritten Version von CSS.

p.outlined_text{
    font-size:20px;
    text-shadow:
    red 1px 1px 0px,
    red -1px -1px 0px,
    red 1px 0px 0px,
    red -1px 0px 0px,
    red 0px 1px 0px,
    red 0px -1px 0px,
    red 1px -1px 0px,
    red -1px 1px 0px;
}

Und das ist das Ergebnis:

outlined_text.jpg
  CSS: Immobilien "z-index"
Kategorien: GraphicsWeb

TheJoe

Ich halte diesen Blog als ein Hobby von 2009. Ich bin begeistert von Grafik, Technologie, Open Source Software. Unter meinen Artikel wird nicht schwierig sein, über die Musik finden, und einige persönliche Reflexionen, aber ich bevorzuge die direkte Linie des Blogs vor allem auf Technologie. Weitere Informationen Kontaktieren Sie mich.

0 Kommentare

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.