Pokazywanie postów oznaczonych etykietą galeria. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą galeria. Pokaż wszystkie posty

Place it

Umieść swoje screeny w realistycznych warunkach w ciągu kilku sekund.


Link: https://placeit.net

Fontello

Czcionki jak ikony.


Link: http://fontello.com/

JotForm

JotForm to darmowy generator formularzy online. W wersji darmowej istnieje ograniczenie do 100 formularzy miesięcznie. Brak reklam w gotowym formularzu.


Link: http://www.jotform.com/

Prefixr

Poprawney kod CSS we wszystkich przeglądarkach w przeciągu kilku sekund!


Link: http://prefixr.com/

Can i use ..

Tabele zgodności wsparcia HTML5, CSS3, SVG na podstawie przeglądarek desktopowych i mobilnych.


Link: http://caniuse.com/

Lorem pixel

Po wybraniu rozdzielczości (i ew. kategorii) obrazka, otrzymujemy jeden adres url przedstawiający obrazek spełniający nasze kryteria. Co ciekawe, link jest jeden, natomiast z każdym odświeżeniem otrzymujemy inny obrazek.

Dopisując na końcu adresu /jakiś_tekst/, uzyskamy znak wodny w lewej części obrazka.


Link: http://lorempixel.com/

Responsive Design Bookmarklet

Poręczne narzędzie do testowania wyglądu stron przy różnych rozdzielczościach.

Aby z niego skorzystać, należy dodać button do zakładek a następnie uruchomić go na testowanej witrynie internetowej.


Link: http://responsive.victorcoulon.fr/

Drugie alternatywne narzędzie - http://www.responsinator.com/

JPEGmini

Zmniejszenie rozmiaru pliku zdjęć nawet do 5x, przy zachowaniu ich oryginalnej jakości i formatu JPEG.


Link: http://www.jpegmini.com/

Color Hailpixel

Prosty sposób eksperymentowania z kolorami.


Link: http://color.hailpixel.com/

Animate.css

Zbiór animacji CSS działających w różnych przeglądarkach do wykorzystania w swoich projektach.


Link: http://daneden.github.io/animate.css/

Narzędzia dla designerów

Szablon do wykorzystania na stronach internetowych. Początkowo wszystkie elementy są widoczne, jednak po wskazaniu kursorem jednego z nich - wybrany zostaje przedstawiony jak dotychczas, natomiast inne elementy (grafika i tekst) stają się półprzezroczyste.


Źródło: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

HTML

<div id="wrapper"> <div id="columns"> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uhm2lxicMstLVKtjDbkE9GETH0TwKuhDmhEFRmDh8S5m7KMvr-mZD1ExgBCkYmd3nzxDx4S0HM6FjYplD0CrBgF90ZNCpr3Y4fTtzW7rxr2bB_ryeCe9g=s0-d"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tdmseqonHTJOqr7wDhZw8XyqoHCiJ1gUdHbbTBHqflzQyWSjt8QHNyP3RfyL9ipW9vQno_7lPUc60VQXW0r-EmgvMveNDxLsnfVwnWJdONt7EHfNeMns8=s0-d"> <p> Donec a fermentum nisi. </p> </div> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vodV86TFlNQ9CMOOMyk9ZQGW7EDO8wY7sZoXq83PQBbADwIWrlOalRpAFH3Sy6mPwbcLwwKdOAZdEloSuR4XlY2Wgs_MIvFb473egXao3LFEi1SI4GkVU=s0-d"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. </p> </div> </div> </div>

CSS

body { background: url(http://subtlepatterns.com/patterns/scribble_light.png) ; } #wrapper { width: 90%; max-width: 1100px; min-width: 800px; margin: 50px auto; } #columns { -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 3; column-gap: 15px; column-fill: auto; } .pin { display: inline-block; background: #FEFEFE; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 0 2px 15px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 15px; padding-bottom: 5px; background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); opacity: 1; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .pin img { width: 100%; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 5px; } .pin p { font: 12px/18px Arial, sans-serif; color: #333; margin: 0; } @media (min-width: 960px) { #columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } @media (min-width: 1100px) { #columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } } #columns:hover .pin:not(:hover) { opacity: 0.4; }

CSS - Layout z efektem Hover (inspiracja: Pinterest)