Графика, изградена само с CSS

Целта на този урок е не само да предостави възможност за визуализиране на данни за хора, които по някаква причина не могат да използват никакъв скриптов език. Той също така демонстрира неочакваната страна на CSS.

движение линията
всеки елемент

Как линейната диаграма може да бъде полезна? Потребителите, които разглеждат страницата ви, често не четат всяка дума. Линейните графики представят информацията в много по-достъпна и лесна за четене форма.

Как работи всичко?

Този метод се състои от следните стъпки: вземете структуриран HTML, заменете текста с изображение и, използвайки CSS спрайтове и абсолютно позициониране, създайте имитация на линейна графика. Използва се елементът dl. Елементът dl е оформен така, че да представлява координатната система, в която поставяме точките на графиката. Празният dl елемент трябва да изглежда така:

изградена

Размерите, които използваме за фоновата графика, определят размерите, които използваме за вложените елементи, така че всичко да се запълва добре. В нашия случай всеки елемент от диаграмата представлява един ден. За точки на графика използваме dd елементи със свързани елементи на span. Форматираме и поставяме елементите dd, така че да образуват линия от ленти по цялата графика. .

движение линията

Стилът за свързани обхвати позволява да се изгради линейна графика .

Принципът на заговор

Концепцията може да звучи обезсърчително. Но ако се вгледате внимателно в детайлите, ще видите, че логиката е съвсем проста. В примера елементът dd е с ширина 33 px и височина 330 px. Всеки от тези елементи представлява едно „движение на линията“ от предишната точка до следващата. Използваме едно изображение, CSS спрайт, което има всички възможни графични позиции на показване. Изображението показва, че в спрайта има линии, които се качват нагоре (нарастващи стойности) и надолу (намаляващи стойности). Чрез задаване на свойството на фоновото положение на свързания диапазон на определена стойност, ние избираме една от опциите за "линия" .