Tym razem też krótka podpowiedź z zakresu CSS, będzie mowa o cieniu. Cień podąża za obiektem w słoneczny dzień i nie ma szans na jego pozbycie się. W przypadku CSS standardowo cienia nie ma. Zwykły napis bez cienia wygląda tak:
Czytaj dalej Shadow – cień w CSS
Tag: HTML5
Strzałki w css
Serdecznie zapraszam na stronę fotoRAF – moje fotografie z ofertą dotyczącą fotografii.
Nieraz potrzebujemy na swojej stronie dodać strzałkę typu „up” lub „down”. Można wstawić obrazek ale niekoniecznie musi być to jedyne rozwiązanie. W tym celu możemy wykorzystać CSS.
Przykładowy kod do wstawienia na stronie dla strzałki do góry:
<div id="top"></div>
Wskaźniki od highcharts.
Zostałem wywołany do tablicy więc muszę odpowiedzieć. Jeden z czytelników zasugerował mi użycie biblioteki JavaScript o nazwie HighCharts https://www.highcharts.com. Jako, że zawsze lubiłem wykresiki to postanowiłem się z nią zapoznać. Na pierwszy ogień poszedł wskaźnik czyli „gauge”. By utworzyć sobie taki wskaźnik musimy mieć szkielet naszej strony gdzie wywołujemy odpowiednie skrypty wskaźnika oraz biblioteki jQuery.
Szkielet „czystej strony”:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Wykresy i wskaźniki</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> </head> <body> </body> </html>
Slider w innej postaci – tym razem jQuery
Poprzednio męczyłem suwak oferowany przez HTML5 a teraz będzie suwak ale z wykorzystaniem jQuery oferowany przez jQueryUI.
Na początek do sekcji head naszej strony musimy dodać linki do potrzebnych zasobów (mogą być one pobrane np. z google -> https://developers.google.com/speed/libraries/#libraries)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"><!-- plik stylów dla jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>