HTML - Strona 6 - Kody, triki, sztuczki

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.

Czytaj dalej

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>

Czytaj dalej

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 --------------------------- |

Czytaj dalej

17 lip 2019

Numerowanie rekordów za pomocą CSS

Przejdźmy od razu do rzeczy, chciałbym aby w liście li znajdowała się cyfra, zwykła numeracja. Nie zrobimy tego w js, php tylko w czystym css.

<ul>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  ...
</ul>

Użyjemy css

ul {
  list-style: none;
  counter-reset: section;
}

li:before {
  padding-right: 10px;
  counter-increment: section;
  content: counter(section);
}

Czytaj dalej

30 cze 2019

RGB na HEX

Oczywiście poprzednio było HEX na RGB to oczywiście logiczne jest aby też podać i konwersję w drugą stronę 😉

function rgbToHex(rgb) {
  let hex = Number(rgb).toString(16);
  if(hex.length < 2) {
    hex = '0' + hex;
  }
  return hex;
}

function colorHex(r,g,b) {
  return rgbToHex(r) + rgbToHex(g) + rgbToHex(b);
}

A wywołanie to zwyczajne przekazanie funkcji trzech liczb na które składa się kolot rgb(0, 161, 255).

console.log(colorHex(0, 161,255)); 
// => w wyniku otrzymujemy #00a1ff