Jasssonpet

Личен блог на Джейсън Жеков

Как да си направим jQuery-подобна библиотека

Нека имаме следния HTML:

1
2
3
4
5
6
7
<ul>
  <li id="selected-item">Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
</ul>

Манипулация на един елемент:

1
2
3
4
5
document.getElementById('selected-item').innerHTML = 'New Element'

document.getElementById('selected-item').addEventListener('click', function() {
  console.log('item clicked')
})

CSS Gradient Masks

Демо: Gradient masks.

Ето малко разяснения за идеята за CSS градиент като маска. Както знаете, за да сложите фон на даден елемент се използва background property. Фонът може да е цвят: background-color или картинка: background-image. Когато са зададени и двете, картинката се показва над фона.

Нашата цел е да преизползваме вече написан код и лесно да си сменяме цвета на фона. За целта правим черно-бяла маска на всички елементи като градиент, който се води като backround-image.