WebMatrix 2 Beta - Color picker
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ą:
- Wybór jednego z ostatnio używanych kolorów.
- Rozwinięcie lub zwinięcie okna Color pickera.
- Wybór barwy koloru.
- Porównanie poprzednio wybranego koloru z obecnym.
- Zmiana przezroczystości wybranego koloru.
- Wybór koloru z dowolnego miejsca na ekranie.
- 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.