tab ze skalą kolorów

Question

hej, mam nadzieję, że nie uznacie tego za 'gotowca', ale kompletnie nie wiem jak sie to zabrać, a jetem straszna lama w css

Jak w CSS (to nie ma być obrazek) uzyskąć taki efekt

https://ibb.co/H2JJBH1

chodzi o to kolorowe :D tzn. jak zrobić żeby była skala kolorów (od x do y) ?

 

sama skale kolorow udaje mi sie uzyskac tu

https://www.colorzilla.com/gradient-editor/

ale czy rzeczywiscie to musi byc tak skomplikowane?

i jak z tego zrobic taka 'tabletkę'

 

chodzi mi rowniez o to, ze czasem ta 'tabletka' bedzie bardzo długa

Comments

Jak w CSS (to nie ma być obrazek) uzyskąć taki efekt

https://ibb.co/H2JJBH1

 

..., ale kompletnie nie wiem jak sie to zabrać, a jetem straszna lama w css

 

np. tak

<div class="table-container">
  
  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 1
    </div>
  </div>
  
  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 2
    </div>    
  </div>
  
  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 3
    </div>
  </div>
  
  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 4
    </div>
  </div>
  
  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 5
    </div>    
  </div>
  
  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 6
    </div>
  </div>

  <div class="row">
    <div class="row--gradient"></div>
    <div class="row--content">
      Lorem 7
    </div>
  </div>

</div>

 

* {
  box-sizing: border-box;
}
html,
body {
  background-color: white;
  margin: 0;
  padding: 0;
}

.table-container {
  max-width: 90vw;
  background-color: whitesmoke;
  margin: 1em auto;
  padding: 0.5em 0 0.5em 1.5em;
}
.table-container .row {
  display: flex;
  width: 100%;
  height: 6em;
  margin: 1em;
  background-color: white;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
.table-container .row .row--gradient {
  width: 1.4em;
  height: 100%;
  margin: 0;
  border-radius: 1em;
}
.table-container .row .row--content {
  font: 400 1em/1.1 system-ui;
  width: 100%;
  margin: 0.5em;
}

/* kolor tła od pierwszego .row i co trzeci */
.table-container .row:nth-child(3n+1) .row--gradient {
  background-color: #fa8977; /* ustawi ten kolor jak linear-gradient "nie zadziała" */
  background-image: linear-gradient(to bottom, #fa8977, #f78ca1);
}
/* kolor tła od drugiego .row i co trzeci */
.table-container .row:nth-child(3n+2) .row--gradient {
  background-color: #fcd362;
  background-image: linear-gradient(to bottom, #fcd362, #efa168);
}
/* kolor tła od trzeciego .row i co trzeci */
.table-container .row:nth-child(3n+3) .row--gradient {
  background-color: #45d9d9;
  background-image: linear-gradient(to bottom, #45d9d9, #49b2f0);
}

 

lub np. tak

<div class="table-container">

  <div class="row">
    <div class="row--content">
      Lorem 1
    </div>
  </div>

  <div class="row">
    <div class="row--content">
      Lorem 2
    </div>    
  </div>

  <div class="row">
    <div class="row--content">
      Lorem 3
    </div>
  </div>

  <div class="row">
    <div class="row--content">
      Lorem 4
    </div>
  </div>

  <div class="row">
    <div class="row--content">
      Lorem 5
    </div>    
  </div>

  <div class="row">
    <div class="row--content">
      Lorem 6
    </div>
  </div>

  <div class="row">
    <div class="row--content">
      Lorem 7
    </div>
  </div>

</div>

* {
  box-sizing: border-box;
}
html,
body {
  background-color: white;
  margin: 0;
  padding: 0;
}

.table-container {
  max-width: 90vw;
  background-color: whitesmoke;
  margin: 1em auto;
  padding: 0.5em 0 0.5em 1.5em;
}
.table-container .row {
  position: relative;
  width: 100%;
  height: 6em;
  margin: 1em;
  background-color: white;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em; 
  padding-left: 2em;
}
.table-container .row::before {
  position: absolute;
  left: 0;
  content: '';
  width: 1.4em;
  height: 100%;
  border-radius: 1em;
}
.table-container .row .row--content {
  font: 400 1em/1.1 system-ui;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* kolor tła od pierwszego .row i co trzeci */
.table-container .row:nth-child(3n+1)::before {
  background-color: #fa8977; /* ustawi ten kolor jak linear-gradient "nie zadziała" */
  background-image: linear-gradient(to bottom, #fa8977, #f78ca1);
}
/* kolor tła od drugiego .row i co trzeci */
.table-container .row:nth-child(3n+2)::before {
  background-color: #fcd362;
  background-image: linear-gradient(to bottom, #fcd362, #efa168);
}
/* kolor tła od tzeciego .row i co trzeci */
.table-container .row:nth-child(3n+3)::before {
  background-color: #45d9d9;
  background-image: linear-gradient(to bottom, #45d9d9, #49b2f0);
}

 

Answer 1

czy rzeczywiscie to musi byc tak skomplikowane?

Nie musi. Sporo kodu z tego edytora to tzw. fallbacki dla starszych przeglądarek [1, 2, 3]. W najprostszym przypadku wystarczy podać dwa kolory do gradientu, na przykład: https://codepen.io/ScriptyChris/pen/JjpBJOG

Dodatkowo, możesz sobie użyć color pickera dostępnego w devtoolsach przeglądarki, aby dobrać odpowiedni kolor i nie musieć korzystać z zewnętrznych narzędzi.

jak z tego zrobic taka 'tabletkę'

Aby otrzymać "tabletkę", możesz zaokrąglić rogi prostokąta przy pomocy border-radius.

Comments

Dzięki!