Wie Erstellen Inset Text mit CSS3
Viele spannende neue Funktionen und Features werden für CSS3 gedacht. Heute werden wir zum Einschub Test mit CSS3 schaffen. Diese Eigenschaft wird unterstützt Firefox, Opera, Chrome und Safari. Inset Wortlaut Text, in den Hintergrund gedrängt worden ist, fast wie ein umgekehrter Effekt geprägt. Ich hoffe, dass Sie eine ganz nützliche Anregungen für Ihren nächsten Design-Projekt zu finden. Vielen Dank!
Dieser Text Shadow-Eigenschaft wird nicht unterstützt von IE. View Demo
Teilen Sie uns Ihre Meinung? Wenn Sie finden alle anderen Tutorials, die Sie mit uns teilen, fühlen sich frei, lassen Sie uns wissen durch Fallenlassen in einem Kommentar.
Beispiel
Schritt # 1 CSS Struktur
Zuerst erstellen wir ein einfache CSS-Code
* ( ; padding: 0; margin: 0; ) body ( ; background: # 222; )# Container ( ; margin: 0 auto; ; Hintergrund: # 333333; ): # 000 ; text-shadow :- 1px 1px 1px #4A4947 ; font : 36px bold Arial, Helvetica, sans-serif ; margin : 0 0 0 0 ; padding : 0 0 10px 0 ; } h2 (color: # 000; text-shadow: - 1px 1px 1px # 4A4947; font: 36px fett Arial, Helvetica, sans-serif; margin: 0 0 0 0; padding: 10px 0 0 0;)1px 1px #4A4947 ; font :bold 18px Arial, Helvetica, sans-serif ; color : # 000 ; padding : 0 0 10px 0 ; line-height : 162 . 5 %; } p (text-shadow: - 1px 1px 1px # 4A4947; font: bold 18px Arial, Helvetica, sans-serif; color: # 000; padding: 10px 0 0 0; line-height: 162. 5%;)
Schritt # 2 HTML-Struktur
Jetzt erstellen wir einen einfachen HTML-Code
> <h2> Heading </h2> <p> Et ut ac sociis natoque montes! <Div id = "Container"> <h2> Überschrift </ h2> <p> Et ut ac sociis natoque montes! Porta lundium sed, tempor AC porta, Gebärende turpis. Ac, ut eros egestas, penatibus sitzen bibendum lacus Mattis Gebärenden, placerat. </ P> <p> Et ut ac sociis natoque montes! Porta lundium sed, tempor AC porta, Gebärende turpis. Ac, ut eros egestas, penatibus sitzen bibendum lacus Mattis Gebärenden, placerat. </ P> </ div>
Demo anzeigen
Folgen Sie uns auf Twitter , oder abonnieren Sie den Entwickler Paradise + RSS Feed für die besten Web-Entwicklung Tutorials im Web.
Fördern Sie uns
In Verbindung stehende Artikel:
Wenn Sie genossen diesen Artikel lesen, schauen Sie bitte andere Verwandte Artikel unter:
[User Link: Erstellen von Text mit CSS3 Inset] | Tips für Designer und Entwickler | Tripwire Magazin sagt am: 4. März 2010 um 18.50 Said:
[...] User News if (typeof Meebo == 'undefined') (Meebo = function () ((= Meebo._ Meebo._ ||[]). push (Argumente)); (function (q) ( var args = Argumente; if (! document.body) (return setTimeout (function () (args.callee.apply (this, args)), 100);) var d = document, b = d.body, m = b . insertBefore (d.createElement ('div'), b.firstChild); s = d.createElement ('script'); m.id = 'Meebo'; m.style.display = 'none'; m.innerHTML = "; s.src = 'http' + (q.https? 's':")+'://'+( q.stage?" stage-':")+' cim.meebo.com / CIM / cim.php? network = '+ q.network; b.insertBefore (s, b.firstChild);)) ((Netzwerk: "tripwiremagazine_fu72bi'));) Wie Erstellen Inset Text mit CSS3 [...]
Wie Erstellen Inset Text mit CSS3 | OnlineSchoolofDesign.com sagt am: 4. März 2010 um 11.05 Uhr Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Follow us on Twitter für noch mehr Updates! HOSTING PROMOGet eine spezielle 35 % Rabatt macht es [...]
Erica | UPrinting sagt am: 5. März 2010 um 05.55 Said:
Ich wusste nie über diese, da mein Wissen über CSS sind nur die Grundlagen. Thanks for sharing, werde ich sicher versuchen diese. Wir freuen uns für Ihren nächsten Post!
Marek Stasikowski sagt am: 5. März 2010 um 01.44 Said:
Sorry, aber ich weiß wirklich nicht, wie die Idee der Verdoppelung der Inhalte in der Auszeichnungssprache. Es ist besser, als dies zB. JavaScript basiert.
120 + Riesige Sammlung von Fresh Artikeln für Designer und Entwickler | Tripwire Magazin sagt am: 5. März 2010 um 10.57 Said:
[...] Wie Erstellen Inset Text mit CSS3 [...]
CSS Brigit | Erstellen Inset Text mit CSS3 auf, sagt: 6. März 2010 um 00.11 Said:
Wie Erstellen Inset Text mit CSS3 ...
Viele spannende neue Funktionen und Features werden für CSS3 gedacht. Heute werden wir zum Einschub Test mit CSS3 schaffen. ...