Javascript

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

U ovom tutorijalu naučićete kako da napravite slajder sa“Nivo Slider jQuery Script” i CSS3.

Making an Impressive Product Showcase with CSS3

Još jedan dobar tutorijal koji objašnjava kako da obogatite svoju stranicu sa CSS3 magijom i jQuery.

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

Ovaj tutorijal objašnjava kako da napravite čist I prelep CSS3 slajder za slike.

CSS3 Pricing Table

Ovaj tutorijal sadrži čitav niz novih CSS3 mogućnosti uključujući: transforme, gradient, senčenje, nth-child.

CSS3 breadcrumbs

Napravite svoj sopstveni CSS3 niz kako bi poboljšali upotrebljivost svog websajta.

Animated Content Tabs with CSS3

Ovaj tutorijal pojašnjava implementaciju nekih prostih CSS3 elemenata uz pomoć radio dugmića I pseudo elemenata.

Responsive Horizontal Layout

U ovom tutorijalu otkrićete kako se kreiraju horizontalno okruženje sa nekoliko segmenata u samom sadržaju.

Login and Registration Form with HTML5 and CSS3

U ovom tutorijalu kreiraćemo dve HTML5 forme koje će biti promenljive iymeđu prijavne I registracione forme uz pomoć CSS3 pseudo klase :target.

Responsive Content Navigator with CSS3

Ovaj tutorijal pokazuje kako napraviti navigator uz pomoć CSS.

How to Create Calendar using jQuery and CSS3 [Tutorial]

Ovaj tutorijal pokazuje kako se pravi kalendar uz pomoć CSS3 I jQuery.

Industrija dizajna je verovatno jedna od onih sa najvećom ekspanzijom I najbržim razvojem. Dizajneri moraju pratiti sve, uključujući tu I nove trenedove u vizuelnom dizajnu, tehnologije poput jQuery, HTML5 I CSS3. Ove tehnologije omogućavaju dizajnerima da razvijaju svoju kreativnost kroz produkciju dizajna I prave bogatije radove. U današnjem postu želim sa Vama da podelim neke veoma zanimljive I korisne CSS3 tutorijale za pravljenje raznih web dizajn elemenata I instrukcija. Iskoristite ovu kolekciju kako bi naučili nešto novo I pripremili se za web koji dolazi u bliskoj budućnosti.

U ovom tutorijalu naučićete kako da napravite dinamičku stranicu samo uz pomoć CSS, bez upotrebe slika ili dizajniranja u fotošopu. Ovu tehniku možete upotrebiti za bilo koju aplikaciju ili websajt koje spremate za krajnju upotrebu.

U ovom kratkom tutorijalu naučićete da kodirate navigacioni meni u čistom CSS3. Jednostavan, čist I profesionalan pristup.

Prateći ovaj tutorijal naučićete da re-kreirate Orman Klarkov vertikalni navigacioni meni uz pomoć CSS3 I jQuery, koristeći minimalnu moguću količinu slika.

U ovom tutorijalu videćete kako kreirati niz koji će animirati delove sadržaja po otvaranju ili zatvaranju stranice uz pomoć skrivenih inputa I komandi.

U ovom tutorijalu naučićete da kreirate dugmiće uz pomoć 100% CSS i Entypo. Dugmići bez slika su fleksibilniji, zahtevaju manje podataka za download I lako se menjaju.

U ovom tutorijalu Tom Keni će pokazati kreiranje iluzije zakačenih elemenata uz pomoć CSS3 pseudo-elemenata.

Još jedan odličan tutorijal za kreiranje jQuery efekta. Naučite kako se kreira LavaLamp efekat uz pomoć CSS3 promene.

U ovom artiklu upoznaćete kako dizajnirati čistu I atraktivnu prijavnu formu.

U ovom tutorijalu videćete kako kreirati prelep I impresivan portfolio uz pomoc Timeline jQuery dodatka I CSS3.

U ovom tutorijalu videćete kako upotrebiti CSS3 transformaciju da bi kreirali interesantan flipping efekat u Apple-inspirisanoj formi.

<div class="box left">
<h2 class="tour_1">Napravite turu</h2>

</div>

name: klasa koja je data elementu nad kojim želite tooltip
bgcolor: boja pozadine tooltip-a
color: boja tooltipovog teksta
text: tekst unutar tooltip-a
time: ako je tura automatska onda je ovo vreme za prikaz ovog tooltip-a
position: pozicija tooltip-a

var config = [
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "TL",
"text" : "Neki tekst ovde",
"time" : 5000
},...
]

TL: top left
TR: top right
BL: bottom left
BR: bottom right
LT: left top
LB: left bottom
RT: right top
RB: right bottom
T: top
R: right
B: bottom
L: left

jQuery je popularna javaScript biblioteka koja umnogome pojednostavljuje i ubrzava rukovanje događajima, omogućava animacije sa veoma malo kodiranja. Uz pomoć jQuery biblioteke, možete početi sa novim načinom web programiranja, a galerije slika su jedan od načina za to. Ovo je prikaz 15 unikatnih jQuery Javascript skripti za prelepe galerije slika, koje omogućavaju dobar način prikaza slika sa malo koda.

1. PhotoSquare Photography WordPress Theme ($79)

PhotoSquares je veoma fleksibilna galerija u WordPress-u koja je odlična za dizajnere, programere ili fotografe da predstave svoje radove i portfolio.

2. GalleryView: A jQuery Content Gallery Plugin

GalleryView teži da omogući korisnicima maksimalnu slobodu da naprave jedinstvenu galeriju atraktivnog izgleda koju je lako podesiti i kastomizirati.

3. Sliding Image Gallery jQuery Plug-in

SlidingGallery plug-in pretvara grupu slika u cikličnu galeriju slika koje korisnik može da bira. Jedna slika je centrirana na sredinu ekrana, sa dve manje slike sa strane. Korisnik ima mogućnost da klikne na bilo koju od slika sa strane i pri tom će ta odabrana slika doći u fokus, tj. na sredinu ekrana.

4. PrettyPhoto jQuery Lightbox Clone

PrettyPhoto je jQuery lightbox klon. Osim slika, ovaj plug-in podržava video, flash, YouTube itd. PrettyPhoto je multimedijalni lightbox. Podešavanje skripte je brzo i jednostavno i podržana je od većine popularnih browsera.

5. AD Gallery – a jQuery gallery plugin

jQuery plug-in koji omogućava visok nivo kastomizacije prikaza slika u galeriji.

6. FancyBox

FancyBox je alatka za prikaz slika, html sadržaja i multimedije u prepoznatljivom "Mac" okruženju lightbox-a koji se izdvaja preko sadržaja stranice.

7. Shadowbox

Shadowbox je plug-in koji omogućava prikaz multimedijalnog sadržaja zastupljenog na web-u. Ovaj plug-in je urađen u JavaScript-u i CSS-u i nudi visok stepen kastomizacije.

8. Galleriffic

Galleriffic besplatan jQuery plug-in kreiran za galerije koje će podržavati veliki broj slika.

9. Full screen image gallery using jQuery and Flickr

Ovo je full screen galerija slika koja automatski skalira sliku, dok u isto vreme održava razmeru ekrana da popuni pozadinu browsera. Podržava flickr pretraživač, thumbnail-ove, natpise itd.

10.Moving Boxes

11. SlideViewerPro 1.0

SlideViewerPro galerija omogućava potpunu kastomizaciju i kreiranje odličnih slajd galerija za razne projekte ili interaktivne galerije u blogovima.

12.Pikachoose

Pikachoose je lagan jQuery plug-in koji obezbeđuje jednostavnu prezentaciju slika sa opcijama za slideshow, dugmadima za navigaciju i auto play. Pikachoose je dizajniran za laku instalaciju i podešavanje. Kreiranje galerije je veoma jednostavno.

13. imgAreaSelect

imgAreaSelect jQuery plug-in omogućava selektovanje pravouganog područja slike. Ovaj plug-in omogućava web developerima da lako ugrade mogućnost crop-ovanja slike kao i mnoge druge mogućnosti.

14. Galleria Plugin

Prikaz ovog plugin-a pokazuje neke naprednije efekte koje možete postići sa Galleria plugin-om.

15.JQZoom

JQZoom je javascript plugin koji omogućava uvećavanje željenog dela slike koji se selektuje. Ovaj plugin je veoma jednostavan za korišćenje i omogućava zumiranje bilo kog dela slike.

YoxView