Как сверстать данные эл-ты?

Question

[GaserV]

Подскажите, как правильно сверстать такое дизайнерское чудо, при условии что в зависимости от % будет заполнена рыба и будет два вида. Сначала идет рыбат хвост-голова, следующая голова-хвост и т.д.

Answer 1

[Александр]

Вот что у меня получилось:


https://dl.dropboxusercontent.com/u/41168881/fish.zip

Comments

[GaserV]

супер, спасибо

[GaserV]

можно Вас попросить вырезать голову в обратном направлении? Просто я в ФШ не знаю как это делается. Буду очень благодарен

Answer 2

[Sergej]

png/svg хвост и голова которые имеют z-index выше чем div с процентами

Comments

[Сергей Горячев]

Дополню, что для правильной верстки, хвост и голову нужно вырезать не саму рыбу, а рамку вокруг рыбы, чтобы пространство рыбы в дальнейшем заполнялось процентами.

[GaserV]

Sergey Goryachev: именно, хвост и голова тоже заполняются, в этом и головоломка

[Sergej]

GaserV: Нет головоломки. Вам был дан ответ в виде схемы, даже дополнили.
Если вы не знаете что такое png, и как вырезать так что бы голова и хвост были прозрачные, то бросайте разработку.
Почему бросать ?
Вы не можете думать банальным простым HTML+CSS, как сделать слои и т.д.
Дайте мне исходник рыбы и я сделаю верстку за 5-10 минут, при том что я не фронтенд.

[Danila]

Doc: слои, если пнг прозрачная, то она примет цвет её фона, допустим мы вложили её в слой с белым цветом, каким образом этот белый слой примет форму головый? Или я что-то не знаю о пнг?

[Sergej]

Данила: Вы не знаете html.
Причем тут png и полоска которая заполняется?
Вот png головы


Слои которые будут под ней, хоть серобурмалиновые... какая разница?
У вас голова не меняет цвет, png статичен. Меняется то что под ней.

Короче учим html, css, слои и позиционирование.
Затем учим как создать png с прозрачным основанием головы.
Далее учим js, что бы сделать проценты динамичными.

[Sergej]

Данила: Ну и конечно учимся мыслить не прямолинейно, а как настоящий разработчик.
Т.к. вы должны не думать о слоях, html и т.д., а понимать на уровне сознания. Вы ведь не задумываетесь когда делаете шаг по дороге, а в мозгу дается команда, которая отправляет импульс нервным окончаниям и т.д. Тоже самое и с базовым html/css

[Sergej]

Данила: GaserV: Ночь, я после паба =) Вот набросок.

<div class="fish">
    <div class="fish-png"> <!-- z-index 3 -->
        <div class="fish-tail"><img src="tail.png"></div>  <!-- position absolute left -->
        <div class="fish-head"><img src="head.png"></div>  <!-- position absolute right -->
    </div>
    <div class="fish-processbar">65%</div>   <!-- js, z-index 2 -->
    <div class="fish-bg"></div>  <!-- bg #FFF, size fish-bg == fish -->
</div>

[Danila]

Doc: html тут не при чем, я не правильно понял вашу мысль о png, в данном случае её нужно вырезать с фоном бэкграунда, чтобы перекрывать края белого слоя, а форму головы делать прозрачной.
И спасибо что разъяснили.

[Zhainar]

Лучше рамку рыбы сразу в свг для адаптивности и возможности менять цвет.