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.

Webdesign blog

Ezt az oldalt 2010. január 10-én indítottam azzal a céllal, hogy a webdesign szakmát népszerűsítsem. Azóta rengeteg anyagot osztottam meg a blogon és a YouTube csatornámon. Ezeket a tartalmakat rendszeresen frissítem, az elavult videókat törölni szoktam.

2020-tól az itt található anyagokkal kapcsolatban nem végzek support tevékenységet, az ezekkel kapcsolatos megkeresésekre idő hiányában sajnos nem tudok válaszolni. A kommentelési lehetőséget is meg kellett szüntetnem, mert annyira sok hozzászólás érkezett, hogy már egyszerűen nem tudtam mindenkinek válaszolni.

Köszönöm a rengeteg hozzászólást, bíztatást, a jövőben is igyekszem tartani a színvonalat.

Webdesign blog kategóriák

Összes bejegyzés (55)

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

Konyhai munkalap és mosogató csere

A tönkrement mosogatógép kiváló alkalmat biztosított egy kis konyhai felújításra.

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

InDesign: egyedi felsorolás készítése

Ezzel a módszerrel bármilyen vektoros ikont használhatunk felsorolásjelnek.

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

Photoshop tanfolyam

Ebből a 22 részből álló 5 és fél órás videóból megtanulhatod a Photoshop használatát az alapoktól.

Tovább olvasom

Egyszerű parallax effekt

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

Tovább olvasom

Ytong válaszfal készítése panellakásban

Amióta megvettem ezt a lakást, azóta gondolkodom, hogy ki kellene dobni ezt a ronda kétszárnyú ajtót a két szoba közül.

Tovább olvasom

After Effects alapok

Bevezetés az After Effects világába fűrészes hangulatban

Tovább olvasom

Image processor a Photoshop-ban

Tömeges képfeldolgozás, átméretezés, vízjelezés az image processor használatával.

Tovább olvasom

Bőr retusálás Photoshop-ban

Hogyan lesz a ragyás bőrből babapopsi, avagy a bőr retusálása Photoshop-ban a Spot Healing Brush és Clone Stamp eszközök használatával.

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

InDesign kezdőknek

Ha még sosem használtál InDesign-t, de szeretnéd megtanulni, ez a videó a segítségedre lehet.

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

FOIT, FOUT és a font-display property

Webfontok használata esetén gyakori jelenség a FOUT és FOIT. Nem komoly problémáról van szó, de, ha valaki azonban abszolút 100%-os performance-ra törekszik, érdemes egy kicsit elmerülni a témában.

Tovább olvasom

Az Axure használata

Interaktív prototípusok készítése.

Tovább olvasom

A Photoshop CC 2019 újdonságai

Megjött az új Photoshop, lássuk mi változott!

Tovább olvasom

Adobe XD VS. Lunacy

Az Adobe XD egyre több hasznos funkcióval rendelkezik amivel működést lehet szimulálni. A Lunacy pedig a Mac only Sketch-ben létrehozott fájlok Windows-os környezetben való szerkesztését hivatott megoldani. Mindkét program ingyenes. Lássuk a hasonlóságokat és a különbségeket!

Tovább olvasom

SVG animáció GSAP használatával

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

Tovább olvasom

Pico CMS

Adatbázist nem igénylő weboldalakhoz használható egyszerű és gyors flat file CMS.

Tovább olvasom

Ingyenes grafikai programok

A videókban két ingyenes grafikai program kerül bemutatásra, a Gravit Designer és a Vectr.

Tovább olvasom

WordPress sablonkészítés

Az oldalak tartalmát kétféle módon tölthetjük fel WordPress-ben: használhatjuk az admin szerkesztőjét, vagy létrehozhatunk külön fájlokat minden oldalhoz.

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

InDesign data merge: változó adatok kezelése

Tisztára mint WORD-ben a körlevél készítés. Csak ez működik is.

Tovább olvasom

HTML5 banner készítés

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

Tovább olvasom

Photoshop: banner mutációk készítése

A slice tool és a smart object-ek használatával egyszerűen és gyorsan készíthetünk különböző méretű bannereket egy adott kampányhoz.

Tovább olvasom

Hírlevél készítési tanácsok

A hírlevél küldést, mint online marketing eszközt, ma már minden e-kereskedelemmel foglalkozó cég rendszeresen használja. Elenyésző viszont azok száma akik komolyabb időt fordítanak erre a témára. A legtöbb hírlevél rosszul szerkesztett, csúnya és mobileszközökön nehezen olvasható.

Tovább olvasom

WordPress bővítmények

Gyakran felmerülő téma, hogy a WordPress tartalomkezelővel készített weboldalak nem jók. Akik ezt hangoztatják, a nem túl szakszerűen, bővítményekből összelegózott oldalakra céloznak ami abszolút jogos felvetés és maximálisan egyetértek vele.

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

Illustrator: Google Drive logó

A méltatlanul elhanyagolt Illustrator kategória két év után újabb anyaggal bővült.

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

Dia szkennelés házilag

Az analóg korszakban készült családi fotó és videógyűjtemény nagy részét sikerült digitalizálnom az elmúlt években. Már csak a diák maradtak hátra, ami viszont okozott némi fejtörést.

Tovább olvasom

Parallax scrolling

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

Tovább olvasom

Vezetékcsere panelben

A probléma gondolom sokak számára ismerős: panellakás, régi alumínium vezetékek, megégett kötések, földelés csak a fürdőben, esetleg a konyhában.

Tovább olvasom

Photoshop: régi képek retusálása

Nincs is jobb, mint hideg őszi estéken szkennelgetni az ezer éves családi fotókat. Ha azonban igazán jó eredményt szeretnék elérni, akkor sajnos elkerülhetetlen a képek utólagos feldolgozása.

Tovább olvasom

Illustrator: névjegykártya tervezés

A videóban megnézünk néhány hasznos funkciót, mely megkönnyíti a tervezést, illetve külön kitérek arra, hogy milyen formátumban célszerű küldeni a nyomdának az anyagot.

Tovább olvasom

Hogyan kell önéletrajzot készíteni?

Milyen egy jól szerkesztett önéletrajz? Sajnos egyáltalán nem olyan amilyet az emberek többsége el szokott küldeni amikor egy állásra jelentkezik.

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

A grafikai tervezés 4 alapelve

Először egy OpenOffice dokumentumot készítünk, majd megnézzük Photoshop-ban hogyan érvényesíthetőek az angolul ironikusan CRAP rövidítést viselő szabályok.

Tovább olvasom

Elektromos rizsfőző

Régi vágyamat sikerült beteljesítenem a hétvégén: vettem egy rizsfőzőt. Rengeteget olvastam róla korábban. Ezzel állítólag nem lehet rossz rizst csinálni, a használata pedig megalázóan egyszerű.

Tovább olvasom

Tömeges képátméretezés IrfanView-ban

A tömeges képátméretezés elég gyakran megoldandó feladat, amihez az IrfanView igen jól működő megoldást kínál, ráadásul ingyenesen.

Tovább olvasom