You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h3title="Combining images: the cross-fade() notation">2.6. 画像を組合せる： `cross-fade^f 記法</h3>
2297
+
<h3title="Combining images: the cross-fade() notation">2.6. 画像の結合-法： `cross-fade^f 記法</h3>
2298
2298
2299
2299
<p>
2300
2300
~CSSにより 2 個の画像~間の遷移を与えるためには、［
2301
2301
開始-, 終止-
2302
-
］画像を組合せた中間的な画像を明示的に指す仕方を要する。
2302
+
］画像を結合した中間的な画像を明示的に指す仕方を要する。
2303
2303
`cross-fade$f 関数が、
2304
2304
これを達成する。
2305
2305
それは、
2306
-
組合される 2 個の画像, および
2307
-
組合nの遷移の進行度合いを指示する。
2306
+
結合される 2 個【実際には 1 個以上】の画像, および
2307
+
結合nにおける遷移の進行度合いを指示する。
2308
2308
◎
2309
2309
When transitioning between images, CSS requires a way to explicitly refer to the intermediate image that is a combination of the start and end images. This is accomplished with the cross-fade() function, which indicates the two images to be combined and how far along in the transition the combination is.
Note: Authors can also use the cross-fade() function for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.
If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%, the result is floored at 0%, then divided equally between all images with omitted percentages at computed-value time.
The dimensions of the image represented by a cross-fade() are a weighted average of dimensions of the <image> arguments to the function; the <color> arguments have no effect. They are calculated as follows:
Run the object size negotiation algorithm for the <image>, as appropriate for the context in which the cross-fade() appears, and set item’s width and height to the width and height of the resulting concrete object size.
2476
+
~IF［
2477
+
%引数 を成す `image$t の`生来な寸法$は無い
2478
+
］
2479
+
⇒
2480
+
~CONTINUE
2459
2481
</li>
2460
2482
<li>
2461
-
%~item の`百分率^i ~SET %引数 の百分率
2462
-
◎
2463
-
Set item’s percentage to the argument’s percentage.
For each <cf-image> argument of the function’s arguments:
2497
+
• If argument is not an <image>, or is an <image> with no natural dimensions, continue.
2498
+
• Let item be a tuple consisting of a width, a height, and a percentage.
2499
+
• Run the object size negotiation algorithm for the <image>, as appropriate for the context in which the cross-fade() appears,＼
2500
+
and set item’s width and height to the width and height of the resulting concrete object size.
2501
+
• Set item’s percentage to the argument’s percentage.
2502
+
</li>
2470
2503
<li>
2471
2504
~IF［
2472
-
%画像~list は`空$である
2505
+
%~size群 は`空$である
2473
2506
］
2474
2507
⇒
2475
2508
~RET ε
2476
-
（`生来な寸法$は無い）
2477
2509
◎
2478
2510
If images is empty, return no natural dimensions.
2479
2511
</li>
2480
2512
<li>
2481
-
%百分率の総和 ~LET %画像~list 内のすべての`~item$の`百分率^iの総和
2513
+
%横幅 ~LET 0
2482
2514
◎
2483
-
Let percentage sum be the sum of all the percentages of the items in images.
2484
-
</li>
2515
+
↓</li>
2485
2516
<li>
2486
-
%画像~list を成す
2487
-
~EACH( %~item )
2488
-
に対し
2489
-
⇒
2490
-
%~item の百分率 ~SET %~item の`百分率^i ~DIV %百分率の総和
2517
+
%縦幅 ~LET 0
2491
2518
◎
2492
-
For each item in images, divide item’s percentage by percentage sum, and set item’s percentage to the result.
2493
-
</li>
2519
+
↓</li>
2494
2520
<li>
2495
-
~Assert：
2496
-
%画像~list 内の`百分率^iの総和 ~EQ `100%^v
2497
-
◎
2498
-
Assert: The percentages in images now sum to 100%.
2521
+
<p>
2522
+
%~size群 を成す
2523
+
~EACH( %~item )
2524
+
に対し：
2525
+
</p>
2526
+
<ol>
2527
+
<li>
2528
+
%重み ~LET %~item[ 1 ] ~DIV %百分率~総和
2499
2529
</li>
2500
-
<li>
2501
-
( %最終-横幅, %最終-縦幅 ) ~LET ( `0px^v, `0px^v )
2502
-
◎
2503
-
Let final width and final height be 0px.
2530
+
<li>
2531
+
%横幅 ~INCBY %~item[ 0 ] を成す横幅 ~MUL %重み
2504
2532
</li>
2505
-
<li>
2506
-
%画像~list を成す
2507
-
~EACH( %~item )
2508
-
に対し
2509
-
⇒＃
2510
-
%最終-横幅 ~INCBY %~item の`横幅^i ~MUL %~item の`百分率^i；
2511
-
%最終-縦幅 ~INCBY %~item の`縦幅^i ~MUL %~item の`百分率^i
2512
-
◎
2513
-
For each item in images, multiply item’s width by item’s percentage and add the result to final width, and multiply item’s height by item’s percentage and add the result to final height.
2533
+
<li>
2534
+
%縦幅 ~INCBY %~item[ 0 ] を成す縦幅 ~MUL %重み
2514
2535
</li>
2536
+
</ol>
2537
+
◎
2538
+
↓</li>
2515
2539
<li>
2516
-
~RET `生来な寸法$( `生来な横幅$ %最終-横幅, `生来な縦幅$ %最終-縦幅 )
2540
+
~RET ( `生来な横幅$ %横幅, `生来な縦幅$ %縦幅 )
2541
+
◎
2542
+
Return a natural width and natural height that are weighted averages of the width and height of each item in images, according to their corresponding percentages.
2517
2543
◎
2518
-
Return a natural width of final width and a natural height of final height.
2544
+
Note: The percentages might sum to a value less than 100%, so a naive weighted-averaging process might need to normalize them first.
Let size be a tuple of width and height, initialized to the result of finding the concrete object size of the cross-fade() function (using the natural dimensions of a cross-fade()).
2562
2590
</li>
2563
2591
<li>
2564
2592
<p>
2565
-
`cross-fade$f 関数の
2593
+
%引数~群 を成す
2566
2594
~EACH( %引数 )
2567
2595
に対し：
2568
-
◎
2569
-
For each argument of the cross-fade() function:
2570
2596
</p>
2571
2597
<ol>
2572
2598
<li>
2573
-
%~item ~LET
2574
-
( `画像^i, `百分率^i )
2575
-
からなる`~tuple$
2576
-
◎
2577
-
Let item be a tuple consisting of an image and a percentage.
If argument has an <image>, rescale it to size’s width and height and set item’s image to the result.＼
2606
+
%画像 ~SET その `image^t 画像を %~size に拡縮し直した結果
2587
2607
</li>
2588
2608
<li>
2589
2609
~ELSE
2590
2610
（ %引数 は `color$t 値を伴う）
2591
2611
⇒
2592
-
%~item の`画像^i ~SET
2593
-
寸法 %~size の，その `color^t の単色~画像
2594
-
◎
2595
-
Otherwise, argument has a <color>; set item’s image to a solid-color image of the <color>, with size’s dimensions.
2612
+
%画像 ~SET 寸法 %~size の，その `color^t の単色~画像
2596
2613
</li>
2597
2614
<li>
2598
-
%~item の`百分率^i ~SET %引数 の百分率
2599
-
【無い場合は？】
2600
-
◎
2601
-
Set item’s percentage to the argument’s percentage.
2615
+
%百分率 ~LET %引数 の百分率
2602
2616
</li>
2603
2617
<li>
2604
-
【 %画像~list に %~item を`付加する$ 】
2618
+
%画像~群 に `~tuple$( %画像, %百分率 ) を`付加する$
2605
2619
</li>
2606
2620
</ol>
2607
-
</li>
2608
-
<li>
2609
-
%百分率の総和 ~LET %画像~list を成すすべての`~item$の`百分率^iの総和
2610
2621
◎
2611
-
Let percentage sum be the sum of all the percentages of the items in images.
2622
+
For each argument of the cross-fade() function:
2623
+
• Let item be a tuple consisting of an image and a percentage.
2624
+
• If argument has an <image>, rescale it to size’s width and height and set item’s image to the result. Otherwise, argument has a <color>; set item’s image to a solid-color image of the <color>, with size’s dimensions.
2625
+
• Set item’s percentage to the argument’s percentage.
2612
2626
</li>
2613
2627
<li>
2614
2628
~IF［
2615
-
%百分率の総和 ~LT 100%
2616
-
］
2617
-
⇒
2618
-
%画像~list に次のようにされた`~tuple$を付加する
2619
-
⇒＃
2620
-
`画像^i ~SET 寸法 %~size の`透明な黒$にされた単色~画像,
2621
-
`百分率^i ~SET 100% ~MINUS %百分率の総和
2622
-
◎
2623
-
If percentage sum is less than 100%, append a tuple to images consisting of a solid-color transparent-black image with size’s dimensions, and a percentage equal to 100% minus percentage sum.
Otherwise, if percentage sum is greater than 100%, then for each item in images, divide item’s percentage by percentage sum, and set item’s percentage to the result.
2635
+
If leftover is greater than 0%, append a tuple to images consisting of a solid-color transparent-black image with size’s dimensions, and a percentage equal to leftover.
0 commit comments