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

Strzałki w css

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

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

Slider – zadawanie przez przesuwanie

Gdy pojawi się potrzeba wprowadzania wartości liczbowej to możemy posłużyć się „sliderem” (suwakiem), który znany jest od dawna w wielu środowiskach programistycznych.

Wykorzystać można do tego celu tag <input>, który z parametrem range tworzy suwak:

<input type=range">

o wyglądzie takim jak zamieszczony poniżej (obrazek z Mozilla Firefox):

suwak1Do szału toto doprowadzić nie może no ale lepiej taki niż żaden :).

Suwak możemy dostosować do własnych potrzeb. Można podać zakres minimalny i maksymalny. Można podać „skok” z jakim zmieniać będzie się wartość powiązana z suwakiem. Można dodać domyślną wartość val, którą będzie przyjmować suwak po uruchomieniu strony. Jeśli pokusimy się o takie zmiany w kodzie strony umieścić musimy coś podobnego. Oczywiście min może być wartością ujemną a step np. dziesiątkami.

<input type="range" min="0" max="40" step="0.1" val="20">

Sam suwak to trochę mało by coś sensownego z tego wyszło. Poniżej „goły suwak” oraz dwa przykłady użycia suwaka z dodatkami.

Czytaj dalej Slider – zadawanie przez przesuwanie

Mniej znaczy więcej czyli kilka słów o {LESS}

Mniej znaczy więcej – co za tym się kryje? Tym razem będzie kilka zdań na temat jednego popularnego preprocesora CSS czyli LESS (https://lesscss.org/)

Chcąc wykorzystać LESS na stronie umieszczamy w jej kodzie poniższą linijkę (zazwyczaj w <header>) po odwołanu się do pliku z definicją styli.

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

W rezultacie to co mamy umieścić w kodzie strony wygląda następująco.

<link rel="stylesheet/less" href="css/style.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

W pliku style.less umieszczamy nasze deklaracje wykorzystujące polecenia less co po kompilacji (co może zachodzić w locie, przy ładowaniu strony gdy używamy powyższego skryptu less.min.js lub przy użyciu zewnętrznego kompilatora) doprowadza do stworzenia pliku definicji stylów *.css
Czytaj dalej Mniej znaczy więcej czyli kilka słów o {LESS}

Wskaźniki od Google

Z racji innych zajęć (automatyka przemysłowa, budynkowa, elektronika) interesują mnie sposoby prezentowania danych na stronach www. Ostatnio wpadł mi w oko wskaźnik, który jest na Google Developers https://www.rafalrebacz.pl/examples/gauges/gauge1.html. Można napisać – „śliczności” bo tak ładnie się prezentuje. Schludny, czytelny, animowany (zmienia wskazanie pobierając dane w tle) – nic tylko brać.
Czytaj dalej Wskaźniki od Google

Glify i inne

Zapewne nie raz widzieliście na stronach przyciski (lewo, prawo, góra, dół itd.) na których znajdowały się strzałki w postaci np. trójkąta, czy też znaków „<” czy „>”. Bootstrap oferuje wiele tego rodzaju „znaczków” zwanych glifami, które mogą być zastosowane na stronach. Kilka przykładów poniżej a pełna lista na stronach bootstrap (https://getbootstrap.com/components/#glyphicons)
Czytaj dalej Glify i inne

Obrazki bootstrap

Responsywnie

Czegoś takiego jak obrazki, zdjęcia na stronach fotografów jest od groma, podobnie w sklepach, katalogach itp. Nie umknął ten fakt twórcom bootstrap i także obrazki mają coś od nich. Dzięki klasom przeznaczonym do formatowania obrazków mamy możliwość uczynienia ich responsywnymi (skalują się wraz z elementem rodzica – na smartfonie są malutkie a na laptopie duże).

Poniższy przykład można obejrzeć też na stronie -> https://www.rafalrebacz.pl/examples/bootstrap/obrazki1.html oraz https://www.rafalrebacz.pl/examples/bootstrap/obrazki1noresponsive.html
Czytaj dalej Obrazki bootstrap