Meniu animat cu jQuery (html css si jQuery)

Meniul este creat doar cu html si css fara a se folosi nici un program de grafica. Doar animatia s-a realizat cu jQuery. Pentru a realiza mai rapid gradienturile, putem utiliza colorzilla (ne generaza cod CSS automat pentru gradienturi) http://www.colorzilla.com/gradient-editor/

Pentru a vedea meniul in actiune copiati codul de mai jos si il lipiti intr-un fisier text cu extensia html dupa care il deschideti cu dubluclick. Ca sa vedeti animatia jQuery aveti nevoie de conexiune la internet. Daca doriti puteti separa codul CSS de restul documentului HTML. Tot codul ce exista intre tagurile "style" ii dati cu cut si il plasati intr-un fisier text cu numele stil.css (este deja linkuit pe acest nume). Va puteti juca cu o gramada de culori si gradienturi, puteti personaliza meniul, puteti adauga sau modifica continutul meniului pentru a-l adapta cerintelor voastre. <!DOCTYPE html> <html> <head> <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ></script> <link rel="stylesheet" href="stil.css" type="text/css"/> <script> $(document).ready(function(){ $("#nav li").hover(function(){ $(this).find("ul").slideDown()}, function(){ $(this).find("ul").css("display", "none") }); }); </script> <style> /* */ *{ padding:0; margin:0; } body{ background-color:#eee; } #nav{ margin:100px auto 0px auto; list-style:none; padding:5px; background:#333; border:1px solid white; display:table; } #nav > li{ cursor:pointer; float:left; padding:6px 25px; position:relative; border-right:1px solid gray; background: #aebcbf; /* Old browsers */ background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */ background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */ } #nav a{ color:white; text-decoration:none; text-shadow:0 1px 0 black; } #nav li ul{ margin:0 0 0 -26px; padding-top:13px; list-style:none; position:absolute; display:none; } #nav ul div{ box-shadow:1px 1px 5px black; } #nav ul li{ cursor:pointer; width:120px; border-bottom:2px groove gray; padding:8px; background: #45484d; /* Old browsers */ background: -moz-linear-gradient(left, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(left, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } #nav > li:hover{ /* efectul este numai pentru li-urile din meniul principal */ color:#fff; background: #8af28d; /* Old browsers */ background: -moz-linear-gradient(top, #8af28d 1%, #01c415 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#8af28d), color-stop(100%,#01c415)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8af28d 1%,#01c415 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8af28d 1%,#01c415 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8af28d 1%,#01c415 100%); /* IE10+ */ background: linear-gradient(top, #8af28d 1%,#01c415 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8af28d', endColorstr='#01c415',GradientType=0 ); /* IE6-9 */ } #nav > li:hover> a{ /*numai pentru li-urile si linkurile "a" din meniul principal e valabil hoverul ,de aceea se foloseste semnul ">" */ color:black; text-shadow:0 1px 0 white; } #nav ul li:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ background: #8af28d; /* Old browsers */ background: -moz-linear-gradient(top, #8af28d 1%, #01c415 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#8af28d), color-stop(100%,#01c415)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8af28d 1%,#01c415 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8af28d 1%,#01c415 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8af28d 1%,#01c415 100%); /* IE10+ */ background: linear-gradient(top, #8af28d 1%,#01c415 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8af28d', endColorstr='#01c415',GradientType=0 ); /* IE6-9 */ } #nav ul li:hover a{ color:black; text-shadow:0 0 1px black; } </style> </head> <body> <div id="wrap" style="display:table"> <ul id="nav"> <li> <a href="#"><b>Home</b></a> </li> <li> <a href="#">About</a> <ul> <div> <li><a href="#">The product</a></li> <li><a href="#">Gallery</a></li> </div> </ul> </li> <li> <a href="#">Services</a> <ul> <div> <li><a href="#">Service 1</a></li> <li><a href="#">Sevice 2</a></li> <li><a href="#">Service 3</a></li> <li><a href="#">Service 4</a></li> </div> </ul> </li> <li> <a href="#">Products</a> <ul> <div> <li><a href="#">Software</a></li> <li><a href="#">Keyboard</a></li> <li><a href="#">Hardisk</a></li> <li><a href="#">Memory</a></li> <li><a href="#">Laptop</a></li> <li><a href="#">Monitor</a></li> <li><a href="#">Cables</a></li> <li><a href="#">Adaptor</a></li> <li><a href="#">Amplifier</a></li> <li><a href="#">PC </a></li> <li><a href="#">Instruments</a></li> </div> </ul> </li> <li> <a href="#">Contact</a> <ul> <div> <li><a href="#">Out-of-hours</a></li> <li><a href="#">Directions</a></li> </div> </ul> </li> </ul> <sup style="float:right; color:gray; text-shadow:0 1px 0 white">Powered by florinBoitan</sup> </div> </body> </html>

Stop ACTA

Ma declar impotriva oricaror tendinte de constrangere a libertatilor si drepturilor oamenilor precum si oricaror tratate, convetii sau legi care lasa loc de interpretare si abuz.
In consecinta am semnat impotriva ACTA.


Va ofer doua linkuri unde puteti vota impotriva ACTA (Realitatea Tv si o organizatie internationala Avaaz.org unde voteaza foarte multi oameni din toate colturile lumii).
JOS ACTA! (realitatea tv)
JOS ACTA! (avaaz.org)

Pentru cine vrea sa se documenteze despre acest tratat o poate face pe site-ul Comisiei Europene aici

Varianta integrala ACTA in format PDF.aici

Circula pe net o lista cu europarlamentarii romani si modul cum au votat in Parlamentul European. Acela nu este votul pentru adoptarea sau nu a ACTA ci pentru o rezolutie.
Cei care au votat în favoarea rezoluţiei sunt cei îngrijoraţi de prevederile ACTA. Cei care au votat împotriva rezoluţiei sunt cei care acceptă ACTA si nu au obiectii la aceasta chestiune.

Puteti accesa aici lista rusinii politicienilor romani care au votat impotriva rezolutiei si nu au obiectii cu privire la acest tratat. Printre nesimtiti se numara nume sonore ca Stolojan, EBA, Macovei, Cristian Preda.

Tot la aceasta pagina aveti si e-mailurile acestor europarlamentari carora puteti sa ii intrebati de ce v-au reprezantat in acest mod mizerabil iar pe ceilalti ii puteti incuraja sa va apere in continuare interesele.

Daca nu luam acum putina atitudine mai tarziu nu vom mai putea deloc.

Background pentru web

Daca dorim sa putem un background pentru site-ul nostru si observam ca aceasta imagine de tip pattern este foarte mare ca si dimensiuni, va fi necesar sa ne folosim de un artificiu pentru a nu ingreuna banda de trafic.

La o imagine de 2Mb, daca site-ul nostru va fi vizitat de 50 de persoane zilnic, asta va insemna un trafic de 100Mb/zi numai din imaginea de background.

Pentru un background cu iarba se da imaginea bruta:

Daca vom incerca sa facem un background cu ea (sa o repetam pe verticala si orizontala) pentru site vom observa ca imbinarile vor fi vizibile.Pentru a rectifica acest lucru mergem in meniul de photoshop la Filter>Other>Offset si cu Wrap Around bifat tragem de sliderul pentru verticala la jumate si de sliderul pentru orizontala la jumate.

Exemplu: daca imaginea are 500px*600px vom trage 250px de sliderul pentru latime si 300px de sliderul pentru inaltime. Vom observa liniile de unire imperfecta a imaginii de care va trebui sa scapam cu ajutorul uneltelor de tip healing brush.

Practic marginile fotografiei initiale a fost trase spre interior. In interior noi vom putea netezi imaginea iar de exterior s-a ocupat deja photoshopul pentru ca noi sa nu sesizam imbinarea.

Nu este neaparat sa tragem de slidere perfect la jumatate. Putem sa trecem si 150px cu 100px. Practic marginile fotografiei sunt aduse din exterior spre interior, la interior urmand sa le netezim noi, mai putin contand ca aceste margini interioare nu sunt perfect la jumatatea fotografiei.

Imaginea finala dupa imbricare:

A doua varianta dupa imbricare:

Acum incercati sa le folositi intr-o pagina web sa vedeti diferenta.
Codul css pentru fixarea unei imagini ca background este:


body{
background-image:url(grass.jpg);
}


Atasez o textura facuta de mine din alte doua texturi default ale photoshopului.

Explic pe scurt cum am obtinut-o.
Deschidem o foaie de lucru. Dam dublu click pe layerul cu lacatelul(de altfel si singurul) si acesta va deveni layer0 si va fi editabil.
Intram in layer style(semnul fx de jos) si alegem patern overlay. La pattern overlay selectam satin. Marim sau miscoram paternul tragand de slide, dupa cum dorim.
Mergem si la color overlay si alegem albastru si la mod dam multiply 100%.
Iesim din layer style dam click dreapta pe imagine si alegem flatten image.
Acum efectuam operatiunea cu offset dupa care folosim uneltele de healing pentru a netezi interiorul imaginii.
Aplicam al doilea patern Metal Landscape cu overlay 30%. tot din layer style.
Salvam imaginea si o putem folosi ca background pentru pagina noastra de web.

Deja lucrez la un site pentru care folosesc textura de satin.

Ce este Droplet si Batch?

Ce putem face cu acest instrument?

Sa vedem cum arata si de unde il creem.
Iconita dropletului arata asa

Folosind tehnica drag&drop tragem peste iconita dropletului o fotografie care va fi automat prelucrata dupa cum am setat dropletul sa actioneze. Cu ajutorul lui putem redimensiona fotografii, desatura, aplica automat mai multe filtre, etc etc. Toate aceste operatiuni le inregistram in actions iar apoi atasam dropletului un set de actiuni.



Mergem in meniul de photoshop la File>Automate>Create Droplet... Se deschide o fereastra unde avem in partea de sus Save Droplet In..- Choose. Aici alegem calea unde vrem sa se salveze dropletul. De regula pe desktop.
Mai jos, in aceeasi fereastra avem actiunile (Actions)care dorim sa le atasam dropletului. Se va alege setul, apoi actiunea care se doreste a fi aplicata.
Si mai jos in fereastra mai gasim optiuni de salvare a imaginilor prelucrate cu dropletul.
Dupa ce efectuam setarile dam ok pentru a salva dropletul.

Nu ne mai ramane decat sa tragem o imagine peste iconita dropletului si intreaga pleiada de operatiuni se vor aplica peste fotografie.

Asemanator dropletului gasim si optiunea Batch care se afla tot in File>Automate. Practic face aceleasi lucruri ca si dropletul. Daca vrem sa ne semnam fotografiile dintr-un folder si se le salvam gata semnate intr-un alt folder, alegem sursa (folderul cu imaginile nesemnate) si destinatia (folderul unde vom pune pozele dupa ce le vom semna). Dupa ce creem o actiune in prealabil, alegem actiunea in fereastra Batch-ului, sursa si destinatia si dam OK: Pozele vor fi prelucrate una cate una si salvate in locatia indicata.