Mérei Tamás webdesigner
Helló!Mérei Tamás vagyok, webdesigner

Weboldalak és felhasználói felületek tervezésével és kódolásával foglalkozom. Dolgozom magánszemélyeknek, vállalkozásoknak, fejlesztő cégeknek és reklámügynökségeknek.

HTML, CSS

CSS grid layout

A videóban megnézzük, hogyan tudunk natív CSS-sel egyszerű 12 oszlopos grid-et létrehozni.

forráskódvideó

A Bootstrap használata

Az alábbi videó bemutatja a Bootstrap általános használatát. Bootstrap verzió: v5.1.3

forráskódvideó

Reszponzív tipográfia

Az alábbi módszerrel a viewport-hoz igazíthatjuk a betűméretet, sorközöket, vagy akár margókat is.

videó

Reszponzív slider / fader JavaScript nélkül

Képrotáló carousel készítéséhez nem feltétlenül van szükség JavaScript-re. Néhány sor CSS-sel is látványos eredményt érhetünk el.

forráskódvideó

Reszponzív táblázatok

A táblázatok megjelenítésére mobil eszközön több lehetőség létezik, ezek közül mutatok most kettőt a videóban.

forráskódvideó

Egyszerű parallax effekt

Parallax effekt CSS-sel, JS nélkül.

forráskódvideó

HTML + CSS alapoktól a felső szintig

Ebből a 13 leckéből álló 7 órás videóból megtanulhatod a webdesigner szakma alapját, a HTML + CSS kódolást. Az anyagok ugyanúgy egymásra épülnek, mint a webdesign tanfolyamoknál.

továbbvideó

A shape-outside CSS property

A shape-outside CSS property használatával egyszerűen körbe tudunk folyatni szöveggel bármilyen alakzatot vagy képet. A shape nem csak négyszög formájú lehet, hanem akár kör, vagy sokszög is.

videó

SVG animáció GSAP használatával

Vektorgrafikus képeket akár elemenként is animálhatunk.

forráskódvideó

CSS box-sizing

A box-sizing CSS3 tulajdonsággal tudjuk megadni, hogy az adott elem szélessége hogyan kerüljön kiszámításra.

tovább

CSS mértékegységek

Rengeteg mértékegység létezik a betű- és egyéb méretek megadására. Az abszolút egységek mérete nem függ a szülő elemtől, míg relatív megadás esetén a betű mérete valamelyik felette található elem betűméretétől függ.

tovább

::before & ::after pseudo selector-ok használata

Utálom használni, de néha muszáj.

forráskódvideó

HTML5 banner készítés

HTML5 banner, CSS3, transition, animáció, keyframes, meg minden, amit akartok.

forráskódvideó

Egyedi kinézetű checkbox és radio button készítése

A custom select után, itt a custom radio és custom checkbox is.

forráskódvideó

Egyedi kinézetű SELECT készítése

A legkisebb mértékben sem támogatom a videóban ismertetett megoldások használatát, de sajnos néha rá vagyok kényszerülve.

forráskódvideó

Responsive progress bar

Ezt a kódrészt mostanában készítettem és gondoltam megosztom veletek, hátha valakinek hasznára lesz egyszer.

forráskódvideó

CSS animáció GSAP-el

Kedvcsináló a GreenSock animation platformjához.

forráskódvideó

Responsive menü

Felbontásfüggetlen menü, mely mobil eszközön összeugrik és hamburger ikonnal nyitható.

forráskódvideó

CSS háromszög

Tudtátok, hogy CSS-el bármilyen méretű és formájú háromszög megrajzolható? Alig néhány sornyi kód, ráadásul cross browser megoldás.

forráskódvideó

CSS pozicionálás

Ez a rész valamiért teljesen kimaradt a korábbi HTML+CSS videókból, úgyhogy most megnézzük mi a különbség a static, absolute, relative és fixed pozicionálás között.

forráskódvideó

Parallax scrolling

Egy kis móka a Skrollr JS library-val.

forráskódvideó

CSS transition

Bevezetés a CSS3 animáció világába. Micsoda megváltás lesz, ha mindenki HTML5 + CSS3 támogató böngészőt fog végre használni.

forráskódvideó