Archives du mot-clef CSS:3

Thème du blog — valeurs générales

Laisser une réponse

Ini­tia­le­ment publié le 4 octobre 2006 à 10h44 
 body { /* pour avoir un peu de marge dans le contraste, si nécessaire */
 background:rgb(250,250,250)
 color:rgb(5,5,5);
 /* Chiffres elzéviriens sur Lac et Windows. Chercher pour Linux */
 font-family:Hoefler Text, Georgia, serif; /* aérer le texte. OK avec Hoefler et Monaco, voir avec les autres (Georgia, Courier New, Linux) */;
 /* !!! vérifier ce que line-height à 1.5em donne avec Hoefler. En monaco, c’est mieux que 1.6em !!! */;
 line-height:1.6em max-width:49em /* « L’idal tourne entre 50 et 80 carac. par ligne » (50+80)2=65 65 carac. 98ex 49em http://david.latapie.name/blog/1146-l-illusion-de-la-taille-de-fenetre */ }

CSS3 lists suggestions — better ways of styling the lists

4 réponses

Sum­mary: I pro­pose two new CSS rules.

  • Nes­ted orde­ring (list-style:nested-decimal). Trig­ger is nested-. Before you go shou­ting about :before, read on.
  • Any cha­rac­ter for unor­de­red list (list-style:raw-✘). Trig­ger is raw- (with a bug as
  • (bonus track: a sort of bug, although it is not clear if it is spec– or browser-related)
Lire la suite →

DietCSS

10 réponses

Ini­tia­le­ment publié le 26 jan­vier 2005 à 09:28

Les ins­truc­tions ci-dessous ne rédui­ront pas nota­ble­ment la taille de vos CSS, mais elles assai­nissent le code en reti­rant ce qui n’est pas néces­saire et en har­mo­ni­sant le reste. Il y a aussi quelques astuces (X)HTML très proches de l’esprit CSS.

Lire la suite →

New CSS3 value: text-stroke (WebKit vendor extension)

Laisser une réponse

A new ven­dor spe­ci­fi­ca­tion from Web­Kit: text-stroke. you won’t find it in CSS3 (yet), but this is a long-awaited func­tion (at least by me). As someone said: Web­kit is not only the basis for Safari, though, but an inte­gral part of OS X. Typo­gra­phy has always been a strength of Mac OS…1

Sur­ely this the rea­son they imple­men­ted those fancy fonts.

text-fill-color
This pro­perty allows you to spe­cify a fill color for text. If it is not set, then the color pro­perty will be used to do the fill.
text-stroke-color
This pro­perty allows you to spe­cify a stroke color for text. If it is not set, then the color pro­perty will be used to do the stroke.
text-stroke-width
This pro­perty allows you to spe­cify the width of the stroke. It defaults to 0, mea­ning that only a fill is per­for­med. You can spe­cify a length for this value, and in addi­tion the values thin, medium and thick can be used (with ‘thin’ being most like the out­line beha­vior of OS X).
text-stroke
This pro­perty is a shor­thand for the two stroke properties.
<div style="color:#906200;font-size:4em;text-shadow:5px 5px 10px #222;-webkit-text-stroke:5px black">This text has a black 3px stroke and a purple fill.</div>
This text has a black 3px stroke and a purple fill.
text-stroke
  1. If you are not convin­ced (or even if you are), take a look at Du bête RTF and Essayez de faire ça avec le bloc-notes. This is in French, but there is a lot of pictures.

Foreign words in italics

Laisser une réponse

Une ver­sion plus com­plète, mais légè­re­ment dépas­sée et plus brouillonne, est dis­po­nible en fran­çais.

Typo­gra­phy tells us foreign words shall be ren­de­red as ita­lic (here, we’re tal­king about real ita­lics, not empha­sis). The most com­mon cases are, for me, Latin (Ultima ratio regum) or French (comme ceci) words. Ruling out span style or the mar­gi­nally bet­ter span class, I will resort to selectors:

*:lang(en)	{font-style:italic}

(:lang for CSS2.1 and for CSS3)

This is all well and good, but it only works for English (we could refine by allo­wing dia­lects, like U.S., Cana­dian, Aus­tra­lian, Bri­tish, Lon­do­nian…). Ger­man would still appear as nor­mal (usually roman), not ita­lic. There is ano­ther pro­blem with rever­sing not being the same as ita­li­ci­sing, but enkrat po enkrat (one thing at a time).

Intro­du­cing, from the CSS3 selec­tors depart­ment, the :not pseudo-class (brow­sers sup­port) a.k.a. nega­tion pseu­do­class, easier for search engines). And that is very use­ful. :not allows to select in rela­tion to some­thing else; Ins­tead of select French, Ita­lian, Korean, Ger­man…, you now can say select what is not English.

So here is the code:

*:not(lang|(en)) {font-style:italic}

Voilà !

New Wording Draft for Generated Content for Paged Media

Laisser une réponse

The CSS WG publi­shed a new Wor­king Draft for Gene­ra­ted Content for Paged Media. This module des­cribes fea­tures often used in prin­ted publi­ca­tions lea­ders, cross-references, foot­notes, end­notes, run­ning hea­ders and foo­ters, hyphe­na­tion, etc.) Many fea­tures have had very lit­tle review so far and feed­back is requested.

If you send com­ments, please send them to this mai­ling list, www-style@w3.org, and pre­fix the Subject with [css3-gcpm] (as I did on this message).

Here it is (this very ver­sion)

That is great, because I’m in the pro­cess of wri­ting proo­frea­ding seve­ral books now.

Much like we may expect one page, wha­te­ver the medium, we may finally have hopes for one type­set­ting lan­guage, wha­te­ver the medium. Yes, I now LaTex is way bet­ter than CSS3 or even XSL:FO (inclu­ding XSL/T if you consi­der table of contents).

Conflict between border-collapse and border-radius

Laisser une réponse

Bet­ter to know it: border-collapse doesn’t work with border-radius. That makes sense when you think about it, but I had to stumble upon it to rea­lise it.

Have fun with CSS3

Laisser une réponse

I just learnt from the cool guys at CSS3.info that Web­kit now sup­ports box-shadow (text-shadow for blocks). As <a onclick=« javascript:_gaq.push([’_trackPageview”, “/out/webkit.org/blog/?p=86>mentioned on the Surfin’Safari entry, it is great too for new table look, with “floa­ting” cells.

They give some men­tio­ned on the Surfin’Safari entry, it is great too for new table look, with “floa­ting” cells.

They give some <a href=”]); » href=« http://www.css3.info/preview/box-shadow.html » class=« broken_link »>nice pictures of drop­ped sha­dows, but back in the day Web­Kit pio­nee­red in sup­por­ting text-shadow, I crea­ted a nice aura effect by using non-dropped sha­dow (and a bit of Uni­code)1. This code abuse page is still there (look for the word radioactivity).

Now, this “text aura” effect may be repli­ca­ted with box-shadow too. The trick for the aura effect is to use a large blur value to illu­mi­nate the block, appa­rently from “behind” (although no z-index had been har­med in the pro­cess. I swear it).

Simple code
<div style="background:#efefef;-webkit-box-shadow:0 0 200px yellow">Radioactivity</div>
Radio­ac­ti­vity

Nice effet, right (pro­vi­ded you are using a bow-shadow–capable brow­ser, of course)? But this is just the beginning.

Now with a bit more code. Fas­ten your seat­belt, Doro­thy. ’Cause pic­tures are going bye-bye.

<div style="background:#000;border:1px solid #000;font-size:300%;border:#461313 medium solid;-moz-border-radius:10px;-webkit-border-radius:10px;font-family:monospace;font-weight: 900;margin:auto;text-align:center;text-shadow:0 0 20px yellow;width:80%">☢ Radioactivity ☢</div>
☢ Radio­ac­ti­vity ☢
☢ Radio­ac­ti­vity ☢

Look Ma’: no picture!

Beware: truly dra­ma­tic effect also require truly dra­ma­tic CPU! (a 20em blur is not for eve­ryone and should not be used in real-life).

Yes, I know that text-shadow (and box-shadow too, I guess) are sup­po­sed to be repla­ced by SVG. Still. This thing rocks.

Oh, stu­pid me. Your brow­ser can’t dis­play it, right? Here’s the pic­ture. Enjoy.

Shadowactivity
  1. Gran­ted, I got my ins­pi­ra­tion from the W3C Eclipse example, but still…
  2. This pic­ture is a 20em blur, very-resource-intensive. If you are using an LCD screen, try loo­king the pic­ture from dif­ferent angles. From below, the blur appear as huge, while in front, you notice it much less.

Thème du blog — hyperliens

Laisser une réponse 

a           {border-bottom:solid .1em;text-decoration:none} a:link      {color:#3d3d9F} a:visited   {color:gray} a:hover     {color:orange} a:focus     {color:#636}

CSS3: une variante de text-underline-position:after-baseline. Lire aussi [CSS3 Text] a new pro­perty for text-decoration.