CSS HTML

Community feedback

• 

  Eduardo•910

  @KTrick01

  Posted almost 3 years ago

  Hi Kate! You can change the blur of the shadow adding a third value like this box-shadow: 4px 4px 50px black. About the border of the avatar, first you should use this property border-radius: 50%; this will make square images become "circular", then you can use border: 1px solid white for the border. I hope that it helps you!

  13

  Marked as helpful
• 

  jerry•300

  @realsale

  Posted almost 3 years ago

  Yo! Kate,

  First of all congrats submitting your solution, It wasn't bad at all.

  Regarding to your question:

  1 To make a shadow looks like a gradient or fading same as the background, I use the original background-color and adds three layers of it with different sizes and lightness using the hsl

  .component {
    box-shadow:
      0 0 45px hsl(217deg 54% 11%), // largest layer, same color and lightness
      0 0 35px hsl(217deg 54% 9%), // middle layer, same color with decrease lightness
      0 0 20px hsl(217deg 54% 6%) // inner layer, same color and the darkest
  }
  

  2 There's a couple of way place an image and a text content together, One way is using flex, Setting display property to flex allows you to use other flex container properties e.g. justify-content|align-items etc. that can be used to manipulate and controls flex-items(children)

  Beginners guide to flexbox

  // markup
  <div class="tag">
    <img src="./some/path" alt="foo" />
    <p class="tag__details">Foo bar</p>
  </div>
  
  // style
  .tag {display: flex; align-items: center;}
  .tag__details{margin-left: 6px;}
  

  3 Make sure you set your image dimension length equal both in width and height, then set the border and border-radius: 50%;

  00
• 

  Kate•30

  @unic0rnKate

  Posted almost 3 years ago

  Please someone explain to me why on the web everything looks good and on its place but when i post here it looks like everything is flying around? what i do wrong.......................? Maybe the way I’m moving elements is not right? I searched all google and cannot find any answers. Please help me, thank you!

  02