16 Paź 2019

Jak dodać kolorowe markery w postaci svg oraz legendę do map z leaflet

Założenia naszego przykładu to:
– markery w różnych kolorach
– kolory markerów opisane w legendzie po prawej stornie na dole

Markery

Aby markery miały różne kolory najlepiej wykonać je w svg a kolory uzyskujemy przez dodanie parametru fill=”nasz-color”. Oczywiście jest wiele innych możliwości, jak wykorzystanie png, czy nawet font awesome i kolorowanie odpowiednie i wiele innych.

Zaczynamy od stworzenia html, do którego w sekcji head dodajemy style oraz js z cdn dotyczące leaflet. Html posiada div z id map, do którego będziemy „pakować” całą mapę 😉

< !DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"/>
  <link rel="stylesheet" href="style.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
</head>

<body>
  <div id="map"></div>
  <script src="script.js"></script>
</body>

</html>
Czytaj dalej …
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 …
123…152