15 Sie 2019

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.

body, html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.parallax {
  background-image: url('https://picsum.photos/id/188/1200/1000');
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.text {
  min-height: 200px;
  padding: 20px;
  line-height: 160%;
}

Najpierw aby strona była na 100% wysokości musimy ustawić ten parametr dla html jak i body.
Do klasy „.parallax”

  • background-image dodajemy nasze zdjęcie
  • height: 100% ustawiamy to zdjęcie na całą wysokość okna
  • background-attachment: fixed który odpowiada a dokładnie decyduje czy położenie danego obrazka jest stałe względem okna, czy też przewija się wraz z zawierającym go blokiem.
  • background-position: center centrujemy element
  • background-repeat: no-repeat zdjęcie nie jest powielane
  • background-size: cover cover skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu jest on przycinany aby nie zostało puste miejsce

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>

Kod ten można użyć zarówno na linkach jak i innych elementach html.

Przykład użycia w linku:

<a href="http://example.com/artykul.html#disqus_thread" data-disqus-identifier="identyfikator-artykulu">artykul</a>

Przykład użycia w elemencie span:

<span class="disqus-comment-count" data-disqus-identifier="identyfikator-artykulu">artykul</span>

lub

<span class="disqus-comment-count" data-disqus-url="http://example.com/artykul.html">artykul</span>
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

Do rozdzielczości 575px wygląd elementów ma być następujący. Wszystkie elementy w jednej kolumnie.

Header
Article
Nav
Ads
Footer

Najpierw podstawowe style

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Proxima Nova Regular, Segoe UI, Roboto, Droid Sans, Helvetica Neue, Arial, sans-serif;
  font-size: 20px;
}
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>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <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);
}
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