There is a seemingly simple picture. But it's hard for me to make it. bezier and gradient curves as

  1. how to draw a gradient over pictures
  2. how to add these lines?
  • Are you sure that this is not one image? - smellyshovel
  • one
    Layout should be rubber? Adaptive? If not, I would advise you to insert this in a picture with a width: 100% . You can even svg. - Vitaly Emelyantsev
  • make-up yes, should be rubber. I make up the bootstrap on the grid. - Miroslav

2 answers 2

I think it makes no sense to impose curves, it is not justified, you can read about SVG and make them on SVG, or you can make separate circles with icons and backgrounds, make lines, this would be the best option, save time and effort. The gradient is made very simple, for example, you have a parent container in which the auto icon lies, in the same container add another element with the class .overlay with the background-image parameter: linear-gradient

 .vehicle__layer { height: 100px; width: 100px; border-radius:50%; border: 1px solid black; position: relative; overflow: hidden; display: flex; } .vehicle__layer::after { content: 'your icon'; font-size: 20px; color: black; margin: auto; } .vehicle__layer__overlay { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.2) 30%, #000 100%); } 
 <div class='vehicle__layer'> <div class='vehicle__layer__overlay'></div> </div>

  • The trouble is that the gradient should go to 4 icons, without a fill. The fact that this should be an additional layer, I understood myself. Yesterday did the same for the text. Now here's a need for pictures. But not yet. And the curves I do not care for SVG, but I can’t find the info - how to overtake from Photoshop into this format ( - Miroslav
  • Can I see a screen with a fill? I used to drive through the illustrator. - Anton Essential
  • youtube.com/watch?v=znZlmDYOPaA try the query convert psd to svg, or something like that, there was enough information before. I would dwell on the option with the background. less fuss. It depends on what tasks, if these are just static pictures with some kind of hover, then there’s a reason to fence there, even if I do responsive, then at a certain resolution I would drop these icons in a column and naturally put the background in the non-display. - Anton Essential
  • one
    By the gradient understood, make each icon the color of which it is. There is no obvious gradient, each icon changes completely in gradation. I thought that the gradient is obvious. - Anton Essential
 ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эти Π»ΠΈΠ½ΠΈΠΈ?

Alternatively, make them a background image, as was said in the comments.

 ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ

Do not complicate the task. In this case, it is clear that there is no gradient on the pictures themselves, so just use a pipette to find out the colors of these four pictures and manually set these colors for them, that's all.