1

I would like to reproduce the following item in HTML/CSS:

enter image description here

The icon is actually from font awesome.

Here is what I achieved so far:

https://jsfiddle.net/0Lewug6p/1/

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />

    <link
      href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

<div class="search__filters__option">
  <div class="filter__icon"><i class="fas fa-dog"></i></div>
  Animaux autorisés
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

.search__filters__option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 15px;
  border-bottom: 2px solid #f2f2f2;
  border-top: 2px solid #f2f2f2;
  border-right: 2px solid #f2f2f2;
  text-align: center;
  border-radius: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.search__filters__option:hover {
  background-color: #deebff;
  color: #0065fc;
  cursor: pointer;
}

.filter__icon {
  margin-right: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  color: #0065fc;
  background-color: #deebff;
  display: flex;
  justify-content: center;
  align-items: center;
}

I have two issues concerning my code:

1- It doesn't perfectly match what's in the image, (For example, the colored circle doesn't have the right size).

2- I don't know if my code is clean, as I'm still pretty new to CSS and wanna learn best practices.

Thanks in advance for your help and explanations!

Platus
  • 1,753
  • 8
  • 25
  • 51
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Dec 29 '20 at 22:52
  • I feel you already have a right code :) I checked it.. It looks similar !!! If you still have something in mind let me know :) – Imran Rafiq Rather Dec 29 '20 at 23:15
  • @ImranRafiqRather it's not exaclty the same result, for example there is a small gap between the top and bottom part of the circle and the surrounding grey border. – Platus Dec 29 '20 at 23:17
  • When you say "For example, the colored circle doesn't have the right size)." What do you precise want to point at. :) – Imran Rafiq Rather Dec 29 '20 at 23:17
  • Try adding border-left:1px solid #deebff; on your icon – Imran Rafiq Rather Dec 29 '20 at 23:21
  • 1
    try this: https://jsfiddle.net/9eq1o7nu/4/ – Imran Rafiq Rather Dec 29 '20 at 23:24

1 Answers1

0

Your code looks good. Instead of your border definitions, you can use box-shadow:inset like this:

.search__filters__option {
  box-sizing: border-box;
  -webkit-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
  -moz-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
  box-shadow: inset 0px 0px 0px 2px #f2f2f2;
}

Also described placing-border-inside-of-div-and-not-on-its-edge.

Demo: https://jsfiddle.net/pr6htj01/

For more opacity, use the rgb notation for the color which supports an opacity value as last parameter and/or a darker color:

  -webkit-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  -moz-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);

Demo: https://jsfiddle.net/z7b6ey19/

Christian
  • 4,902
  • 4
  • 24
  • 42
  • Thanks, this is very close to what I want but with this method the generated "border" lacks opacity, any way to improve that? – Platus Dec 30 '20 at 21:35
  • You can use an rgb color instead of a hex value, such as `rgba(242, 242, 242, 1)` instead of `#f2f2f2`, but I think I would use a darker color in general, e.g. `rgba(128, 128, 128, 0.4)` or `#ddd` – Christian Dec 30 '20 at 21:52
  • Thanks, it's a bit better but I happen to be a perfectionnist and it's doesn't exactly match my source picture ^^' maybe a solution than maintains the usage of a border would achieve that... – Platus Dec 30 '20 at 21:56