• Artykuł

     

WebMatrix 2 Beta - Color picker Udostępnij na: Facebook

Autor: Rafał Madycki

Opublikowano: 2012-05-07

Wprowadzenie

W tym artykule omówimy nową funkcję programu WebMatrix 2 beta – Color picker. Sprawdzimy do czego można go wykorzystać i w jakich miejscach, podczas tworzenia naszej strony, może się przydać. Pokażemy jego zastosowanie podczas tworzenia strony (m. in. w stylach CSS). Zaprezentujemy, jak szybko można pobrać kolor z palety barw oraz dowolnego miejsca na ekranie.

Czym jest Color picker?

Color Picker w WebMatrix 2 beta to narzędzie, które pozwala na pobranie dowolnego koloru z:

  • palety ostatnio używanych kolorów,
  • pełnej palety barw,
  • dowolnego miejsca na ekranie.

Możliwości Color pickera

Rys. 1. Okno wyboru kolorów.

Zaznaczone na rysunku elementy umożliwiają:

  1. Wybór jednego z ostatnio używanych kolorów.
  2. Rozwinięcie lub zwinięcie okna Color pickera.
  3. Wybór barwy koloru.
  4. Porównanie poprzednio wybranego koloru z obecnym.
  5. Zmiana przezroczystości wybranego koloru.
  6. Wybór koloru z dowolnego miejsca na ekranie.
  7. Wybór koloru z palety.

Kiedy używać?

Color picker zostanie automatycznie wyświetlony, gdy będziemy potrzebować pobrania koloru. Najczęściej odbywa się to przy tworzeniu stylu dla elementu wyświetlanego na stronie.

Przykładowo, w pliku HTML lub CSHTML stwórzmy element div, wypełniony kolorem:

<div style="background-color:#ffd800;"></div>

Zwróć uwagę, że już po napisaniu fragmentu <div style="background-color: pojawi się dodatkowe pole (Rys. 2.).

Rys. 2. Dodatkowe pole.

Pole to pokazuje ostatnio używane kolory w projekcie. W celu uzyskania więcej możliwości wyboru koloru (jak na Rys. 1.) należy kliknąć na przycisk „+”, po prawej stronie pola.

Z możliwości Color Pickera możemy także korzystać w plikach CSS, tworząc style dla strony.

Podsumowanie

W tym artykule poznaliśmy kolejną, nową możliwość, którą dostarcza WebMatrix 2 beta. Wiesz już, jak działa Color picker i w jakich sytuacjach możesz z niego korzystać.

W kolejnym artykule dowiemy się, jak zoptymalizować swoją stronę pod kątem wyszukiwarek, przy użyciu programu WebMatrix.