Mérei Tamás webdesigner

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

20 éve foglalkozom weboldalak, felhasználói felületek tervezésével, kódolásával és WordPress sablonok készítésével. Dolgozom magánszemélyeknek, fejlesztő cégeknek, multiknak, állami szervezeteknek és reklámügynökségeknek is.

Kategória: HTML, CSS

Minden ami kódolással kapcsolatos, HTML, CSS, Bootstrap, parallax scrolling, animációk.

CSS container queries

A CSS grid layout óta kevés világmegváltó újdonság érkezik, a CSS container queries azonban ezek közé tartozik.

Tovább olvasom

CSS változók

CSS változók használatával átláthatóbbá tehetjük a forráskódot. A megvalósításhoz a var() függvényt használjuk.

Tovább olvasom

CSS scroll snap

A CSS scroll snap segítségével snap point-okat hozhatunk létre, és a görgetés során ezeknél a pontoknál fog megállni a scrollbar.

Tovább olvasom

CSS grid layout

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

Tovább olvasom

A Bootstrap használata

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

Tovább olvasom

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.

Tovább olvasom

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.

Tovább olvasom

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.

Tovább olvasom

Egyszerű parallax effekt

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

Tovább olvasom

Webdesign tanfolyam: 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ább olvasom

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.

Tovább olvasom

SVG animáció GSAP használatával

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

Tovább olvasom

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 olvasom

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 olvasom

CSS pszeudo szelektorok

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

Tovább olvasom

HTML5 banner készítés

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

Tovább olvasom

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

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

Tovább olvasom

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.

Tovább olvasom

Responsive progress bar

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

Tovább olvasom

CSS animáció GSAP-el

Kedvcsináló a GreenSock animation platformjához.

Tovább olvasom

Responsive menü

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

Tovább olvasom

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.

Tovább olvasom

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.

Tovább olvasom

Parallax scrolling

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

Tovább olvasom

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.

Tovább olvasom