Como vocês fariam isso com CSS?

[omarkdev]

Estou com um projeto e não sei como fazer o background, aonde fica os círculos junto com a imagem de background. Alguém tem alguma solução? Obrigado.

[williamcosta]

@omarkdev bom pela imagem não dá para ter uma noção como um todo. Mas acho que uma div com background e border-radius de 50% e resolveria a posição e sobreposição dos elementos com absolute e z-index.

[batoreh]

Usando também rgba ou opacity para criar o efeito de sobreposição das cores. O z-index, no caso, seria crescente da direita pra esquerda.

[RuanAragao]

@omarkdev isso não seria um menu? Está um pouco limitada a visualização do modelo. Porém, é só seguir as dicas acima, minha preocupação por ser um menu é apenas em relação a semântica das tags.

Um exemplo bem rápido: http://jsbin.com/sihosarupo/edit?html,css,output

[akfzambrana]

Daria pra fazer o que o @williamcosta e o @netoguimaraes disse utilizando a tag nav pra envelopar tudo e tags a para cada bolinha, assim ficaria semantico e de acordo com o layout. Se fosse o caso poderia utilizar uma ul para não deixar os links largados dentro da tag nav

[felipefialho]

Fiz esse projeto em meados de 2014.

Veja se é mais ou menos isso: http://oxbib-info.oupexplore.com/

[omarkdev]

Acho que me expressei mal. A minha dúvida em si é o background com aquelas curvas, junto com a imagem de fundo, não os circulos.

[danilowoz]

Da mesma maneira, você pode fazer div circulares com background-image:

.foo-bg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(image.jpg) center/cover;
}

Ou ainda deixar a imagem com background 100% e criar uma espécie de máscara por cima com o detalhe curvado em PNG ou SVG.

É isso?

[batoreh]

Na pior das hipóteses, vc vai ter que fazer com svg. E se a pior das hipóteses é usar svg, seu problema é no mínimo algo legal kkkk

[felipefialho]

Particulamente gosto da ideia de usar SVG nesses casos.

[nighto]

Acho que eu faria a imagem de fundo sem o efeito de coloração por cima, e divs com opacidade baixinha (10%) para os círculos semitransparentes.

[leandroruel]

eu lembro que uma vez eu fiz um site com um menu desse naipe ai, mas com um submenu muito bizzaro também (obrigado designer!)