jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

31
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>carousel1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel1.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-2" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="412" height="70"></rect>
<path d="M244,59 L36,59 L36,196 L244,196 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

33
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>carousel2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel2.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="449.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="517.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-3" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="546" height="70"></rect>
<path d="M450,59 L242,59 L242,196 L450,196 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="PTMono-Regular, PT Mono" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="246.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

4
2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
View file

@ -2,7 +2,7 @@ The images ribbon can be represented as `ul/li` list of images `<img>`.
Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
![](carousel1.png)
![](carousel1.svg)
To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
@ -10,7 +10,7 @@ For `<img>` we should also adjust `display`, because by default it's `inline`. T
To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
![](carousel2.png)
![](carousel2.svg)
The outer `<div>` has a fixed width, so "extra" images are cut.