HTML5

Autor: Skender Mustafi

Ky artikull është i menduar si për fillestarët ashtu edhe për profesionistët në HTML. Fillestarët mund të kopjojnë shabllonin e gatshëm dhe me pak ndryshime të përshtatin për nevojat e tyre, kurse profesionistët mund të shohin më në detaje mundësitë që ofron HTML5 për të realizuar më shumë efekte mbi fotografitë.

Foto 5

I gjithë veprimi është i thjeshtë, e gjithë pamja është atraktive, dhe i gjithë kodimi është në HTML + CSS pa pasur nevojë më për JavaScript. Mund të thuhet madje: “Thjesht-Lehtë-Shpejtë-Bukur”.

Fillimisht do të përqendrohemi tek CSS kodi i cili është kyç për të dirigjuar efektet dhe më pas tek HTML kodi i cili është kyç për t’i shfaqur efektet në publik.

CSS

Nuk do të përshkruaj kodin e tërë në detaje sepse thjeshtë mund të e shihni dhe vetë, por do t’i përmend pjesët kryesore të cilat përbëjnë idenë si tërësi.

Elementet bazë të këtij modeli janë:

Kodi i cili përcakton pamjen bazë të prapavijës dhe elementeve të përgjithshme të cilat kanë të bëjnë me tërë modelin, shembull i tillë është gjerësia, lartësia, lloji i shkronjave, ngjyra e prapavijës e të tjera. Këto elemente ju mund të i pakoni ose madje edhe të i shtoni sipas dëshirës e nevojës.body { background-color: #E9E9E9; color: #333; font-family: ... ; font-size: 16px; }

Kodi i cili përcakton karakteristikat e fotografisë si nocion abstrakt. Në këtë rast efektet e fotografisë janë të lidhura ngushtë me nyjën (linkun). Thjesht, në këtë version pa nyje s’ka efekt. Pra është definuar a.polaroid, por që ju mund të e bëni img.polaroid, pra të e lidhni efektin me fotografinë. Arsyeja e përcaktimit për versionin a.polaroid është meqë ky model përshtatet shumë mirë me nyjëzimin e fotografive të cilat të shpien nëpër përmbajtje të ndryshme.
a.polaroid { display: block; text-decoration: none; color: #333; padding: 10px 10px 20px 10px; width: 150px; border: 1px solid #BFBFBF; background-color: white; z-index: 2; font-size: 0.7em; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transition: -webkit-transform 0.5s ease-in; }a.polaroid:hover, a.polaroid:focus, a.polaroid:active { z-index: 999; border-color: #6A6A6A; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); }
.polaroid img { margin: 0 0 15px; width: 150px; height: 150px; }
a img { border: none; display: block; }
.fjalaime-foto { position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top: 5em; min-width: 500px; /* gjerësia minimale e organizimit të fotove */ max-width: 700px; /* gjerësia maksimale */ }
.fjalaime-foto .polaroid { position: absolute; }
Kodi (pseudo ID) i cili grumbullon fotot me madhësi të ndryshme. Ky është një veprim i mirë sepse ne do të duam që të kemi një tërësi fotosh sipas dëshirës por që ngjasojnë ose janë të njëjta në përmasa të caktuara. Në këtë shembull kemi tre lloje bazë. Ju mund të shtoni idetë tuaja dhe të e bëni edhe më atraktive pamjen.
.fjalaime-foto.eVogel { width: 75px; padding: 6px 6px 12px 6px; font-size: 0.6em; } .fjalaime-foto .eVogel img { width: 75px; height: 75px; } .fjalaime-foto .eMesme { width: 200px; padding: 13px 13px 26px 13px; font-size: 0.8em; } .fjalaime-foto .eMesme img { width: 200px; height: 200px; } .fjalaime-foto .eMadhe { width: 300px; padding: 20px 20px 30px 20px; font-size: 1em; } .fjalaime-foto .eMadhe img { width: 300px; height: 300px; }
Kodi i cili përcakton i cili përcakton karakteristikat e fotografive, secilës një nga një. Shumë me rëndësi në këtë pjesë është shkalla e rrotullimit, por element kryesor që nuk mund të përcaktohet për një grup fotografishë është pozita. Pra, që të mund të kemi disa fotografi në një pamje, duhet të u përcaktojmë pozita të ndryshme që thjeshtë të mund ‘i shohim.
.fjalaime-foto .foto1 { bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } .........

Kodi i cili paraqet pamjen është i thjeshtë. Në të qëndron një ndarje (div) që paraqet kornizën e përgjithshme, kodi i nyjeve (<a></a>) dhe kodi i fotografive (<img>). Me kornizën është lidhur klasa e cila përcakton karakteristikat e saja, kurse me secilën nyje është lidhur nga një klasë përkatëse e cila kombinon karakteristikat e përgjithshme të fotografisë me ato të veçantat të cilat i përkasin secilës nga ato. Kuptohet, ju mund të programoni në CSS karakteristika shtesë dhe të i kombinoni ato sipas dëshirës suaj. Gjithashtu, unë kam paraqitur vetëm 6 fotografi në këtë shembull, kurse ju mund të pakësoni këtë paraqitje ose edhe të mbushni me fotografi sipas dëshirës suaj.
<div class="fjalaime-foto"> <a class="eMadhe polaroid foto1" href="#"><img alt="" src="https://fjalaime.ch/wp-content/uploads/2013/12/ibm-smart-planet.jpg" width="200" />Foto 1</a> <a class="polaroid foto2" href="#"><img alt="" src="https://fjalaime.ch/wp-content/uploads/2013/12/firefox.jpeg" width="200" />Foto 2</a> <a class="eVogel polaroid foto3" href="#"><img alt="" src="https://fjalaime.ch/wp-content/uploads/2013/12/futboll.jpg" width="200" />Foto 3</a> <a class="eMesme polaroid foto4" href="#"><img alt="" src="https://fjalaime.ch/wp-content/uploads/2013/12/office.png" width="200" />Foto 4</a> <a class="polaroid foto5" href="#"><img alt="" src="https://fjalaime.ch/wp-content/uploads/2013/12/Kalendar.png" width="200" />Foto 5</a> <a class="polaroid foto6" href="#"><img alt="" src="https://fjalaime.ch/wp-content/uploads/2013/07/integrimi-i-fotografive.png" width="200" />Foto 6</a></div>