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}

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

Bootony – bootstrapowe przyciski

Klik, klik – przyciskamy myszą te przyciski OK, Anuluj, Wyślij i co tam jeszcze komu wpadnie do głowy. Nie zwracamy na nie uwagi (no chyba, że nie można odczytać co jest na nich napisane) do momentu gdy sami  nie potrzebujemy mieć dokładnie takich jak chcemy.

Bootstrap daje nam kilka możliwości w zakresie przycisków. Załóżmy, że mamy kilka linków tak jak w przykładzie poniżej i chcemy je przekształcić w przyciski – jest to możliwe z wykorzystaniem CSS i HTML ale trochę trzeba zrobić (https://www.rafalrebacz.pl/2015/09/20/buttony-ach-buttony/). Podobnie działa bootstrap z tym, że daje nam już gotowe klasy, które mogą być wykorzystane do formatowania linków (zmiany ich w przyciski).

Przykładowo: mamy zwyczajny link

<a href="#">uruchom</a>

który wyświetli się tak: uruchom Prawda, że mało przyciskowo wygląda?
Czytaj dalej Bootony – bootstrapowe przyciski

Buty na półce

Odstawiliśmy buty na półkę w szafie, grzecznie, w porządeczku czekają tam na nas. Gdyby tak popatrzyć na tą szafkę to buty siedzą w niej jak dane w tabeli. Każda para na swoim miejscu. Przez analogię szafki na buty do zagadnienia formatowania tabeli w Bootstrap – też mam skojarzenia ;).

No ale już tak bardziej na serio. Bootstrap daje nam możliwość formatowania tabeli. Mamy tabelę taką jak w poniższym kodzie:
Czytaj dalej Buty na półce

Obuwnicze zmagania z materią

Ciąg dalszy spotkania z bootstrap. W poprzednim artykule https://www.rafalrebacz.pl/2015/09/20/jak-obuwie-moze-ulatwic-zycie/ było kila słów o tym jak zacząć przygodę z frameworkiem bootstrap. Teraz ciąg dalszy, w którym pokażę jeszcze kilka ciekawych możliwości, które są oferowane przez bootstrap.

Tak jak było już wspominane grid składa się z 12 kolumn jednakowej szerokości, w oparciu o które budujemy szablon strony. Poprzednie przykłady pokazywały rozwiązania polegające na zapełnieniu okna kolumnami z treścią. Przykład poniżej pokaże, że nie zawsze musi być treść – czasem może jej nie być (bo będzie offset).

Offset

Jak działa offset? Bardzo prosto – przesuwa nam kolumnę z treścią o „n” pozycji.
Czytaj dalej Obuwnicze zmagania z materią