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.

CSS grid layout

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

A Bootstrap használata

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

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.

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.

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.

Egyszerű parallax effekt

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

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.

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.

SVG animáció GSAP használatával

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

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.

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.

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

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

HTML5 banner készítés

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

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

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

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.

Responsive progress bar

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

Responsive menü

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

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.

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.

Parallax scrolling

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

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.

Photoshop CC 2020 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.

Photoshop: image processor

Tömeges képfeldolgozás, átméretezés, vízjelezés az image processor használatával, melyet a File > Scripts > Image processor... alatt találunk a Photoshop menüjében. A vízjel létrehozásához szükségünk lesz az Actions panelre, melyet a Window menüben tudunk bekapcsolni.

Photoshop: bőr retusálása

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.

Photoshop: bőr retusálása

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

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.

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.

Illustrator: Google Drive logó

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

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.

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

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

InDesign alapok

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

InDesign: változó adatok kezelése

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

After Effects alapok

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

Akadálymentes weboldalak

Tanácsok a fejlesztéshez.

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.

Az Axure használata

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

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!

Pico CMS

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

Ingyenes grafikai programok

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

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.

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ó.

A WordPress bővítményekről

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.

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.

A grafikai tervezés 4 alapelve

Az idei év utolsó videójában egy hosszabb elmélkedést hallhattok a grafikai tervezés négy alapelvéről. 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.

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.

Konyhai munkalap és mosogató csere

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

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.

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.

A villanyszerelés örömei 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.

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ű.