1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Jak zrobić ruchome obrazki kategorii?

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 18 Maj 2017.

  1. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Na szybko pokażę jak zrobić ruchome obrazki kategorii :D

    W opisie kategorii wstawiamy:
    Kod:
    <div class="cal">
    <div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
    <div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
    <div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
    <div class="conta"><a href="/link"><img src="/public/assets/grafika/obrazek.png" alt="" width="100%" border="0" /></a></div>
    </div>
    
    Oczywiście podmieniając obrazki i linki na swoje.
    Następnie we własnym stylu dodajemy:
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
      transform:rotate(50deg); -webkit-transform:rotate(50deg); 
    -moz-transform:rotate(50deg); -o-transform:rotate(50deg); 
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    Obrazki po najechaniu będą się nam pochylały :)

    Oczywiście to wersja bardzo prosta i można ją nieco urozmaicić :)
     
    e-bestaplus.pl, hubert696 oraz Mariusz lubią to.
  2. Adriano

    Adriano Spryciarz

    Wiadomości:
    45
    Docenione treści:
    5
    TheL czy można gdzieś zobaczyć ten efekt ?
     
  3. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    zrób sobie plik html o treści:
    Kod:
    <div class="cal">
    <div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
    <div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
    <div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
    <div class="conta"><a href="/link"><img src="https://forum.home.pl/styles/pixelgoose/metro/red/xenforo/logo0.png" alt="" width="100%" border="0" /></a></div>
    </div>
    <style>
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
      transform:rotate(50deg); -webkit-transform:rotate(50deg);
    -moz-transform:rotate(50deg); -o-transform:rotate(50deg);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    </style>
    
    i uruchom go firefoxem to zobaczysz efekt :)
     
    hubert696 lubi to.
  4. Adriano

    Adriano Spryciarz

    Wiadomości:
    45
    Docenione treści:
    5
    dzięki :) nice :)
     
  5. hubert696

    hubert696 Zaglądacz

    Wiadomości:
    12
    Docenione treści:
    2
    Dobry bajer :) a co zmienić by zamiast obrotu w lewo było pomniejszenie lub powiększenie obrazka? :)
     
  6. Mariusz

    Mariusz pomoc.home.pl home.pl Administrator forum

    Wiadomości:
    3 060
    Docenione treści:
    300
    @TheL zajrzyj proszę tutaj do tematu, może w ramach wolnego czasu, będziesz mógł podać rozwiązanie hubertowi w ramach Twojego poradnika.
     
    hubert696 lubi to.
  7. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    do powiększania będzie zmieniony styl:

    Kod:
    .conta {
     float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
     
    hubert696 lubi to.
  8. hubert696

    hubert696 Zaglądacz

    Wiadomości:
    12
    Docenione treści:
    2
    Mariusz lubi to.
  9. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    jak tylko jakimś cudem znajdę chwilę to podam resztą efektów :D
     
    Mariusz i hubert696 lubią to.
  10. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Rozmycie:
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    blur.png
     
    iisjah lubi to.
  11. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Przyciemnienie
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: brightness(0.4);
    -moz-filter: brightness(0.4);
    -o-filter: brightness(0.4);
    -ms-filter: brightness(0.4);
    filter: brightness(0.4);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    przyciemnienie.png
     
    iisjah lubi to.
  12. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Rozjaśnienie
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: brightness(1.7);
    -moz-filter: brightness(1.7);
    -o-filter: brightness(1.7);
    -ms-filter: brightness(1.7);
    filter: brightness(1.7);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    rozjasnienie.png
     
    iisjah i Mariusz lubią to.
  13. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Nasycenie
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: saturate(600%);
    -moz-filter: saturate(600%);
    -o-filter: saturate(600%);
    -ms-filter: saturate(600%);
    filter: saturate(600%);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    nasycenie.png
     
    iisjah i Mariusz lubią to.
  14. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Odwrócenie barw

    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: hue-rotate(90deg);
    -moz-filter: hue-rotate(90deg);
    -o-filter: hue-rotate(90deg);
    -ms-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    odw-barw.png
     
    iisjah i Mariusz lubią to.
  15. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Kontrast

    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: contrast(200%);
    -moz-filter: contrast(200%);
    -o-filter: contrast(200%);
    -ms-filter: contrast(200%);
    filter: contrast(200%);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    kontrast.png
     
    iisjah i Mariusz lubią to.
  16. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Negatyw

    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    negatyw.png
     
    iisjah i Mariusz lubią to.
  17. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Skala szarości

    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    szarosci.png
     
    iisjah i Mariusz lubią to.
  18. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    sepia
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    sepia.png
     
    iisjah i Mariusz lubią to.
  19. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Cień
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: drop-shadow(8px 8px 10px black);
    -moz-filter: drop-shadow(8px 8px 10px black);
    -o-filter: drop-shadow(8px 8px 10px black);
    -ms-filter: drop-shadow(8px 8px 10px black);
    filter: drop-shadow(8px 8px 10px black);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    cien.png
     
    iisjah i Mariusz lubią to.
  20. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    520
    Przezroczystość
    Kod:
    .conta {
      float:left;
      width:21%;
      padding:2%;
    }
    .conta:hover {
    -webkit-filter: opacity(30%);
    -moz-filter:  opacity(30%);
    -o-filter:  opacity(30%);
    -ms-filter:  opacity(30%);
    filter:  opacity(30%);
    }
    .cal {
    width: 100%;
    float:center;
    margin:auto;
    }
    
    przezroczystosc.png
     
    iisjah i Mariusz lubią to.

Poleć forum znajomym