API tools faq
paste
Advertisement
decembre

CSS - TEXT - V.1

decembre
May 8th, 2016
307
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 45.75 KB | None | 0 0
raw download clone embed print report
  1.  
  2. ============================
  3. ========  CSS - TEXT - V.1
  4. ============================
  5. ============================
  6. ======== TEST CODE
  7. .style-brief-text>p {
  8.     letter-spacing: 3px !important;
  9.     overflow: hidden !important;
  10.     overflow-y: auto !important;
  11. /*    word-wrap: break-word !important;*/
  12. /*    white-space: pre !important;*/
  13. /*    white-space: pre-wrap !important;*/
  14.     white-space: pre-line !important;
  15. /*    -moz-hyphens: auto !important;*/
  16. /*    text-indent: -150px !important;*/
  17.     text-shadow: none !important;
  18. }
  19.  
  20.  
  21. ============================
  22. ========== TEXTE - PLACEHOLDER Text - ::placeholder - NEED VENDOR PREFIX ? (2010)
  23. == http://caniuse.com/#feat=css-placeholder
  24. ==========  CSS pseudo-element
  25.  To style it, you'll need vendor prefix CSS properties.
  26.  
  27. ::-webkit-input-placeholder {
  28.   color: red;
  29. }
  30.  
  31. :-moz-placeholder { /* Firefox 18- */
  32.   color: red;  
  33. }
  34.  
  35. ::-moz-placeholder {  /* Firefox 19+ */
  36.   color: red;  
  37. }
  38.  
  39. :-ms-input-placeholder {  
  40.   color: red;  
  41. }
  42.  
  43. ============================
  44. ========== TEXTE - text-align
  45. = https://css-tricks.com/almanac/properties/t/text-align/
  46. == https://css-tricks.com/almanac/properties/t/text-align/
  47. text-align:
  48.    left - The default value. Content aligns along the left side.
  49.    right - Content aligns along the right side.
  50.    center - Content centers between the left and right edges. White space on the left and right sides of each line should be equal.
  51.    justify - Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.
  52.    inherit - The value will be whatever the parent element's is.
  53.  
  54. "Content" is used here as as term instead of "text", because while text-align certainly affects text, it affects all inline or inline-block elements in that container.
  55.  
  56. There are two new values in CSS3
  57. start and end.
  58. These values make multiple language support easier
  59.  For example
  60.  English is a left-to-right (ltr) language
  61.  Arabic is a left-to-right (rtl) language.
  62. Using "right" and "left" for values is too rigid and doesn't adapt as the direction changes. These new values do adapt:
  63.  
  64.    start - Same as "left" in ltr, same as "right" in rtl.
  65.    end - Same as "right" in ltr, same as "left" in rtl.
  66.  
  67. There is also match-parent, which is similar to inherit, only that the new value is calculated against the current element's direction instead of, you know, not doing that.
  68.  
  69. There are a few things in the spec that don't have any browser support yet.
  70. One is the value "start end" which would align the first line as if was "start" and any subsequent lines as if it was "end".
  71. Another is giving the value a string, like text-align: "." start;
  72. The text will aline along the first occurrence of that <string>, as in to line up a column of numbers along a decimal point.
  73.  
  74. Examples
  75.  
  76.  
  77.  
  78. ============================
  79. ========== TEXTE - 13 PROPRIÉTÉS UTILISABLES POUR METTRE EN FORME LE TEXTE CONTENU DANS UNE BOÎTE.
  80. == http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/page07.htm (tres bien)
  81.  
  82. ========== FONT-FAMILY: Police
  83. -"serif" == Police avec empattements. cf :Nimes New Roman ;
  84. -"sans-serif" == Police sans empattements. cf: Arial ;
  85. -"monospace" Police non proportionnelle, occupe même largeur. cf: Courrier New ;
  86. -"cursive" Police imitant l'écriture cursive.
  87. -"fantasy" dPolice amusante
  88.  
  89. ========== FONT-SIZE: Corps (taille) des caractères
  90. - valeur exprimée directement en pixels
  91. - pourcentage
  92. - "medium", "smaller" ou "larger"
  93. - "xx-small", "x-small" ou "small"
  94. - "xx-large", "x-large" ou "large"
  95.  
  96. ========== FONT-STYLE: Texte normal ou en italique
  97. Texte est en italique ou non.
  98. La recommandation CSS prévoit également la valeur "oblique",
  99. mais cette dernière est implémentée comme la valeur italique par les navigateurs courants.
  100.  
  101. Exemple :
  102. <p>Texte normal, <span style="font-style: italic">texte en italique</span>,
  103. <span style="font-style: oblique">texte en oblique</span></p>
  104.  
  105. ========== FONT-WEIGHT: Graisse NORMAL BOLD > 900
  106. Définir la graisse des caractères.
  107. 9 valeurs sont prévues dans les recommandations CSS,
  108. numérotées de 100 à 900.
  109. Une telle subtilité peut se concevoir pour l'imprimé (si la police utilisée le prévoit),
  110. - normal (valeur "normal", par défaut) ;
  111. - caractères gras (valeur "bold"), équivalent de <b> en HTML ;
  112. - caractères très gras (valeur 900).
  113. En général, les valeurs supérieures à 600 sont toutes
  114. interprétées de la même façon (gras)
  115.  
  116. Exemple :
  117. <p style="font-size: 14pt; font-family: Comic Sans MS">NORMAL,
  118. <span style="font-weight: bold">GRAS</span>,
  119. <span style="font-weight: 900">TRÈS GRAS ?</span></p>
  120.  
  121. ========== FONT-VARIANT: Petites majuscules - small-caps
  122. Transformer les minuscules en petites majuscules (valeur "small-caps").
  123. Les majuscules ne sont pas modifiées.
  124.  
  125. Exemple :
  126. <p>Petites Majuscules, <span style="font-variant: small-caps">Petites Majuscules</span></p>
  127.  
  128. ========== FONT: Raccourci regroupant les cinq propriétés FONT plus LINE-HEIGHT
  129. 1 - Indication du style (STYLE, normal ou italique)
  130. 2 - graisse (WEIGHT)
  131. 3 - petites majuscules (VARIANT)
  132. Elles sont facultatives, et peuvent être écrites dans un ordre quelconque ;
  133. 4 - corps (la taille) des caractères (SIZE) doit obligatoirement être précisée ;
  134. 5 - nature de la police (FAMILY) doit obligatoirement être précisée, elle aussi.
  135.  
  136. Exemple :
  137. <p style="font: italic small-caps bold 16pt Comic Sans MS">Texte d'essai</p>
  138.  
  139. ========== TEXT-ALIGN   Aligne le texte (à gauche, à droite, centré, justifié)
  140. - Texte à gauche ("left"). C'est la valeur par défaut ;
  141. - Texte à droite ("right") ;
  142. - Centrer le texte ("center") ;
  143. - Justifier le texte ("justify").
  144. Exemple :
  145. <p style="text-align: left; margin: 5px">Texte aligné à gauche</p>
  146. <p style="text-align: center; margin: 5px">Texte centré</p>
  147. <p style="text-align: right; margin: 5px">Texte aligné à droite</p>
  148. <p style="text-align: justify; margin: 5px">Texte justifié, assez long pour nécessiter un retour à la ligne</p>
  149.  
  150. == Centrage d'éléments emboîtés.
  151. Précisons dès maintenant que tout se passe généralement bien si l'élément contenu est du type "en-ligne".
  152. C'est le cas du centrage d'une image, comme le montre l'exemple suivant :
  153. <p style="text-align: center"><img border="0" src="images/ns_logo_128_fwmx.gif" width="32" height="32"></p>
  154.  
  155. ========== TEXT-DECORATION  Texte souligné, surligné, barré
  156.  - Souligner le texte ("underline") ;
  157.  - Surligner le texte ("overline") ;
  158.  - Barrer le texte ("line-through") ;
  159.  - Clignoter le texte ("blink") DELETED
  160. Remarque : on peut à la fois souligner, surligner et barrer un texte:
  161. <p style="text-decoration: underline overline line-through">Texte souligné, surligné et barré simultanément</p>
  162.  
  163.  
  164. ========== TEXT-TRANSFORM   Tout en majuscules, tout en minuscules, première lettre en majuscules
  165.  
  166. - Ne pas modifier le texte ("none"). C'est la valeur par défaut ;
  167. - Commencer chaque mot par une majuscule ("capitalize") ;
  168. - Tout écrire en majuscules ("uppercase") ;
  169. - Tout écrire en minuscules ("lowercase").
  170. Exemple :
  171. <p>
  172. <span style="text-transform: none">Texte non modifié</span><br>
  173. <span style="text-transform: capitalize">une majuscule au début de chaque mot</span><br>
  174. <span style="text-transform: uppercase">texte en majuscules</span><br>
  175. <span style="text-transform: lowercase">TEXTE EN MINUSCULES</span>
  176. </p>
  177. ============================
  178. ======== TEXTE - CAPITALIZE (uppercase / lowercase) - CSS Text Transform
  179. <p style="text-transform:uppercase;">This text has been transformed to uppercase</p>
  180. <p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
  181. <p style="text-transform:capitalize;">this text has been capitalized.</p>
  182.  
  183. This results in:
  184.  
  185. This text has been transformed to uppercase
  186. THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE
  187. this text has been capitalized.
  188.  
  189. text-transform css peut prendre les valeurs de :
  190. - capitalize, première lettre du texte en majuscule,
  191. - uppercase, texte en majuscule,
  192. - lowercase, texte en minuscule,
  193. - none, texte normal.
  194. - inherit hérite de son parent (css 2)
  195.  
  196. ========== TEXT-INDENT  Retrait de première ligne (positif ou négatif)
  197. Gérer le retrait de la première ligne d'un paragraphe.
  198. - Valeur négative implique le retrait du reste du paragraphe par rapport à la première ligne.
  199. Dans ce cas, il faut prévoir une marge interne gauche suffisante,
  200. sinon IE tronque le début de la première ligne,
  201. et Gecko le fait sortir de la boîte. Le retrait peut être exprimé en pixels ou en pourcentage.
  202. Exemple :
  203. <p style="text-indent: 0; text-align: justify">Ce paragraphe n'a pas de retrait de première ligne, la valeur de la propriété TEXT-INDENT est nulle.</p>
  204. <p style="text-indent: 15px; text-align: justify">Ce paragraphe possède un retrait de première ligne, la valeur de la propriété TEXT-INDENT est 15 pixels.</p>
  205. <p style="text-indent: -15px; text-align: justify; padding-left: 20px">Ce paragraphe possède un retrait négatif de première ligne, la valeur de la propriété TEXT-INDENT est -15 pixels.</p>
  206.  
  207. Ce paragraphe n'a pas de retrait de première ligne, la valeur de la propriété TEXT-INDENT est nulle.
  208. (en arriere)Ce paragraphe possède un retrait de première ligne, la valeur de la propriété TEXT-INDENT est 15 pixels.
  209. (en avant) Ce paragraphe possède un retrait négatif de première ligne, la valeur de la propriété TEXT-INDENT est -15 pixels.
  210.  
  211. ========== COLOR    Couleur du texte
  212.  
  213. ========== LINE-HEIGHT  Interlignage
  214. Définir l'interlignage dans les boîtes de type BLOC.
  215. - Valeurs négatives ne sont pas prises en compte.
  216. - Valeur "normal" laisse le navigateur libre de faire au mieux ;
  217. c'est la valeur par défaut.
  218.  
  219. L'interlignage peut être exprimé en pixels ou en pourcentage.
  220. Exemple :
  221. <p style="line-height: normal">Ce paragraphe possède un interlignage standard</p>
  222. <p style="line-height: 25px>Ce paragraphe possède un interlignage de 25 pixels</p>
  223.  
  224. - Valeur de la propriété LINE-HEIGHT
  225. peut être introduite dans le raccourci FONT,
  226. en la regroupant avec celle relative au corps,
  227. et en séparant les deux valeurs par une barre oblique.
  228. Exemple :
  229.  
  230. <p style="font: italic small-caps bold 12pt/25px Comic Sans MS">Texte doté d'un style regroupant six propriétés en un seul raccourci</p>
  231.  
  232. ========== VERTICAL-ALIGN   Indice et exposant
  233. Placer du texte :
  234. - en indice (une valeur ou "sub")
  235. - en exposant (une valeur ou "super").
  236. Elle est également utilisée en positionnement.
  237. Exemple :
  238. <p>Texte normal <span style="vertical-align: 4px; font-size: 70%">en exposant</span> normal</p>
  239. <p>Texte normal <span style="vertical-align: -3px; font-size :70%">en indice</span> normal</p>
  240.  
  241.  
  242. ========== LETTER-SPACING
  243. ==
  244.  
  245. Spacing behavior between text characters.
  246.  
  247. Syntax
  248.  
  249. Formal syntax: normal | <length>
  250.  
  251. letter-spacing: normal
  252.  
  253. letter-spacing: 0.3em
  254. letter-spacing: 3px
  255. letter-spacing: .3px
  256.  
  257. letter-spacing: inherit
  258.  
  259. Values:
  260. normal
  261.     The spacing is the normal spacing for the current font.
  262.     This value allows the user agent to alter
  263.     the space between characters in order to justify text.
  264.     That's the difference to the length value 0.
  265. <length>
  266.    Indicates inter-character space in addition
  267.     to the default space between characters.
  268.     Values may be negative, but there may be implementation-specific limits.
  269.     User agents may not further increase or decrease the inter-character space in order to justify text.
  270.    See <length> values for possible units.
  271.  
  272. Examples:
  273. Having a css style of:
  274.  
  275. p { letter-spacing: 0.4em }
  276.  
  277. and a webpage with the code:
  278.  
  279. <p> letter spacing </p>
  280.  
  281. will produce the following:
  282. letter spacing
  283.  
  284.  
  285. Here are some more letter spacing examples:
  286. letter-spacing: 0.1em
  287. letter-spacing: 0.5em
  288. letter-spacing: 0.8em
  289. letter-spacing: 1em
  290. letter-spacing: -0.05em
  291. letter-spacing: 6px
  292.  
  293.  
  294. ============================
  295. ========== TEXT-ALIGN-LAST (flex box??)
  296. == https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last?redirectlocale=en-US&redirectslug=CSS%2Ftext-align-last
  297. How the last line of a block or a line, right before a forced line break, is aligned.
  298. Values :
  299.  
  300. auto
  301.    The affected line is aligned per the value of text-align,
  302.     unless text-align is justify, in which case the effect is the same as setting text-align-last to left.
  303. start
  304.    The same as left if direction is left-to-right and right if direction is right-to-left.
  305. end
  306.    The same as right if direction is left-to-right and left if direction is right-to-left.
  307. left
  308.    The inline contents are aligned to the left edge of the line box.
  309. right
  310.    The inline contents are aligned to the right edge of the line box.
  311. center
  312.    The inline contents are centered within the line box.
  313. justify
  314.    The text is justified. Text should line up their left and right edges
  315.     to the left and right content edges of the paragraph.
  316.  
  317. Examples:
  318. div {
  319.  text-align: justify;
  320.  -moz-text-align-last: center;
  321.  text-align-last: center;
  322. }
  323.  
  324. text-align-last: auto
  325. text-align-last: start
  326. text-align-last: end
  327. text-align-last: left
  328. text-align-last: right
  329. text-align-last: center
  330. text-align-last: justify
  331.  
  332. text-align-last: inherit
  333.  
  334. ============================
  335. ========== Text-rendering : auto / optimizeSpeed / optimizeLegibility / geometricPrecision
  336. == http://htmlcss.wikia.com/wiki/HTML_%26_CSS_Wiki
  337.  
  338. Provide information to the rendering engine about what sorts of tradeoffs to make when rendering text,
  339. in order to optimize speed or legibility.
  340. Currently only Gecko 1.9 (Firefox 3.0) and WebKit 532.5 (Safari 5 and Chrome 4) support this property.
  341. This property does not function on Mac OS X.
  342. This is an SVG property, it is not defined in any CSS standard.
  343. Gecko and WebKit apply text-rendering also to HTML and XML content.
  344.  
  345. auto :
  346.     The browser will make educated guesses about when to optimize for speed, legibility,
  347.     and geometric precision while drawing text.
  348.     In practice, Gecko desktop browsers like Firefox use optimizeLegibility if
  349.     font size is 20px or larger. Otherwise optimizeSpeed for smaller text.
  350. optimizeSpeed:
  351.     Gecko will emphasize rendering speed over legibility and geometric precision while drawing text.
  352.     Disables kerning and ligatures.
  353. optimizeLegibility:
  354.     Gecko will emphasize legibility over rendering speed and geometric precision.
  355.     This enables kerning and optional ligatures.
  356. geometricPrecision:
  357.     Gecko will emphasize geometric precision over rendering speed and
  358.     legibility; this is currently the same as optimizeLegibility.
  359.  
  360. One very visible effect is that optimizeLegibility enables ligatures (ff, fi, fl etc.)
  361. in text smaller than 20px for some fonts (e.g. Microsoft's Calibri, Candara, Constantia and Corbel or the DejaVu font family).
  362.  
  363. CSS example:
  364.  
  365. /* make sure all fonts in the HTML document display in all its glory,
  366.    but avoid inadequate ligatures in class foo elements */
  367.  
  368. body {
  369.       text-rendering: optimizeLegibility;
  370. }
  371.  
  372. .foo {
  373.       text-rendering: optimizeSpeed;
  374. }
  375.  
  376. ============================
  377. ======== Text-decoration: underline (looks better than text-decoration: underline)
  378. ==http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
  379. border-bottom: 1px solid black;
  380.  
  381. ============================   
  382. ======== TEXTE - BLINK (REMOVED FOR FIREFOX > 23)
  383. text-decoration :  valeur blink
  384.  
  385. == TEXTE - BLINK : NEW SOLUTION: Imitating a blink tag with CSS3 animations
  386. == http://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations
  387. == http://jsfiddle.net/es6e6/812/
  388. blink {
  389.     display: inline;
  390.     color: inherit;
  391.     animation: blink 1s steps(1) infinite;
  392.     -webkit-animation: blink 1s steps(1) infinite;
  393. }
  394. @keyframes blink { 50% { color: transparent; } }
  395. @-webkit-keyframes blink { 50% { color: transparent; } }
  396.  
  397. == EXAMPLE @keyframe
  398. == GLOSS SHADOW
  399. body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
  400.  
  401. #loader {
  402.     background: #ddd;
  403.     color: #333;
  404.     border-radius: 4px;
  405.     padding: 4px;
  406.     display: inline-block;
  407.     -webkit-box-shadow: 0 0 5px #333;
  408.     box-shadow: 0 0 5px #333;
  409.    
  410.     -moz-animation-name: glow;
  411.     -moz-animation-duration: .8s;
  412.     -moz-animation-iteration-count: infinite;
  413.     -moz-animation-timing-function: linear;
  414.     -moz-animation-direction: alternate;
  415.  
  416.     -webkit-animation-name: glow;
  417.     -webkit-animation-duration: .8s;
  418.     -webkit-animation-iteration-count: infinite;
  419.     -webkit-animation-timing-function: linear;
  420.     -webkit-animation-direction: alternate;
  421. }
  422.  
  423. @-moz-keyframes glow {
  424.     from { box-shadow: 0 0 5px #333; }
  425.     to   { box-shadow: 0 0 10px #046; }
  426. }
  427. @-webkit-keyframes glow {
  428.     from { -webkit-box-shadow: 0 0 5px #333; }
  429.     to   { -webkit-box-shadow: 0 0 10px #046; }
  430. }
  431. == EXAMPLE @keyframe
  432. == OPACITY HOVER
  433. @keyframes makando_fade {
  434.   from { opacity: 0;}
  435.   to {opacity: 1;}
  436. }
  437. #view-code {
  438.   -moz-animation-name: makando_fade;
  439.   -moz-animation-duration: 2s;
  440.   -moz-animation-delay: 0.5s;
  441.   -moz-animation-direction: reverse;
  442.   -moz-animation-fill-mode: forwards;
  443. }
  444. #view-code:hover {
  445.   opacity: 1 !important;
  446. }
  447.  
  448. == SEE CCSS ANIMATION
  449. KEYFRAME INFO : you can't use !important in @keyframes rule.
  450. ==  https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
  451.  
  452. ============================
  453. ======== TEXTE - text-indent : Retrait de la première ligne d'un paragraphe
  454. ==http://css.mammouthland.net/blockquote-retraits-css.php
  455. Si on ne veut faire un retrait que sur la première ligne d'un paragraphe,
  456. c'est alors le text-indent qu'il faut utiliser.
  457. Code CSS
  458.  
  459. .retrait {
  460. text-indent:50px;
  461. }
  462. ============================
  463. ======= font-feature-settings
  464. == https://css-tricks.com/almanac/properties/f/font-feature-settings/
  465. This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes.
  466. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable.
  467. Alternatively, you can disable them with either 0 or off:
  468.  
  469. .element {  
  470.  /* these two values do the same thing */
  471.  font-feature-settings: "liga" 1;
  472.  font-feature-settings: "liga1" on;
  473. }
  474.  
  475. Many other values, besides standard ligatures are supported
  476. by the font-feature-settings property, including small caps:
  477.  
  478. .element {
  479.  font-feature-settings: "smcp" 1;
  480. }
  481. Values
  482. This is a list of every value that is supported by font-feature-settings,
  483. but make sure to check the web font that you’re using supports these values too before trying them:
  484.  
  485.    liga: standard ligatures
  486.    dlig: discretionary ligatures
  487.    onum: old style figures
  488.    lnum: lining figures
  489.    tnum: tabular figures
  490.    zero: slashed zero
  491.    frac: fractions
  492.    sups: superscript
  493.    subs: subscript
  494.    smcp: small caps
  495.    c2sc: small capitals from capitals
  496.    case: case-sensitive forms
  497.    hlig: historical ligatures
  498.    calt: contextual alternates
  499.    swsh: swashes
  500.    hist: historical forms
  501.    ss**: stylistic sets
  502.    kern: kerning
  503.    locl: localized forms
  504.    rlig: required ligatures
  505.    medi: medial forms
  506.    init: initial forms
  507.    isol: isolated forms
  508.    fina: final forms
  509.    mark: mark
  510.    mkmk mark-to-mark positioning
  511.  
  512. Combining multiple settings
  513. To add multiple features you need to follow one value by another in a comma separated list, like so:
  514.  
  515. .element {
  516.  font-feature-settings:"smcp" 1, "onum" 1;
  517. }
  518.  
  519. Prefixes
  520. To get the best support across the browser spectrum, make sure to use these prefixes:
  521.  
  522. .element {
  523.  -moz-font-feature-settings:"smcp" 1;
  524.  -ms-font-feature-settings:"smcp" 1;
  525.  -o-font-feature-settings:"smcp" 1;
  526.  -webkit-font-feature-settings:"smcp" 1;
  527.  font-feature-settings:"smcp" 1;
  528. }
  529.  
  530.  
  531.  
  532. ============================
  533. ======= Better web typography with OpenType features : -moz-font-feature-
  534. == http://opentype.info/blog/2010/08/14/better-web-typography-with-opentype-features/
  535. == REAL Small Caps
  536. == The CSS code is: -moz-font-feature-settings:’smcp=1′;
  537.  
  538. == In this example we activate the proportional oldstyle figures by using
  539. -moz-font-feature-settings:’smcp=1,pnum=1,onum=1′;
  540. As you can see, even the dollar sign is changed to an appropriate small cap version.
  541.  
  542. == Here is an example of discretionary ligatures activated by :
  543. -moz-font-feature-settings:’dlig=1′;
  544.  
  545. == Contextual Alternates using :
  546. -moz-font-feature-settings:’calt=1′;
  547.  
  548. == Case Feature applied those glyphs can be changed to match uppercase text:
  549. -moz-font-feature-settings:’case=1′;
  550.  
  551. == Stylistic sets are defined as double-digit numbers between 01 and 20, for examle:
  552. -moz-font-feature-settings:’ss01=1′;
  553.  
  554. == Fractions fraction like 1234/5678 and apply:
  555. -moz-font-feature-settings:’frac=1′;
  556.  
  557.  
  558.  
  559. ============================
  560. ======== HIGHLIGHT TEXT - MARK <mark> </mark>
  561. ==== https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
  562. == USERSTY FORUM : http://forum.userstyles.org/discussion/38932/userstyles-technology-upgrade-you-are-currently-testing-it-out#Item_219
  563. == PAGE WHERE IT IS USED:http://userstyles.org/styles/96399/about-blank-nyan-cat-firefox
  564.  
  565. #long-description > MARK
  566. <mark>Please read the following text</mark>
  567.  
  568. ============================
  569. ======== BLOCQUOTES (Simple and Nice Blockquote Styling) - 2013
  570. == http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
  571. == EXAMPLE :
  572. blockquote {
  573.  background: #f9f9f9;
  574.  border-left: 10px solid #ccc;
  575.  margin: 1.5em 10px;
  576.  padding: 0.5em 10px;
  577.  quotes: "\201C""\201D""\2018""\2019";
  578. }
  579. blockquote:before {
  580.  color: #ccc;
  581.  content: open-quote;
  582.  font-size: 4em;
  583.  line-height: 0.1em;
  584.  margin-right: 0.25em;
  585.  vertical-align: -0.4em;
  586. }
  587. blockquote p {
  588.  display: inline;
  589. }
  590. == TWEAK :
  591. blockquote {
  592.  margin: 1.5em 0 1.5em;
  593.  padding: 0 1em 0 2.5em;
  594.  position:relative;
  595. }
  596. blockquote:before {
  597.  color: #ccc;
  598.  content: "\201C";
  599.  font-size: 5em;
  600.  position:absolute;
  601.  left:5px;
  602.  top: 0.3em;
  603.  line-height: 0.1em;
  604. }
  605.  
  606. blockquote:after {
  607.   color: #ccc;
  608.  content: "\201D";
  609.  font-size: 5em;
  610.  position:absolute;
  611.  right:3px;
  612.  bottom: 0em;
  613.  line-height: 0.1em;
  614. }
  615.  
  616. ============================
  617. ======== HIDE TEXT  component of a SPRIT
  618. == http://css-tricks.com/video-screencasts/105-using-spritecow/
  619. No pseudo-elements required, so cross-browser support is stellar.
  620. The key elements are:
  621. - setting either the width or height of the block to 0
  622. - setting the padding to be the height or width of the sprite
  623. - hiding the text contents by setting overflow: hiddenI should mention
  624. — this only works on blocks.
  625. If you want to use this with an inline element (like an <a>),
  626. you’d have to set the display to inline-block or block.
  627. .sprite {
  628.    background: url(sprite.png) no-repeat;
  629.    width: 0;
  630.    padding-left: 34px;
  631.    overflow: hidden;
  632. }
  633. .sprite1 { background-position: -100px 0; }
  634.  
  635. ============================
  636. ======== TEXTE - CS Une taille de police en fonction de la largeur d’écran
  637. == http://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport
  638. CSS3 à la rescousse
  639.  
  640. Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps,
  641. il s’agit des unités relative au viewport. Pour comprendre ce qu’est le viewport,
  642. je vous invite à lire cette article de Raphaël Goetter : Comprendre le viewport dans le Web mobile.
  643.  
  644. Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur.
  645. Vous connaissez certainement les unités
  646. px, em, rem ou pt
  647. pour dimensionner vos corps de texte ?
  648. Rajoutez à cette liste :
  649.  
  650.    vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
  651.    vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran
  652.    vmin (vm pour IE9) : « Viewport Min », correspond à l’unité relative à la plus petite des deux dimensions (largeur ou hauteur selon l’orientation)
  653.    vmax : « Viewport Max », correspond à l’unité relative à la plus grande des deux dimensions (largeur ou hauteur selon l’orientation)
  654.  
  655. Très bien, mais que représente une unité de vw, par exemple ?
  656. C’est assez simple mais pas forcément intuitif de prime abord :
  657. 1 unité représente 1% de la dimension de référence.
  658.  
  659. Prenons un exemple plus parlant.
  660. Si j’écris ce morceau de code CSS appliqué à mon titre de niveau 1 :
  661.  
  662. h1 {
  663.   font-size: 10vw;
  664. }
  665.  
  666. Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport,
  667. à savoir la largeur de la fenêtre de votre navigateur.
  668. Sur l’écran que j’utilise actuellement, la définition est de 1920px de large,
  669. mon titre de niveau 1 aura alors une font-size équivalente à 192px.
  670.  
  671. ============================
  672. ======== TEXTE - CSS - UNITES CSS2
  673. == http://www.css-faciles.com/unites-css.php
  674.  
  675.  
  676.    En pixels.
  677.     Exemple : width:100px;
  678.    Dans Explorer, les valeurs attribuées de cette façon sont fixes.
  679.     Elles le resteront quelle que soient les variations de tailles des caractères et de la page.
  680.     Dans les autres navigateurs, l'unité "px" varie avec la taille par défaut des polices.
  681.     Contrairement au point (pt), la taille du pixel (px) est dépendante de la résolution et de la taille de l'écran.
  682.     C'est donc une unité relative dépendante du périphérique affichant votre page.
  683.     Lorsque vous définissez une valeur en px, vous devez utiliser un nombre entier.
  684.    
  685.     En "%".
  686.     Exemple : width:50%;
  687.     Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle
  688.     à la taille de la fenêtre du navigateur
  689.     ou à l'élément parent de celui pour lequel vous utilisez cette unité.
  690.     Si vous utilisez des pourcentages dans une propriété liée à la taille des caractères,
  691.     la valeur obtenue est proportionnelle à la taille de la police par défaut (1"em").
  692.     Lorsque vous définissez une valeur en %, vous devez utiliser un nombre entier.
  693.    
  694.     En "em".
  695.     Exemple : width:1.5em;
  696.     Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle
  697.     à la taille des caractères utilisés dans la page.
  698.     1em correspond à une hauteur de ligne de 1 caractère,
  699.     soit 12pt si l'utilisateur n'a pas modifié la taille standard des caractères.
  700.     Si l'utilisateur modifie la taille par défaut des caractères (avec CTRL + et CTRL -, par exemple),
  701.     les valeurs définies en "em" varieront en conséquence.
  702.     Cette unité est donc trés pratique pour modifier votre mise en page en fonction de la taille des caractères choisie par l'utilisateur.
  703.    Vous pouvez utiliser des valeurs décimales du type "1.4em"
  704.    Autres unités. La norme CSS2 a mis en place de nombreuses autres unités qui sont des variantes des 3 précédentes.
  705.    
  706.     Voici un récapitulatif complet des unités utilisables en CSS :
  707. em  :
  708.    Unité relative à la taille de police de l'élément.
  709. 1 em équivaut à 100% de cette taille.
  710. Seule exception à cette règle : lorsque la propriété font-size est définie,
  711. elle se rapporte à la taille de la police de l'élément parent.
  712.  
  713. ex :
  714.     Unité relative à la hauteur de la minuscule de l'élément.
  715. Seule exception à cette règle : lorsque la propriété font-size est définie,
  716. elle se rapporte à la hauteur de la minuscule de l'élément parent.
  717. px :
  718.     Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage
  719. % :
  720.     Le pourcentage est une unité relative à la taille de l'élément ou de son parent.
  721.    
  722.  
  723. ============================
  724. ======== TEXTE - CSS Text Decoration: Line Through (TXT BARRé par une ligne) and Overline (ligne au-dessus)
  725. == http://stanislav.it/css-text-decoration-line-through-and-overline/
  726.  
  727.    text-decoration: line-through;
  728.    text-decoration: overline;
  729.  
  730. ============================
  731. ======== TEXTE - PLACE HOLDER in a FORM , on input/textarea fields - ::-moz-placeholder
  732. == http://ftutorials.com/style-html5-placeholder/
  733. The HTML syntax for using placeholder is:
  734. <input type="tel" placeholder="Please enter your phone" name="phone" id="phone">
  735.  
  736. how to change the color of the placeholders?
  737. Simply include the below code in your CSS.
  738.  
  739. :-ms-input-placeholder { color: #ed7700; }
  740.  
  741. ::-webkit-input-placeholder { color: #ed7700; }
  742.  
  743. :-moz-placeholder { color: #ed7700; } /* Firefox 18 and under */
  744.  
  745. ::-moz-placeholder { color: #ed7700; } /* Firefox 19+ */
  746.  
  747.  
  748. ============================
  749. ======== TEXTE - PLACE HOLDER - How To Remove , on input/textarea fields , The Placeholder On Focus [CSS Only]
  750. == http://stanislav.it/how-to-remove-the-placeholder-on-focus-css-only/
  751. on input/textarea fields
  752. input:focus::-webkit-input-placeholder { color: transparent; }
  753.  
  754. input:focus:-moz-placeholder { color: transparent; } /* Firefox 18 and under */
  755.  
  756.  
  757. ============================
  758. ======== TEXTE - Text Overflow
  759. ==http://css3clickchart.com/?prop=text-overflow
  760. .element {
  761.     white-space: nowrap;
  762.     overflow: hidden;
  763.     -o-text-overflow: ellipsis;
  764.     -ms-text-overflow: ellipsis;
  765.     text-overflow: ellipsis; /* or "clip" */
  766. }
  767. .element {
  768. height: 15px !important;
  769. text-overflow: ellipsis !important;
  770. white-space: nowrap !important;
  771. overflow: hidden !important;
  772. }
  773.  
  774. ============================
  775. ======== CÉSURES (HYPHÉNATION) AVEC HYPHENS   -moz-hyphens: auto;
  776. == http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html
  777.  
  778. La propriétés hyphens n'est supportée que par quelques navigateurs actuellement
  779. (Firefox 6 ou 8 selon les langues, IE10, Safari 5.1)
  780.  
  781. Elle va bien plus loin que word-wrap puisque la césure est "intelligente"
  782. (elle s’adapte aux règles typographiques de la langue employée) et affiche des traits d’union.
  783.  
  784. Elle est donc bien pratique, mais encore assez peu supportée
  785. (elle nécessite d’ailleurs des préfixes vendeurs).
  786.  
  787. Voici la propriété hyphens en application :
  788.  
  789. .bloc {
  790.   -webkit-hyphens: auto;
  791.   -moz-hyphens: auto;
  792.   -ms-hyphens: auto;
  793.   -o-hyphens: auto;
  794.   hyphens: auto;
  795. }
  796.  
  797.  
  798. ============================
  799. ======== HOW TO MAKE WORD-BREAK ON FIREFOX USING CSS
  800. == http://stackoverflow.com/questions/4282757/how-to-make-word-break-on-firefox-using-css/12235469#12235469
  801. /* For Firefox */
  802. white-space: pre-wrap;
  803. word-break: break-all;
  804.  
  805. /* For Chrome and IE */
  806. word-wrap: break-word;
  807.  
  808.  
  809. ============================
  810. ======== PRE-WRAP - CODE CONTAINER (PRE) - RETOUR A LA LIGNE -
  811. === pre-wrap BETTER THAN pre-line
  812. == http://userscripts.org/scripts/review/104615
  813. /* USERSCRIPT CODE PAGE - MAIN CONTAINER - WIDTH + OVERFLOW -
  814.     max-width: 1920px !important;
  815. === */
  816. .container {
  817.     margin: 0 auto;
  818.     max-width: 1920px !important;
  819.     overflow: visible !important;
  820. }
  821. /* CONTENT CODE CONTAINER - WIDTH OVERFLOW - === */
  822. body.wide #content {
  823.     overflow-x: auto;
  824.     overflow-y: auto !important;
  825.     width: 1870px !important;
  826.     margin-left: -450px ! important;
  827.     border: 1px solid red ! important;
  828. }
  829. /* CODE CONTAINER (PRE) - RETOUR A LA LIGNE -
  830. pre-wrap BETTER THAN pre-line
  831. === */
  832. /*pre {
  833.     display: inline-block ! important;
  834.     margin: 1.5em 0;
  835.     white-space: pre-wrap !important;
  836.     width: 81% !important;
  837. }*/
  838. #content pre {
  839. /*    max-width: 100% ! important;*/
  840. /*    max-width: 970px !important;*/
  841.     overflow: hidden !important;
  842.     text-overflow: ellipsis !important;
  843.     white-space: pre-wrap !important;
  844.     word-wrap: break-word !important;
  845. }
  846.  
  847. ============================
  848. ======== <P> CAUSES A NEW PARAGRAPH.
  849. == http://http://forum.userstyles.org/discussion/35550/relaxing-paragraph
  850. But that wastes too much space in the pages I am battling.This will remove the block nature of p elements.
  851.  
  852. p {display: inline !important;}
  853.  
  854. Or if the p elements being used truly are empty, then you can try this to remove space wasting p's
  855.  
  856. p:empty {
  857. display:none !important;
  858. }
  859.  
  860. ============================
  861. ======== TEXT TRANSITION - COLOR (GRAY / ORANGE) - EXAPMLE
  862. == http://www.impressivewebs.com/articles/page/4/
  863. * {
  864.    -moz-box-sizing: border-box;
  865.    box-sizing: border-box;
  866. }
  867. .title-link:link, .title-link:visited {
  868.    color: #4F5E67;
  869.    text-decoration: none;
  870. }
  871. a, a:link, a:visited {
  872.    transition: color 0.4s ease 0s;
  873. }
  874. .title-link, .entry-title {
  875.    margin-bottom: 0.2em;
  876. }
  877. a {
  878.    background: none repeat scroll 0 0 transparent;
  879.    font-size: 100%;
  880.    padding: 0;
  881.    vertical-align: baseline;
  882. }
  883. .title-link:hover, .title-link:active, .title-link:focus {
  884.    color: #E06C1F;
  885. }
  886. .title-link:link, .title-link:visited {
  887.    text-decoration: none;
  888. }
  889. a, a:link, a:visited {
  890.    transition: color 0.4s ease 0s;
  891. }
  892. a:hover, a:active {
  893.    outline: 0 none;
  894. }
  895. .title-link, .entry-title {
  896.    margin-bottom: 0.2em;
  897. }
  898. a {
  899.    background: none repeat scroll 0 0 transparent;
  900.    font-size: 100%;
  901.    padding: 0;
  902.    vertical-align: baseline;
  903. }
  904.  
  905.  
  906. ============================
  907. ======== EMBED LINE BREAKS INTO GENERATED CONTENT - #example:before { content: "Hello\A boy."; }
  908. == http://www.merttol.com/articles/code/introduction-to-css-escape-sequences.html
  909. The Unicode code point for the newline character is U+00000A.
  910. a CSS string, this can be written as \00000A.
  911. In a way similar to the way a hex triplet for color values can be shortened,
  912. escape sequences can also be shortened by dropping any leading zeros from the code point,
  913. so another way to write a newline is \A.
  914.  
  915. Here’s a CSS rule that separates the two words “Hello” and “world”
  916. with a newline, placing each on their own line.
  917.  
  918. #example:before { content: "Hello \A world."; }
  919.  
  920. Something to be careful of when using escape sequences in CSS strings is ending
  921. the escape sequence where you intend to. Observe what happens if
  922. our “Hello world” text changed to “Hello boy.”
  923.  
  924. #example:before { content: "Hello\Aboy."; }
  925.  
  926. Now, instead of a newline (code point \A), our escape sequence
  927. is a left-pointing double angle quotation mark, or (code point \AB).
  928. Our generated content now reads “Hello«oy.” This happens because the “B” in “boy” is
  929. interpreted as a hexadecimal digit.
  930. The escape sequence terminates at the next character,
  931. the “O,” because that letter isn’t also such a digit.
  932.  
  933. You can explicitly conclude an escape sequence in one of two ways.
  934. First, you can specify the sequence in full using all six hexadecimal digits
  935. (including leading zeros, if there are any). Second, you can append a space.
  936. The following two CSS rules are therefore equivalent:
  937.  
  938. #example:before { content: "Hello\00000Aboy."; }
  939. #example:before { content: "Hello\A boy."; }
  940.  
  941. Knowing this, we can now split our earlier image caption example across two lines just where we want to.
  942. Pay close attention to the addition of the white-space: pre; declaration.
  943.  
  944. Since we’re generating whitespace characters and in most situations
  945. all whitespace in HTML gets collapsed to a single space,
  946. the white-space declaration is needed
  947. to interpret the newline literally
  948. (as though all the generated content were inside a <pre> element).
  949.  
  950. img[title]:before {
  951.    content: attr(title) "\AImage retrieved from"
  952.    attr(src);
  953.    white-space: pre;
  954.    display: block;
  955. }
  956.  
  957. === EXAMPLE PERSO : text avant et apres block
  958. == https://addons.mozilla.org/en-US/firefox/addon/identfavicon/
  959. #reviews .review .description:before {
  960. content: "Review :\00000A" ! important;
  961.    white-space: pre ! important;
  962.    color: red ! important;
  963. }
  964. #reviews .review .description:after {
  965. content: "\00000AReview End" ! important;
  966.    white-space: pre ! important;
  967.    color: peru ! important;
  968. }
  969. ============================
  970. ======== CSS TEXT-SHADOW in Safari, Opera, Firefox and more
  971. == http://maettig.com/code/css/text-shadow.html
  972. == http://kremalicious.com/make-cool-and-clever-text-effects-with-css-text-shadow/
  973.  
  974. p { text-shadow: 1px 1px 1px #000; }
  975.  
  976. The first two values specify the length of the shadow offset.
  977. The first value specifies the horizontal distance and
  978. the second specifies the vertical distance of the shadow.
  979. The third value specifies the blur radius and
  980. the last value describes the color of the shadow:
  981.  
  982. 1. value = The X-ccordinate
  983. 2. value = The Y-coordinate
  984. 3. value = The blur radius
  985. 4. value = The color of the shadow
  986.  
  987. Using positive numbers as the first two values ends up with placing the shadow
  988. to the right of the text horizontically (first value) and
  989. placing the shadow below the text vertically (second value).
  990.  
  991. The third value, the blur radius, is an optional value
  992. which can be specified but don’t have to.
  993. It’s the amount of pixels the text is stretched which causes a blur effect.
  994. If you don’t use the third value it is threated as if you sepcified a blur radius of zero.
  995.  
  996.  
  997. - I’m a text with a smooth shadow :
  998. color: #000;
  999. background: #fff;
  1000. text-shadow: 2px 2px 3px #000;
  1001.  
  1002. - I’m a text with no smooth shadow :
  1003. color: #000;
  1004. background: #fff;
  1005. text-shadow: 2px 2px #000;
  1006.  
  1007. - I’m a text with a smooth shadow :
  1008. color: #000;
  1009. background: #fff;
  1010. text-shadow: 2px -2px 3px #000;
  1011.  
  1012. - I’m funky colored text :
  1013. color: #33cc33;
  1014. background: #fff;
  1015. text-shadow: 2px 2px 2px #ff3300;
  1016.  
  1017. - I’m engraved text :
  1018. color: #000;
  1019. background: #666;
  1020. text-shadow: 0px 1px 1px #fff;
  1021.  
  1022. - I’m engraved text on black :
  1023. color: #666;
  1024. background: #000;
  1025. text-shadow: 0px 1px 0px #ccc;
  1026.  
  1027. - I’m on top of the background :
  1028. color: #fff;
  1029. background: #666;
  1030. text-shadow: 0px 1px 1px #000;
  1031.  
  1032. - I’m subtle glowing text
  1033. color: #fff;
  1034. background: #000;
  1035. text-shadow: 1px 1px 6px #fff;
  1036.  
  1037. - I’m also glowing but more blurry :
  1038. color: #fff;
  1039. background: #666;
  1040. text-shadow: 0px 0px 3px #fff;
  1041.  
  1042. - I’m pretty mysterious looking text :
  1043. color: #000;
  1044. background: #000;
  1045. text-shadow: 1px 1px 4px #fff;
  1046.  
  1047. - I’m pretty milky looking text :
  1048. color: #fff;
  1049. background: #fff;
  1050. text-shadow: 1px 1px 4px#000;
  1051.  
  1052. - DUPLICATE shadow : Which line is text?
  1053. color: #000;
  1054. background: #fff;
  1055. text-shadow: 0px 20px #000;
  1056.  
  1057. - Multiple shadows :
  1058. color: #000;
  1059. background: #000;
  1060. text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
  1061.  
  1062. - Multiple Shadows :
  1063. text-shadow: -1px -1px #666, 1px 1px #FFF;
  1064. text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
  1065. text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;
  1066. text-shadow: 1px 0 #F33, -1px 0 #33F;
  1067. text-shadow: 2px 0 4px #600, -2px 0 4px #006;
  1068. text-shadow: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;
  1069. text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;
  1070.  
  1071. Classical Shadows :
  1072. text-shadow: 1px 1px 2px #999;text-shadow: 2px 2px 3px #999;
  1073. text-shadow: 0 0 8px #000;
  1074. Glowing Borders
  1075. text-shadow: 0 0 11px #0F0;text-shadow: 0 0 5px #FF0;
  1076. text-shadow: 0 0 3px #F90;
  1077.  
  1078. Unusual Effects :
  1079. text-shadow: 0 7px 11px #390;
  1080. text-shadow: 0px -15px 0 #F00;
  1081. text-shadow: 0 0 11px #FF6;text-shadow: 0 0 8px #000;
  1082.  
  1083. ============================
  1084. ======== Flipping Text Upside Down
  1085. == http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/
  1086.  
  1087. -webkit-transform:rotate(-180deg);
  1088. -moz-transform:rotate(-180deg);
  1089. -o-transform:rotate(-180deg);
  1090. transform:rotate(-180deg);
  1091. ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  1092. filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  1093.  
  1094. ============================
  1095. ======== Reversing Text
  1096. == http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/
  1097. direction: rtl;
  1098. unicode-bidi: bidi-override;
  1099.  
  1100. ============================
  1101. ======== TEXTE - TEXT JUSTIFIE - méthde de calcul (taille FONT x 30)
  1102. == http://www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans-vos
  1103. Une manière simple pour calculer la justification est
  1104. d'utiliser la méthode de Robert Bringhurst
  1105.  qui multiplie la taille de la police par 30.
  1106.  Si la taille de la police est de 10px, la multiplier par 30
  1107.  vous donne une justification de 300px ou
  1108.  environ 65 caractères par ligne.
  1109. Le code ressemblerait à quelque chose comme :
  1110.  
  1111. p {
  1112.   font-size: 10px;
  1113.   max-width: 300px;
  1114.  
  1115. ============================
  1116. ======== TEXTE - Escaped Unicode == Add a space (" ") after an element using :after
  1117. ==http://stackoverflow.com/questions/5467605/add-a-space-after-an-element-using-after
  1118. Needs to be specified via escaped unicode:
  1119. h2:after {
  1120.     content: "\00a0"
  1121.  
  1122. ============================
  1123. ======== TEXTE - WHITE SPACE (iframe)
  1124. ==http://www.yourhtmlsource.com/frames/inlineframes.html
  1125. hspace="x"
  1126.     sets a margin of white space around the iframe to the sides.
  1127. vspace="x"
  1128.     sets a margin of white space to the top and bottom of the iframe, pushing it away from other page elements.
  1129.    
  1130. ============================
  1131. ======== TEXTE - WORD WRAP - word-wrap: break-word;
  1132. forcer le retour à la ligne d’un mot long
  1133. et qui aura pour effet de couper le mot à un endroit
  1134. arbitraire afin de provoquer un retour à la ligne.
  1135. 2 valeurs :
  1136. normal et break-word :
  1137.   word-wrap: break-word;
  1138.  
  1139.  
  1140. ============================
  1141. ======== CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
  1142. == http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
  1143. == JSFIDDLE live example == http://jsfiddle.net/microbians/csYjC/
  1144. == JSFIDDLE live example (container take all the place avaible) ==
  1145. I changed .ellipsis (height:200px) with :
  1146. (position:absolute; top:0; bottom:0;)
  1147. and .
  1148. ellipsis:before (height:200px) with height:100%.
  1149. It takes now the height of his container (for responsive work).
  1150. It looks like it works : http://jsfiddle.net/UJY9A/
  1151.  
  1152. Properly cutting off multi-line text is a surprisingly hard thing to do well.
  1153.     .overflow: hidden provides no indication of the text cut off.
  1154.     .text-overflow: ellipsis works only on single line content.
  1155.     .Various JavaScript solutions are fragile because
  1156.     they need explicit relayout whenever the box width or content changes.
  1157.  
  1158. We can do better with pure CSS and a little imagination , use :
  1159. BACKGROUND: -MOZ-LINEAR-GRADIENT
  1160. AFTER
  1161. BEFORE
  1162. =====
  1163.  
  1164.   body {
  1165.         padding: 20px;
  1166.     }
  1167.  
  1168.     .box {
  1169.         position: relative;
  1170.         font-family: ans-serif;
  1171.         display: block;
  1172.         width: 344px;
  1173.         height: 8em;
  1174.         overflow: hidden;
  1175.     }
  1176.     .box .text {
  1177.         color:  #333;
  1178.         padding:  20px;
  1179.         width: 304px;
  1180.         overflow: hidden;
  1181.         background: #E0E0E0;
  1182.         font-size: .95em;
  1183.         line-height: 1;
  1184.         text-align: justify;
  1185. }
  1186. .box .text:after {
  1187.         content: ' ';
  1188.         position: absolute;
  1189.         display: block;
  1190.         width: 100%;
  1191.         height: 1em;
  1192.         bottom: 0px;
  1193.         left: 0px;
  1194.         background: #E0E0E0;
  1195. }
  1196. .box .text:before {
  1197.         content:  '...';
  1198.         text-align:  right;
  1199.         position: absolute;
  1200.         display:  block;
  1201.         width: 2em;
  1202.         height: 1em;
  1203.         bottom: em;
  1204.         right: 20px;
  1205. background: -moz-linear-gradient(left,  rgba(224,224,224,0) 0%, rgba(224,224,224,1) 38%, rgba(224,224,224,1) 99%);
  1206. background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,0)), color-stop(38%,rgba(224,224,224,1)), color-stop(99%,rgba(224,224,224,1)));
  1207. background: -webkit-linear-gradient(left,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);
  1208. background: -o-linear-gradient(left,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);
  1209. background: -ms-linear-gradient(left,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);
  1210. background: linear-gradient(to right,  rgba(224,224,224,0) 0%,rgba(224,224,224,1) 38%,rgba(224,224,224,1) 99%);
  1211. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#e0e0e0',GradientType=1 );
  1212.     }
  1213.  
  1214. ============================
  1215. ======== TEXTE - Ellipsis : text-overflow : règle overflow (hidden, scroll ou auto).
  1216. ==http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html
  1217. == http://www.w3.org/TR/css3-text/#overflow-wrap0
  1218. Points de suspension avec text-overflow:
  1219. La valeur ellipsis, des points de suspension (…) sont générés à l’endroit où le terme est rogné,
  1220. Possible de substituer cet indice par un autre de son crû à l’aide de la propriété text-overflow-ellipsis.
  1221.  
  1222.         text-overflow: ellipsis !important;
  1223.         overflow: hidden !important;
  1224.         height: 15px !important;
  1225.         white-space: nowrap !important;
  1226.  
  1227. ============================
  1228. ======== TEXTE - Elipsis : text-overflow : règle overflow (hidden, scroll ou auto).
  1229. ==http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html
  1230. text-overflow:ellipsis !important;
  1231.         overflow: hidden !important;
  1232.         height: 15px !important;
  1233.         white-space: nowrap !important;
  1234.         overflow-x:hidden !important;
  1235.         overflow-y:scroll !important;
  1236.    
  1237. ============================
  1238. ======== TEXTE - WHITE SPACE - CSS White Space
  1239. Tells the browser how to handle white space:
  1240. Possible values:
  1241. normal
  1242. pre
  1243. nowrap.
  1244.  
  1245. <p style="white-space:pre;">This text has a line break
  1246. and the white-space pre setting tells the browser to honor it
  1247. just like the HTML pre tag.</p>
  1248. This results in:
  1249. This text has a line break and the white-space pre setting tells
  1250.  the browser to honor it just like the HTML pre tag.
  1251.  
  1252.  
  1253.  
  1254. ============================
  1255. ========== TEXTE - Centrer verticalement un texte dans un div
  1256. == http://snipplr.com/view/31624/
  1257. .vcenter span{
  1258.      line-height: 24px;
  1259.  /*ASTUCE : le span va se comporter comme une image, ainsi la propriété 'vertical-align' pourra agir sur lui*/
  1260.      display: inline-block;
  1261. /*... on align le text verticalement au centre RMQ : pour un alignement en bottom
  1262. il faudra modifier le line-height de l'element vcenter
  1263. de maniére à ce qu'il soit plus ou moins le double d'une line-height actuel */
  1264.      vertical-align: middle;
  1265. }
  1266. .vcenter{
  1267.      margin: 0;
  1268.      line-height: 200px;
  1269. }
  1270. .conteneur{
  1271.      height: 200px;
  1272.      
  1273. /*la configuration du conteneur avec une hauteur et overflow en hidden à  son importance */
  1274.  si on ne veut pas voir les elements qui suivent étre poussé vers le bas
  1275.      overflow-y: hidden;
  1276.      width: 500px;
  1277.      border: 1px red solid;
  1278. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!