/rss.png){kind=icon}
/email.png){kind=icon}
/flickr.png){kind=icon}
/youtube.png){kind=icon}
/twitter.png){kind=icon}
/facebook.png){kind=icon}
/home.png){kind=icon}
/pop-icon.png){kind=icon}
Gallery
Tag: HTML5
30 Najnovijih CSS3, HTML5, jQuery Tutorijala - II deo
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.
30 Najnovijih CSS3, HTML5, jQuery Tutorijala - I deo
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.
Quickly Build a Swish Teaser Page With CSS3
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.
How to Create a CSS3 Dropdown Menu [Tutorial]
U ovom kratkom tutorijalu naučićete da kodirate navigacioni meni u čistom CSS3. Jednostavan, čist I profesionalan pristup.
Orman Clark’s Vertical Navigation Menu: The CSS3 Version
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.
Accordion with CSS3
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.
Tutorial: CTA button without images using CSS3 and Entypo
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.
Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
U ovom tutorijalu Tom Keni će pokazati kreiranje iluzije zakačenih elemenata uz pomoć CSS3 pseudo-elemenata.
Pure CSS3 LavaLamp Menu
Još jedan odličan tutorijal za kreiranje jQuery efekta. Naučite kako se kreira LavaLamp efekat uz pomoć CSS3 promene.
CSS3 signup form
U ovom artiklu upoznaćete kako dizajnirati čistu I atraktivnu prijavnu formu.
Timeline Portfolio
U ovom tutorijalu videćete kako kreirati prelep I impresivan portfolio uz pomoc Timeline jQuery dodatka I CSS3.
Apple-like Login Form with CSS 3D Transforms
U ovom tutorijalu videćete kako upotrebiti CSS3 transformaciju da bi kreirali interesantan flipping efekat u Apple-inspirisanoj formi.
1
Najnoviji trendovi vezani za web dizajn
Poslednjih nekoliko godina svedoci smo raznih promena u sferi web dizajna. Iako 2011 godina jos nije gotova do sada su trendovi u web dizajnu bili izuzetno inspiritivni i vredni pomena. Jedna reč koja bi mogla da sumira ovogodišnji trend je fleksibilnost. U zadnje vreme surfovanje webom se ne svodi na puko sedenje ispred monitora od 17 inča, već je tehnologija omogućila pristup vašim omiljenim sadržajima sa mnogih uređaja kao što su mobilni telefoni, tablet računari, netbook računari itd. Zbog pomenute situacije web dizajneri sada moraju da uzmu u obzir ove činjenice kada pripremaju dizajn. To ne znači da dizajneri treba da posvete manje pažnje samom dizajnu ali treba da uzmu u obzir i funkcionalnost budućeg web sajta na svim pomenutim uređajima. U ovom postu možete videti neke od tekućih trendova u sferi web dizajna.
1) 3D efekat - U zadnje vreme 3D efekti su sve prisutniji pri dizajniranju web sajtova. Pri korišćenju 3D efekata dubina koju oni stvaraju daje osećaj kao da određeni delovi vašeg dizajna prosto izlaze iz ekrana dok drugi kao da se povlače unutar ekrana. Ovaj efekat može posebno da naglasi određene segmente vašeg web sajta.
2) Raspored na jednoj strani - Ovo je jedan od poslednjih trendova u kojem je ceo sajt inkorporiran na samo jednu web stranu. Osim što je vrlo isplativ ovakav način dizajniranja je najpogodniji za stvaranje personalnih web sajtova.
3) Jednostavan dizajn - Odavno je poznato da ako je vaša poruka vredna primanja nema potrebe da koristite zvona da bi je publika čula. Kada pričamo o jednostavnom dizajnu on treba da je jednostavan ali ne dosadan. Mora se pažljivo izabrati paleta boja na takav način da dizajn zadrži jednostavnost ali da ima i gracioznost.
4) Veliko podnožje - Velika podnožja i dalje spadaju u jedan od najzastupljenijih trendova pri dizajniranju web sajtova. Jedan od razloga za to je što dosta informacija može da stane u veliko podnožje.
5) Tipografija - Tipografija je uvek jedan od najbitnijih aspekata u web dizajnu i dizajneri smatraju da je ona jedan od najlepsih trendova.
6) Veliko zaglavlje - Ovaj trend se pojavio zbog toga što korisnicima najviše pažnje privlači zaglavlje jel je ono najvidljivije na svakom web sajtu. Korisnik u prvih deset sekundi odlučuje da li će se zadržati na trenutnom web sajtu ili će otići na sledeći, a veliko zaglavlje ima značajnu ulogu u privlačenju pažnje korisnika.
7) Crno-bele ikonice - Pošto su ikonice vrlo bitan segment u dizajniranju web sajta ključno je predstaviti ih da budu što atraktivnije. Što se tiče sadašnjih trendova crno-bele ikonice su zastupljene na velikom broju web sajtova.
8) Ikone socijalnih sajtova - Poslednjih par godina socijalni sajtovi rade odličan posao u poboljšanju kredibiliteta vašeg web sajta. Ovo donosi trend korišćenja ikona socijalnih sajtova kao što su Twitter, Facebook, StumbleUpon, Digg i drugih na vašem web sajtu.
9) Interaktivni dizajn - Dani dizajna statičkih sajtova su odbrojani i gotovo da ih ni nema dok se trend interaktivnog dizajna nastavlja i u 2011. Moguće da ste primetili da mnogi sajtovi često ažuriraju svoj sadržaj i vrlo lako ugrađuju video klipove, muzičke klipove, razne ankete itd.
10) Upotreba HTML5 i CSS3 - Bez ubrajanja HTML5 i CSS3 diskusija o najnovijim trendovima je nepotpuna. Zajedno HTML5 i CSS3 omogućavaju web sajtovima da se lakše izrade i povežu sa alatima socijalnih mreža. Više nego ovo obe nove verzije imaju mnogo korisnije opcije za web sajt što poboljšava kredibilitet samog sajta.
0
HTML5 crno-beli prelaz mišem preko slike
Do skoro crno-bele slike su morale manuelno da se konvertuju da bi bile pravilno prikazane na webu. Sada sa HTML5 slike mogu biti crno bele bez potrebe za naknadnom obradom u nekom od softvera za obradu slika. U narednom delu teksta možete videti potreban jQuery i javascript kod pomoću kojeg možete od kolor slika dobiti crno-bele slike.
Svrha
Ovaj demo ima za cilj da prikaže kako da se dobije efekat promene iz kolor u crno-belu sliku prilikom prelaska kursora preko iste uz pomoć HTML5 i jQuery. Da bi se postigao ovakav efekat bilo je potrebno imati kolor i crno-belu verziju slike do pojave HTML5. Sada uz pomoć HTML5 je to mnogo lakše i jednostavnije jer se crno-bela slika generiše od originalne kolor slike. Nadamo se da će vam ova skripta biti korisna u vašem svakodnevom radu pri izradi i dizajnu web sajtova.
jQuery kod
Sledeći jQuery kod ima zadatak da pronađe putanje slika i od njih napravi crno-belu varijantu. Kada se pređe mišem preko slike ona polako prelazi iz crno-bele u kolor varijantu.
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>
Kako ga koristiti?
Da bi ste ovo upotrebili na vašem web sajtu:
- uračunati kopiju jquery.js
- nalepiti kod kao što je prikazano iznad
- postaviti ciljnu sliku (npr .post-img, img, .gallery img, itd.)
- možete menjati brzinu animacije (1000 = 1 second)
Kompatibilnost
Funkcioniše sa svim pretraživačima koji podržavaju HTML5 i Javascript kao što su Chrome, Safari i Firefox. Ako HTML5 nije podržan prebaciće na originalnu kolor sliku. Opaska: ako slučajno ne radi sa Firefox-om i Chrome-om u lokalu potrebno je prebaciti HTML fajl na web server.
Pogledajte demo...
0
Prikaz HTML5 sajtova
HTML5 polako ali sigurno pušta korene na webu. Neki sajtovi koji koriste HTML5 ponosno pokazuju logo i slogan "support the future now". Kako bi pokazali da je HTML5 već uzeo maha na webu, odlučili smo da prikažemo 30 HTML5 sajtova.
