Comment faire pour créer les retraits de texte avec CSS3
Nombreuses et passionnantes nouvelles fonctions et fonctionnalités sont pensées pour CSS3. Aujourd'hui, nous allons créer le test en médaillon avec CSS3. Que la propriété soutiendra Firefox, Opera, Chrome et Safari. Retraits de texte en texte faisant ce qui a été reléguée au second plan, presque comme un effet de relief inversé. J'espère que vous trouverez une inspiration très utile pour votre prochain projet de conception. Merci!
Cette propriété Ombre du texte n'est pas supporté par IE. Voir la démo
Faites nous savoir vos pensées? Si vous avez trouvé tout autres tutoriels que vous voulez partager avec nous, n'hésitez pas à nous le faire savoir en laissant tomber dans un commentaire.
Exemple
Étape # 1 Css Structure
D'abord nous créons un simple code Css
* ( ; padding: 0; margin: 0; ) body ( ; background: # 222; )# container ( ; margin: 0 auto; ; background: # 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: bold 36px Arial, 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%;)
Étape # 2 Structure HTML
Nous allons maintenant créer un code HTML simple
> <div id = "container"> <h2> Intitulé </ h2> <p> Et ut ac sociis natoque montes! Porta lundium sed, tempor ac porta, turpis parturiente. Ac, ut egestas eros, penatibus adipiscing lacus sit mattis parturiente, placerat. </ p> <p> Et ut ac sociis natoque montes! Porta lundium sed, tempor ac porta, turpis parturiente. Ac, ut egestas eros, penatibus adipiscing lacus sit mattis parturiente, placerat. </ p> </ div>
Voir la démo
Suivez-nous sur Twitter, ou s'abonner au Paradis Developers + RSS Feed pour les didacticiels Web meilleur développement sur le Web.
Nous promouvoir
Articles connexes:
Si vous avez apprécié la lecture de cet article, s'il vous plaît consulter d'autres articles connexes ci-dessous:
[Lien d'utilisateur: Comment créer des retraits de texte avec CSS3] | Conseils aux concepteurs et développeurs | Magazine tripwire dit le: Mars 4th, 2010 at 6:50 pm Said:
[...] User Nouvelles 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.scrollHeight = 'none'; m.innerHTML = "; s.src = 'http' + (q.https? s':")+'://'+( q.stage?« phase-':")+' cim.meebo.com / cim / cim.php? réseau = '+ q.network; b.insertBefore (s, b.firstChild);)) ((réseau:' tripwiremagazine_fu72bi '));) Comment faire pour créer les retraits de texte avec CSS3 [...]
Comment faire pour créer les retraits de texte avec CSS3 | OnlineSchoolofDesign.com dit le: Mars 4th, 2010 at 11:05 pm Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Suivez-nous sur Twitter pour les mises à jour encore plus! HEBERGEMENT PROMOGet une spéciaux de 35 % de réduction ce qui en fait [...]
Erica | UPrinting dit le: Mars 5th mai 2010 à 5:55 Said:
Je n'ai jamais su ce sujet, étant donné que ma connaissance du CSS ne sont que les éléments de base. Merci de partager cela, je vais certainement essayer celui-là. Réjouissons de votre prochain poste!
Marek Stasikowski dit le: Mars 5th, 2010 à 1:44 pm Said:
Désolé, mais je n'aime pas vraiment l'idée de doubler le contenu dans le balisage. Il vaut mieux que cela, par exemple. JavaScript basés.
120 + Vaste collection de nouveaux articles pour les concepteurs et les développeurs | Magazine tripwire dit le: Mars 5th, 2010 à 10:57 PM Said:
[...] Comment faire pour créer les retraits de texte avec CSS3 [...]
CSS Brigit | Comment faire pour créer les retraits de texte avec CSS3 dit le: Mars 6th, 2010 à 12:11 am Said:
Comment faire pour créer les retraits de texte avec CSS3 ...
Nombreuses et passionnantes nouvelles fonctions et fonctionnalités sont pensées pour CSS3. Aujourd'hui, nous allons créer le test en médaillon avec CSS3. ...