Com crear Requadre Text CSS3
Moltes funcions noves i emocionants característiques estan pensats per CSS3. Avui anem a crear la prova requadre amb CSS3. Que la propietat donarà suport Firefox, Opera, Chrome i Safari. El requadre de text de text és que ha estat relegada a un segon pla, gairebé com un efecte de relleu invers. Espero que vostè trobarà una inspiració molt útil per al seu projecte de disseny que ve. Gràcies!
Aquesta propietat Text d'ombra no és compatible amb IE. Veure Demo
Faci'ns saber els seus pensaments? Si teniu altres tutorials que voleu compartir amb nosaltres, no dubti en fer-nos saber per caure en un comentari.
Exemple
Pas # 1 Estructura CSS
primer crear un simple codi Css
* ( ; padding: 0; margin: 0; ) body ( ; background: # 222; )# Container ( ; margin: 0 auto; ; background: # 333.333; ): # 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 de l'ombra: - 1px 1px 1px # 4A4947; font: 36px Arial Bold, Helvetica, sans-serif; margin: 0 0 0 0; padding: 0 0 10px 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: 0 0 10px 0; line-height: 162. 5%;)
Pas # 2 en HTML Estructura
Ara creem un simple codi Html
> <div id = "container"> <h2> Denominació </ h2> <p> Et ut ac sociis natoque muntanyes! Lundium Porta set, tempor ac porta, turpis partera. Ac, ut egestas eros, penatibus adipiscing seure partera mattis lacus, placerat. </ P> <p> Et ut ac sociis natoque muntanyes! Lundium Porta set, tempor ac porta, turpis partera. Ac, ut egestas eros, penatibus adipiscing seure partera mattis lacus, placerat. </ P> </ Div>
Veure demostració
Siga amb nosaltres en Twitter, o subscriure's als desenvolupadors de Paradís + RSS per als millors tutorials de desenvolupament web a la web.
Promoure Us
Articles relacionats:
Si heu gaudit llegint aquest article, si us plau, fes un cop d'ull a altres articles relacionats a continuació:
[Link d'usuari: Com crear Requadre Text CSS3] | Consells per a dissenyadors i desenvolupadors | Revista Tripwire diu el: 4 març 2010 a les 6:50 pm Said:
[...] Usuari Notícies Meebo if (typeof == 'undefined') (Meebo = function () ((Meebo._ = Meebo._ ||[]). push (arguments)); (function (q) ( var args = arguments; 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':")+'://'+(? etapa':")+' cim.meebo.com / CIM / cim.php? xarxa = '+ q.network; b.insertBefore (s, b.firstChild);)) ((xarxa: "tripwiremagazine_fu72bi'));) Com crear Requadre Text CSS3 [...]
Com crear Requadre Text CSS3 | OnlineSchoolofDesign.com diu el: 4 març 2010 a les 11:05 pm Said:
[...] A terme: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Siga amb nosaltres a Twitter les actualitzacions encara més! HOSTING PROMOGet de 35 especial % de descompte pel que és [...]
Erica | UPrinting diu el: 5 març 2010 a les 5:55 Said:
Mai vaig saber sobre això, des del meu coneixement de CSS són només els conceptes bàsics. Gràcies per compartir això, vaig a tractar d'assegurar-se això. Mirant cap al futur pel proper post!
Marek Stasikowski diu el: 5 març 2010 a les 1:44 pm Said:
Ho sentim, però realment no m'agrada la idea de duplicar el contingut en el marcatge. No hi ha millor que això, per exemple. JavaScript es basen.
120 + enorme col lecció d'articles frescos per a dissenyadors i desenvolupadors | Revista Tripwire diu el: 5 març 2010 a les 10:57 pm Said:
[...] Com crear Requadre Text CSS3 [...]
CSS Brigit | Com crear un Requadre Text CSS3 diu el: 6 març 2010 a les 12:11 am Said:
Com crear Requadre Text CSS3 ...
Moltes funcions noves i emocionants característiques estan pensats per CSS3. Avui anem a crear la prova requadre amb CSS3. ...