CSS und die Eigenschaft “umreißen”
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 {
border: 1px solid #000000;
outline: 3px solid #6374AB;
width: 20em;
}
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:
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:
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:
0 Kommentare