Бравий довідник css-властивостей для новачка

Як новачки вивчають css-властивості?

Вони читають про всі властивості, які тільки є, те, що запам'ятовують, в основному тільки width, height і background, а потім постійно нишпорять за своїми конспектами і гуглу, намагаються згадати яке властивість за що відповідає, як воно пишеться і які у нього є значення.

І тут мені прийшла в голову ідея. А що якщо зробити таку штуку, яка наочно показує як пишуться і працюють всі css-властивості? Причому, все це на одній сторінці.

Таким чином, за два вечори створився ось такий css-помічник: lesson-web.ru/css_helper



image

У лівій частині ми бачимо результат роботи css-властивостей, а справа, власне, список css-властивостей, які ми можемо побачити в дії.

У вікні результату у нас є один, начебто, div з класом .box.
Якщо встановити властивість float, то у вікні з'явиться три однакових блоку.

Так само, можна задати текстовий вміст цього блоку. Є п'ять варіантів:



В блоці з css-властивості ми можемо:

  • активувати або деактивувати властивість, клікнувши по checkbox;
  • задати значення властивості;
  • зрозуміти властивість простою російською мовою
  • якщо на сайті є опис по даній властивості, то можна перейти за посиланням і більш детально вивчити його.




Значення можна задати трьома способами:
  1. Просто ввести значення у input
  2. Якщо це колір, то вказати його на панелі
  3. Якщо властивості якщо стандартний набір значень, то можна вибрати його зі списку


Власне, ось така приємна дрібниця вийшла)

Якщо у вас є якісь ідеї, як можна поліпшити цей помічник, то з радістю почитаю їх у коментарях!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.