Archiwa kategorii: Narzędzia

Ax-zoomer – skrypt do zoomowania zdjęć w jQuery

ax-zoomer jquery

Prosty skrypt, który umożliwia przybliżanie zdjęć przy użyciu przycisków lub za pomocą rolki w myszce. W konfiguracji skryptu mamy możliwość ustawienia krotności zbliżenia, przeźroczystości, ikonki przycisków oraz czułości rolki myszy. Przy dodawaniu zdjęcia w znaczniku <img> ustalamy małe i duże zdjęcie. Podczas zoomowania, zdjęcie jest podmieniane przez skrypt z małego na duże.

 

ax-zoomer jquery

 

Framework: jQuery
Link: http://www.albanx.com/?pid=1&subid=13
Licencja: MIT, GPL

Watermark – znak wodny na zdjęciu – skrypt w JavaScript

watermarks javascript

Biblioteka js, która w czasie rzeczywistym pozwala dorysować do zdjęcia znak wodny. Skrypt jest napisany w języku JavaScript i nie wykorzystuje żadnych frameworków. W skrypcie możemy ustalić jaki obrazek ma być dołączany do zdjęć, ustawić jego przezroczystość, classe oraz pozycje. Takie rozwiązanie nie zabezpiecza jednak zdjęć przed kradzieżą ze strony, ponieważ można wyłączyć obsługę JavaScript w przeglądarce.

 

watermarks javascript

 

Link: http://www.patrick-wied.at/static/watermarkjs/
Demo: http://www.patrick-wied.at/static/watermarkjs/demos/demo2.html
Licencja: MIT

 

Google Page Speed – narzędzie online do optymalizacji strony WWW

google page speed

Google już od dłuższego czasu udostępnia narzędzie Page Speed jako plugin do przeglądarek Chrome i Firefox. Plugin ten pozwala na zbadanie czasu ładowania strony WWW i analizy poszczególnych składowych wczytywanych do przeglądarki. Od niedawna Page Speed jest dostępne w formie narzędzia internetowo. Nie trzeba więc korzystać z Chrome czy Firefox i instalować pluginu.

google page speed

link: http://pagespeed.googlelabs.com/

CSSPrefixer – aplikacja webowa do poprawy kodu CSS3

cssprefixer css3

Aplikacja webowa, która poprawia kod CSS, tak aby był poprawnie wyświetlany na wszystkich przeglądarkach.  CSSPrefixer sprawdza kod CSS i przepisuje niektóre style uzupełniając je o odpowiednie przedrostki. Chodzi oczywiście  o style wchodzące w skład CSS3, które nie są jeszcze obowiązującym standardem, dlatego niektóre przeglądarki korzystają ze swoich przedrostków do ich obsługi.

 

cssprefixer css3

link: http://cssprefixer.appspot.com/

FontSizer – Skrypt do powiększania rozmiaru czcionki – jQuery

fontsizer jquery

Niekiedy na stronach WWW można zauważyć opcje powiększania rozmiaru czcionki, skrypt fontSizer właśnie temu służy. W kodzie skryptu można ustawić maksymalny rozmiar do jakiego mają się powiększać litery. W linku demo znajduje się instrukcja jak zainstalować skrypt na stronie www.

fontsizer jquery

Framework: jQuery
Link: http://plugins.jquery.com/project/FontSize
Demo: http://www.protoboard.cl/sandbox/fontsizer/sample.html
Licencja: MIT, GPL

CSS3 Generator – aplikacja web do generowania CSS3, również w IE

css3 generator

Świetnie zaprojektowana i zrobiona aplikacja do generowania kodu CSS3. Intuicyjny interfejs, przyciski i suwaki pozwolą nam szybko wygenerować żądany kod. W aplikacji możemy ustawić grubość ramki jego kolor oraz kolor tła. Możemy ustawiać zaokrąglenia rogów, rzucać cienie, ustalać gradienty oraz przezroczystość.  Z prawej strony możemy na bieżąco śledzić docelowy wygląd. Dodatkową zaletą aplikacji jest to, że umożliwia wygenerowanie kodu dla IE.

css3 generator

 

Link: http://www.thisiserichoffman.com/css3-generator/

3D Ribbon Generator – generator wstążek w CSS3

3D Ribbon Generator

3D Ribbon Generator to aplikacja webowa pozwalająca na generowanie ciekawych nagłówków, działów itp. w formie wstążki. Kod generowany jest w CSS3, tak więc będzie on lepiej odczytywany przez wyszukiwarki. Aplikacja ma zdefiniowane cztery rodzaje wstążek,  jednak możemy modyfikować dowolnie parametry oraz kolory. Możemy również dodać cienie do wstążki. Kod działa na wszystkich popularnych przeglądarkach, na IE działa od wersji 7.

 

3D Ribbon Generator

 

Link: http://www.css3d.net/ribbon-generator/

CSSWarp – generator krzywego tekstu w CSS3

CSS Warp

Dzięki generatorowi CSSWarp możemy tworzyć tekst ułożony na prowadnicy. Prowadnice można dowolnie modyfikować i wykrzywiać. Możemy również wybrać niestandardową czcionkę która jest pobierana z usługi Google Fonts (@font-face). CSSWrap generuje następnie kod, który można umieścić na własnej stronie. Co najważniejsze generator działa nawet na IE9 to dobry znak, ponieważ wcześniej wydawało mi się że tworzenie krzywionych elementów nie było możliwe w IE9.

 

CSS Warp

 

Link: http://csswarp.eleqtriq.com/