Tag: HTML5

Shadow – cień w CSS

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

Powiązane wpisy:

  1. Strzałki w css
  2. Slider w innej postaci – tym razem jQuery
  3. Mniej znaczy więcej czyli kilka słów o {LESS}
  4. Slider – zadawanie przez przesuwanie
  5. Wskaźniki od highcharts.

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>


Czytaj dalej Strzałki w css

Powiązane wpisy:

  1. Shadow – cień w CSS
  2. Slider w innej postaci – tym razem jQuery
  3. Glify i inne
  4. Slider – zadawanie przez przesuwanie
  5. Wskaźniki od highcharts.

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>    

Czytaj dalej Wskaźniki od highcharts.

Powiązane wpisy:

  1. Slider w innej postaci – tym razem jQuery
  2. Shadow – cień w CSS
  3. Wskaźniki od Google
  4. SQLite i kilka godzin straconych na poszukiwaniu rozwiazania
  5. Konwencja nazewnicza w bazach danych

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>

Czytaj dalej Slider w innej postaci – tym razem jQuery

Powiązane wpisy:

  1. Slider – zadawanie przez przesuwanie
  2. Strzałki w css
  3. Shadow – cień w CSS
  4. Wskaźniki od highcharts.
  5. Mniej znaczy więcej czyli kilka słów o {LESS}