11 Wrz 2019

Animacja 3d w css

Animacja 3d w css możliwa już od wersji IE10, za pomocą przychodzi nam parametr perspective.
Nasza animacja będzie polegała na obracaniu sześcianu. Jak wiemy sześcian to sześć ścian więc zaczniemy od nich.

<div class="scene">
  <div class="cube">
    <div class="cube__wall cube__front">front</div>
    <div class="cube__wall cube__back">back</div>
    <div class="cube__wall cube__right">right</div>
    <div class="cube__wall cube__left">left</div>
    <div class="cube__wall cube__top">top</div>
    <div class="cube__wall cube__bottom">bottom</div>
  </div>
</div>

Jak widać nic szczególnego, scene – która zawiera div [cube] wraz z sześcioma ścianami. Każda ze ścian posiada napis tak aby można było zauważysz rotację tej kostki.
Teraz same „mięsko” a mianowicie css. Zaczynamy od podstaw zbudowanie podstaw, body na 100% wysokości do tego dodam animację backgroundu – tutaj wykorzystałem z [ generatora gradientów ]

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f0f0;
  background-image: linear-gradient(to right bottom, #051937, #004a7b, #0081a0, #00b993, #12eb54);
  background-size: 200% 200%;
  animation: animationGradient 5s ease infinite;
}

@keyframes animationGradient {
  0% {
    background-position: 10% 0%
  }

  50% {
    background-position: 91% 100%
  }

  100% {
    background-position: 10% 0%
  }
}

Teraz najważniejszy element, css odpowiedzialny za wygląd sześcianu.

Czytaj dalej …
4 Wrz 2019

Animowany baner

Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.

<div class="container">
  <div class="image-bgr">
    <img src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
  </div>
</div>

Teraz odpowiedni styl do wyświetlenia tego zdjęcia centralnie.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.image-bgr {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 220px;
  overflow: hidden;
  margin: auto;
}

.image-bgr img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Najważniejsze klasy to w naszym przykładzie „.image-bgr” oraz „.image-bgr img”
Pierwsza klasa tworzy box o wymiarach max 900px i min wysokości 220px.
Do tego posiada właściwość overflow hidden aby ukryć wszystko co wystaję poza obwód boxa.
Druga klasa, a dokładnie ta sam tylko że z elementem img dotyczy zdjęcia. Zdjęcie to ustawiamy jako position absolute. Centrujemy je tak aby było maksymalnie ustawione na 100% szerokości boxa. Do tego zdjęcie jest centrowane w pionie.

Teraz cześć najważniejsza – javascript

Czytaj dalej …
27 Sie 2019

Losowy kolor

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.

Czytaj dalej …
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.

A może jest lepszy sposób na to aby za każdym razem nie zmieniać czcionki za pomocą breakpoints. No oczywiście że jest, ale raczej do wykorzystania do stron mało skomplikowanych jak landing page, jakieś prezentacje, itd. Nie widziałem tego rozwiązania w dużych projektach, ale może się mylę.

Dobra zaczynamy. Na początek zwykły tekst który będzie poddawany testom 🙂

<h1>JAKAŚ TREŚĆ</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque sunt quasi quis voluptate tempora laboriosam. Ipsa sequi earum debitis facilis. Modi dolor deserunt voluptatem, earum debitis suscipit blanditiis voluptate doloribus.</p>
Czytaj dalej …
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

123…152