27 sie 2019

Losowy kolor w js

Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.

Najpierw style.

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.box {
  width: 200px;
  height: 200px;
}

Mały html

<div class="box"></div>

No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.

21 sie 2019

Responsive font - dynamiczna wielkość czcionki

Jednym z problemów jakie napotykamy podczas tworzenia strony responsywnej jest problem ze skalowaniem czcionek. Za każdym razem za pomocą breakpoints ustawiać wielkość czcionki. Dla konkretnego elementu.
W związku z tym że praktycznie zawsze korzystam z "rem" oraz "px" to aby podawać pełne wartości nie milion cyfr po przecinku np. "1.52293848rem" ustawiam pewien hack który to ułatwia.
Do elementu html dodaję:

html {
 font-size: 62.5%;
}

Jedynie za pomocą tej wartości mogę zrobić coś takiego jak ustawić "font-size: 20px" a także "font-size: 2rem" 🙂
Nie muszę przeliczać px na rem chodź i tak można zrobić to automatycznie w scss czy less, jakoś wolę ładne cyferki.

15 sie 2019

Prosty efekt parallax w css bez javascript

Prosty efekt parallax w css bez javascript
Co to takie parallax, jest to nic innego jak wrażenie głębi w wyświetlanym obrazie podczas skrolowania strony.
Tutaj pokaże bardzo prosty przykład jedno zdjęcie i tekst. Bardziej skomplikowane efekty niestety nie da się zrobić w czystym css ale to co zrobię w zupełności wystarczy do prostej strony - landing page.

Najpierw html, tak jak mówiłem nic szczególnego 😉

<div class="parallax"></div>
<div class="text">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>

A teraz css.

5 sie 2019

Licznik komentarzy Disqus

Naszym celem jest dodanie przy każdym artykule liczby komentarzy, które są dodane do artykułu.

Najpierw konfigurujemy nasz kod. W zakładce

TWOJEKONTO.disqus.com/admin/settings/community/

znajdują się trzy pola "Zero comments", "One comment", "Multiple comments".
Jeżeli chcemy mieć PL tłumaczenie należy je w tych miejscach zmienić.

Niestety w Disqus nie przewidzieli, że nasz język jest tak skomplikowany i występują pewne trudności, przydało by się jeszcze jedno miejsce na wpis.
Bo: 0 komentarzy, 1 komentarz, 2 komentarze ale gdzie miejsce na wpisać 10 komentarzy 🙂
No niestety nie da się tego obejść ja ostatnie pole zmodyfikowałem na taki wpis - komentarzy: 10

Teraz czas na konkrety, na dole strony dodajemy przed zamknięciem body

<script id="dsq-count-scr" src="//kodywig.disqus.com/count.js" async>

27 lip 2019

Tworzymy layout strony głównej za pomocą Grid

Nasz layout zostanie oparty o GRID. Bardzo dobrze sprawdza się do zarządzania wyglądem. Niestety jak zwykle wszystko rozbija się o to czy nasza storna ma być wspierana przez starsze przeglądarki jak opera mini czy ie 11, tzn. ie 10 i 11 wspiera grid ale w okrojonym zakresie.
Jeżeli tak to niestety grid nie jest dla nas, ale olejmy stare przeglądarki więcej na caniuse🙂

Założenia

Strona ma składać się z nagłówka w którym z prawej strony znajdzie się reklama, poniżej z lewej strony nawigacja a z prawej główny element strony z artykułem. Na dole strony stopka na całą szerokość.

| - Header ---------------- | - Ads - |
| - Nav - | --------- Article --------- |
| - Footer --------------------------- |