Sunnyside Landing Page Using Scss and GRID for Layouting

Community feedback

• 

  Ren Ras•420

  @renrasPosted almost 3 years ago

  You can change the color of the svg by replacing its 'fill' attribute directly in the svg file. I haven't really found any simpler way than doing this.

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Yunus,

  I'd recommend learning how to work with inline svg's. There are a lot of benefits to using them like fewer http requests improving performance, you can use classes on them and change the colour with the fill property and animate them.

  This is pretty good place to start: https://www.youtube.com/watch?v=af4ZQJ14yu8

  All the best!

  0
• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted almost 3 years ago

  Regarding your query: I personally have encountered these issue many time and there are two methods I use depending on what type of color change needs to be done.

  *1 If it's about a make the color darker or lighter, you can do it with filter property:

          filter: brightness( values < 100% lighter it darker | value > 100% makes it brighter)
  }```
  There are a number of other values for filter which are mostly function and by combining them you can create any custom color that you might need. For this taks you should use a css filter generator, no need to spend hours finding the right function and values.
  
  *2 If the first methods does not work you can change the internal structure of that svg for a specific state, for instace often time your goal is to change the color of the svg in an interactive state such as hover, in this case you can modify the color in svg implementation and on hover state provide that asset. Svg filter allows you to do that but you need a basic understanding of how to Svgs work:
  ``` .element:hover{
       content: url(the address of the svg with modified color)
  }
  

  Read this article for a deeper explanation

  Keep coding :=)

  0