A CSS kincsesláda című bejegyzéshez készült kép annyira jól sikerült, hogy úgy gondoltuk megmutatjuk nektek, hogy hogyan kell elkészíteni. Az alábbi videóban megnézheted lépésről-lépésre az elkészítését:

(Érdemes HD-re váltani)
A videóban van egy baki, ha megtaláltad, akkor írd meg kommentben.

Sokan nem ismerik őket, pedig fejlesztés során hatalmas segítséget jelenthetnek. A Chrome böngésző beépített Developer Tools-ára, és a Firefoxhoz telepíthető Firebug kiegészítőre gondok.
(A Firebug egy csökkentett Lite verziója telepíthető Chrome alá is, de a Chrome saját eszközével jobban járunk.)

Hogy mit tudunk ezekkel kezdeni? Gyakorlatilag bármilyen front-end manipulációt végre tudunk velük hajtani. És miért jó ez nekünk? Nos ezt fogom bemutatni a következő sorokban.

Hogyan lehet előhívni?

A Chrome Developer Toolst Windows alatt az F12 billentyűvel, OSX alatt a CMD+ALT+i billentyűkombinációval, Firefoxban a Firebugot F12 billentyűvel lehet előhívni.

Chrome Developer Tools

Firebug

A két eszköz felülete hasonló, elsőre a bal oldalon az oldal forrását, jobb oldalon pedig a forrásban kijelölt elemre vonatkozó stílusokat láthatjuk.

Mindegyik eszköz tartalmaz egy úgynevezett inspector eszközt, ezt a Chrome-ban a bal alsó sarokban található nagyítóval, Firebugban pedig a bal felső sarokban, a  ikonra kattintva aktiválhatjuk. Ezzel az eszközzel a dokumentumban kiválasztva a kívánt területet, a bal oldalon a kódban is a kiválasztott területre ugrik.

A legjobb most következik: a kódot itt szerkeszthetjük is! Ha a jobb oldalon a css résznél bármelyik tulajdonság mögé kattintasz, máris hozzáad egy új sort, ahová felveheted a saját tulajdonságodat. A tulajdonságok előtti pipával pedig ki-be kapcsolhatjuk az egyes tulajdonságokat. Az jobb oszlopban lefelé görgetve megnézhetjük azt is, hogy hogyan épül fel a CSS öröklődése. Ha áthúzva látsz egy sort, akkor az nem érvényes rá, mert felül van írva feljebb.

Miért jó ez? Képzeld csak el, hogy sitebuild közben, amikor valamit pozicionálsz, mindig mentened és frissítened kell, hogy lásd az eredményt. Nem egyszerűbb, ha itt beállítod, majd azt rakod a CSS-be? Ugye? Na ugye!

És ez még csak az első fül volt, nézzük meg a többit, bár ezeket csak érintőlegesen.

A Chrome-ban a Resources fülön tételesen láthatjuk, hogy milyen elemekből épül fel az oldal, milyen sütiket használ, stb. Firebugban ennek a Net fül feletethető meg, bár a Chrome beépített eszközéhez képest ez fapadosnak tűnhet.

A Network fül már izgalmasabb. Itt láthatjuk, hogy hogyan épül fel az oldal, milyen kérések követik egymást, meddig tartott a lekérésük, mindezt egy idővonalon elhelyezve. Betöltődési idő optimalizációja során ennek nagy hasznát vehetjük.

A további fülekből még a Console lehet érdekes (ez a firebugban az első fül). Ha a JavaScript kód futása közben hiba történik, akkor az a kozolban fog megjelenni. Ezzel is elősegítve a hibakeresést.

+1 bónusz: PageSpeed és YSlow

Nem árulok el nagy titkot, ha azt mondom, hogy a Google – minimálisan ugyan, de – a keresési találatok sorrendjének megállapításánál figyelembe veszi a betöltődési sebességet. Nem beszélve a látogatókról, akik várakoznak az oldalad betöltésére. Erre adtak ki egy telepíthető kiegészítőt, ami beépül a Developer Toolsba, a PageSpeed Insightst. Az elemzés gombra kattintva lefut egy ellenőrzés a megnyitott oldalon, ami ellenőrzi a legkritikusabb pontokat, és javaslatokat is ad a megoldására. A végeredmény egy szám lesz. Az OWT főoldala 83 pontot kapott a lehetésges 100-ból, ami egyáltalán nem rossz eredmény.
Az eszköz egyébként telepítés nélkül is használható: https://developers.google.com/speed/pagespeed/insights
Illetve telepíthető Chrome és Firefox alá is.

Hasonló megfontolásból készült a YSlow is. Szintén telepíthető Chrome és Firefox alá, illetve Safari és Opera alá is. Ennél is kapunk javaslatokat a probléma megoldására, viszont itt nem csak egy számot kapunk, hanem egy A-tól F-ig terjedő osztályzatot, ahol az A a legjobb. Itt az OWT főoldala C osztályzatot kapott.

Mindent összevetve ezek nagyon szuper eszközök, és megkönnyítik a munkát. Most már csak rád vár, hogy felfedezd őket!

Kapcsolódó linkek:

• A bejegyzés írása közben jelent meg a Hongkiat.com-on egy írás a Chrome Developer Toolsról
  http://www.hongkiat.com/blog/chrome-developer-tools/
• Firefoxhoz még érdemes lehet telepíteni a Firebugon kívül ezeket is:
  Web Developer
  Console²
• Chrome esetében az alábbiakat érdemes még telepíteni:
  Chrome Sniffer
  Web Developer

Már észrevehetted, de ez a mániám! Azaz Do It Youself a webgrafikában is! Kaptam pár kérdést a Facebookon májusi tanfolyamok indulására vonatkozóan, és mivel szeretek konkrétan válaszolni, gondoltam készítek egy tanfolyamnaptárat, nem csak odaírom, ahogy szoktam. Ki is tettem még pénteken. Először persze én is rákerestem arra, hogy notebook, meg notebook vector – de annyi infó egyiken sem fért volna el, amit rá akartam írni.

Stockon sem szeretek vásárolni, csak ha nagyon muszáj. Nyilván mindent nem lehet lefotózni, amire a munka során szükség van. Aztán megkérdeztem magamtól, mennyi idő is ez: 10 perc? Annál többet töltök el a napomból ostoba hírek olvasásával, vagy az aktuális mémmel..

Gondolkodással, hogy mit hová lett az végül 15 perc is. Negyedóra alatt elkészült egy olyan grafika, amelyik megfelelő lett arra, amire szántam, örülök, mert saját termék – és mivel felvettem ahogy csináltam, lett belőle tutorka is Nektek. Használd egészséggel, ha rendezvényed, eseményed van, akár egy fotó mellé téve is informatív módja, hogy kiírd a mikorist.

A jelszó tehát: ne töltsél le, ha magad is elkészítheted!

Lady Gagát még öreganyám is ismeri, “szokták mutatni a Fókuszba”! Mit tudunk róla?
Általában azzal sokkolja az embereket, hogy hülyén néz ki, mellesleg jól énekel és hónapokon át vezeti a listákat. 57 millió rajongója van a Facebookon, és 37 millió a Twitteren. A tökéletesen profi marketing gépezet mintapéldánya: ő és a csapata.
És mit tudunk Nicki Minajról? A csaj aki Lady Gagát majmolja, és elvan a farvízen.

Milyen lehet örök másodiknak lenni? Egy olcsó másolatnak, amit mindig összehasonlítanak az eredetivel? Van amit nem lehet megtanulni, a zsigerből jövő stílust csak elemeiben lehet lemásolni. Mondjuk aki ennyire durván kopipészt, annak komoly személyiségzavarai lehetnek. Az önértékelése nulla, persze ezen nincs is mit értékelni. De nem ő az egyetlen, hiszen az összes divának elmentek otthonról mióta Gaga ilyen ruhákban parádézik, hirtelen ők is polgárpukkasztóak lettek a szomszédlányokból. Csak ugyanaz a marketing elem hamar elhasználódik. Ki kiváncsi az ikszedik másolatra?

Mi a bántos franc köze van ennek a webdesignhoz?

Itt is könnyű beleesni a majmolók ketrecébe. Hisz mennyivel egyszerűbb a sikeres mintát követni, és átültetni. Nem kell gondolkodni, tervezni, nem kell energiát fektetni bele, csak felvenni egy olyan ruhát, amit nem ránk szabtak. Igaz nem is tanulsz belőle semmit. Megspórolod a hibázás lehetőségét, de nem kapod meg az azzal járó tapasztalatot! Nem leszel több! A következő lépést újra másolnod kell, mert magadtól nem vagy képes semmi eredetire!

Az ügyfelek gyakran kérik: Legyen olyan a honlapom, mint az Apple-é! Vagy a sikeres konkurensé! Ez nem jó irány, és ezt neked kell tudnod, mert nem csak szerzői jogi kérdéseket vet fel, hanem egyfajta öngól is – hisz a folyamatot, az indokokat amiért a sikeresé olyan amilyen, azt nem veszi át, csak a külsőségeket.

Magyarul: A szar aranyba forgatva is szar marad.

Hogyan kerüld el a Nicki Minaj féle skatulyát? azaz

Hogyan lehet a legtöbbet tanulni a webdesignról? Hogyan fejleszthető a vizuális érzék?

1. Nyisd ki a szemed! – kötelező program galériákat nézegetni! Hogy láss különböző tervezési stílusokat, színhasználatokat, változatos megoldásokat ugyanarra. Ne mint mezei internetező ember nézd meg őket, hanem bontsd őket formákra, vonalakra. Rá fogsz csodálkozni, hogy egy tetszetős grafika, valójában csak két-három kör, négyzet, egy érdekes vonal, és színezés.
Néhány galéria, amelyeket vegyél fel, sőt inkább cserélj le a napi olvasnivalók között. Nézegess kevesebb baromságot az FB-n, olvass kevesebb hírt amelyek csak felnyomják a vérnyomásod! Ezek nem visznek előre, sőt megbetegíthetnek! Ha van fél órád, töltsd olyannal ami a fejlődésedet szolgálja.
Keress a Dribbble oldalon színek szerint, így megláthatod, hogy nincs olyan hogy rossz szín. Libafoszölddel is lehet gyönyörű munkákat készíteni. http://dribbble.com/colors/666600

A Behance a világ legjobb designereinek ad helyet, és mindenféle munkákat találsz itt az építészettől a csomagolástervezésig – mind inspiráló lehet, arra is rájöhetsz, hogy ezernyi más terület létezik a designon belül. Lehet hogy az illusztrátorok útjára kellene lépned?
Ott a Pinterest, minden nap találhatsz olyan munkákat, amelyek közelebbi megvizsgálásával máris csiszoltad az ismereteid!

2. Utánozz! – Na de most komolyan? Igen!
A tükörneuronok felfedezése tényleg a majmokhoz köthető, ezek biztosítják az utánzási képességünket. A tanulási folyamat része az utánzás.

Gyerekkorban az utánzás létszükséglet, az alapvető viselkedésformákat a környezetünktől másoljuk. Az iskola is példákkal oktat, a példák alapján sajátítjuk el az ismereteket, és tudjuk átültetni a mindennapok gyakorlatába. A webdesign tanfolyamon is azt szoktam mondani, hogy először készítsd el azt, amit leírok a feladatban. Lépésről-lépésre utánozd le! Így van mankód, hogy mit kell csinálni, és ha jól csináltad, a vége sikerélmény.

Viszont megállna a világ fejlődése, ha mindenki csak annyit tenne, hogy szolgaian lemásolja a feladatot, és nem készítené el a saját változatát: nem akarna több lenni, jobbá tenni, felfedezni, újítani, problémamegoldani, kiszínezni, feldobni, saját arcára alakítani azt amit épp csinál… Még mindig pattintott kőeszközökkel vadásznánk, amit egyszer kitalált valaki, minek változtatni azon, ami már egyszer bevált?

3. De ne másolj! Legyél kreatív!
A kreativitás nem a rajzolás, festés, és egyéb alkotó tevékenység! Sokkal több annál! A kreativitás a teremtés képessége! Hogy ez művészet, vagy egy probléma megoldása mindegy!

Mindig azt kérdezik, nincs túl sok webdesigner a piacon? De igen. Nicki Minajokból rengeteg van! Náluk jobbnak, másnak lenni igazából rendkívül könnyű feladat! Ők mindig mögötted lesznek!
Kreatív munkára vágysz? Akkor használd a megszerzett ismereteid, fejleszd magad folyamatosan és legyél Te a területed Lady Gagája!

Amit eddig nem tudtál, vagy nem mertél megkérdezni, az most itt lesz. Egy nagy csokor CSS okosság.

Alapvető dolgok

CSS box modell

Az a fránya box modell… Általában ezt a legnehezebb elsajátítani, amikor valaki első ízben találkozik a CSS-el, pedig egyáltalán nem olyan nagy ördöngösség az egész. Alapvetően minden layout dobozokból áll, amiket egymás mellé-alá-fölé igazítunk.

Készítettünk egy kinyomtatható segédletet hozzá, amit itt tudsz letölteni PDF formátumban: CSS és a box modell

CSS rövítítések

Mikor már kellően összemelegedtél a CSS tulajdonságokkal, biztosan feltűnik sok helyen, hogy egyes tulajdonságokat összevonva is jól működő eredményt kapunk. Egyszerűen csak tudni kell a helyes sorrendet, és máris több kilobájtot spórolhatsz a CSS fájlon.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

…helyett:

margin: 10px 20px 30px 40px;

Ehhez is készült egy letölthető és kinyomtatható segédlet: CSS rövidítések

Középre igazítás

Az összes CSS kérdés közül talán mindenkinél ez az első: hogyan lehet középre igazítani valamit? (És itt most nem szövegre, hanem egy css boxra gondolunk.)
Elég egyszerű:

div {
    width: 960px; /*hogy tényleg box legyen, meg kell adni legalább a szélességét*/
    margin: 0 auto; /*a margó felülről és alulról 0, jobbról és balról automatikus*/
}

Ez esetben nem lehet az elemet úsztatni (float-olni).

A másik módszer az abszolút középre igazítás. Ezt akkor tudjuk alkalmazni, ha ismerjük az elem pontos méretét:

div {
   position: relative;
   width: 200px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-top: -100px;
   margin-left: -100px;
}

Működéséről annyit, hogy az elemet relatív pozícióba helyezzük, majd fentről (top) és balról (left) 50%-ra pozicionáljuk (a <body>-hoz képest). Ezzel az elem felső és bal szélső oldala pontosan középre kerül. De mi azt szeretnénk, hogy az elem középponja kerüljön középre, ezért negatív értékű felső és bal margóval (margin-top, margin-left) az elem méretének felével (200px/2=100px) arrébb húzzuk. A top és a margin-top opcionális, ha felülről nem akarod középre igazítani, akkor ez a rész elhagyható.

Hosszú szövegek levágása

Tudtad, hogy CSS segítségével is levághatod a szövegek végét? Erre találták ki a text-overflow tulajdonságot.

Adott egy hosszabb szöveg:

Applicake pie bonbon brownie. Brownie croissant topping. Muffin toffee dessert toffee brownie icing.

Amit le lehet rövidíteni:

Applicake pie bonbon brownie. Brownie croissant topping. Muffin toffee dessert toffee brownie icing.

width: 500px; /*ilyen széles lesz a szöveg*/
white-space: nowrap; /*ne legyen benne sortörés*/
overflow: hidden; /*ami kilóg, az ne legyen látható*/
text-overflow: ellipsis; /*ellipsis, azaz három pont a levágásnál*/

Ez egy igényes megoldás akkor, amikor generált tartalmakat kell megjeleníteni. Előnye, hogy bár a látogató számára nem látható a szöveg, a keresőrobot számára továbbra is látható marad a teljes tartalom.
Az ellipsis-en kívül lehet még az értéke clip (levágás), illetve string is, de utóbbit az eddigi tapasztalatok alapján csak nagyon kevés böngésző támogatja.

CSS “nullázása” (CSS reset)

Csak jó alapokra lehet építkezni, de ha az egyik böngészőben a <h1> alsó margója 10px a másikban meg 20px, akkor egy idő után képes az őrületbe kergetni. Íme a legnépszerűbb CSS reset kódrészlet, melyet Eric A. Meyer készített:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

A CSS kódolást kezd mindig úgy, hogy ezt bemásolod a CSS fájl elejére. Így, hogy minden közös nevezőre lett hozva, már elkezdheted definiálni a saját szabályaidat.

CSS keretrendszerek

Miért jók a keretrendszerek? Mert egy kész alapot adnak a munkára, amire aztán építkezhetünk. Ezekből jön most három:

HTML5 Boilerplate
Minden benne van, amire szükségünk lehet építkezés közben, ráadásul testre is lehet szabni letöltés előtt.
html5boilerplate.com

960 Grid System
Bár a reszponzív hullámmal kezd kimenni a divatból, mégis érdemes észben tartani és megismerni a 960.gs-t.
960.gs

Foundation
Egy kimondottan reszponzív oldalakhoz készített, grid alapú CSS framework, aminek használtat pillanatok alatt el lehet sajátítani.
foundation.zurb.com

Update: Itt egy összehasonlító táblázat a jelenleg legnépszerűbb CSS keretrendszerekről – usablica.github.io/front-end-frameworks/compare.html

Optimalizálás

cssuai.js

A CSSUserAgent egy JS eszköz, amit ha bekötsz a HTML oldaladba, akkor a <html> címkét ellátja az aktuális böngészőnek megfelelő osztályokkal (class). Így tudsz böngészőkként eltérő CSS tulajdonságokat hozzáadni az egyes elemekhez.

A bekötés igen egyszerű:

<script src="cssua.min.js"></script>

Ez után meg is nézheted a forráskódban, hogy a <html> címke milyen osztályokat kapott. Egy pléda: tételezzük fel, hogy Internet Explorer 8-ban egy elem 10px-el szélesebb, mint a többi böngészőben.

div {
   width: 200px; /*ezt értelmezi minden böngésző...*/
}
.ua-ie-8 div {
   width: 190px; /*...de IE8 esetén ezt felülírjuk*/
}

Ennyire egyszerű, és még szabványos megoldás is. (Halkan megjegyzem, hogy mi is ezt használjuk.) Ha az összes IE verzióban fennáll a probléma, akkor csak .ua-ie, ha Chrome böngészőben, akkor .ua-chrome, ha Chrome és Safari egyaránt, akkor lehet a böngészőmotorra hivatkozni a .ua-webkit osztállyal.
A js fájlt itt tudod letölteni: cssuseragent.org

-prefix-free

Ezt már egy múltkori bejegyzésben is említettem. A CSS3 szabvány nem végleges még, ezért a legtöbb böngésző még csak előtagokkal támogatja az egyes CSS3 tulajdonságokat. Az előzőhöz hasonlóan itt sincs más teendőd, mint bekötni a HTML fájlba a JS-t, és onnantól kezdve elfelejthetjük a -moz, -webkit, -o, -ms előtagok használatát. Ráadásul csak 2kB a mérete.
Beszerzés itt: leaverou.github.io/prefixfree

Vegyes

Ahogy általában mikor egy dobozt pakolunk ki, az alján találjuk meg az apróságokat, hát most jöjjön itt is ez a rész:

CSS matic
Online CSS3 generátor. Gradient, border-radius, noise texture, box shadow.
cssmatic.com

CSS3, please!
Kb. az összes CSS3 tulajdonság összefoglaló oldala.
css3please.com

CSS3 Generator
Egy másik nagy tudású online generátor.
css3generator.com

Font Squirrel webfont generator
Feltöltöd a betűtípust, és generál belőle @font-face kitet, amit aztán beköthetsz a saját css fájlodba. Az oldalon még találhatsz készen letölthető készleteket is.
fontsquirrel.com/tools/webfont-generator

<html>ipsum
Teszteléshez jól jöhet. Biztosan nem kell bemutatnom a lipsum.com-ot <html>ipsum annyiban más, hogy egyből html kódot fog generálni belőle.
html-ipsum.com

JQuery plugins
Bár ez már JS-ről szól, akkor is érdemes körülnézni. Egy igényes magyar nyelvű oldal, rengeteg JQuery bővítménnyel, és azok leírásával, használatuknak bemutatásával.
jquery-plugins.hu

CodePen
A kódolós közösségi oldal. Rengeteg érdekes megoldást találhatsz itt, érdemes körülnézni. (Engem is megtalálsz itt.)
codepen.io

Remélem sok kérdésedre választ kaptál a bejegyzésből. Like?

A hétre nem terveztem tutorialt, mert ugye félbevágott hét, meg május elseje… Ki az ördög görnyed a gép előtt, amikor végre lehet fűbenülni? Mivel számomra ez amúgy is mindenféle természeti ünneppel sűrűre szórt időszak, extra nagy erdőkört tettünk ma, és szembejött a Zorgona. Mivel ebben az extra melegben minden növény két napig virágzik, félek vasárnapra, azaz Anyák-napjára már csak megbarnult kórók jelzik, hogy itt voltak. 

A legtermészetbarátabb megoldás, hogy megőrizz valami szépet, ha lefényképezed. És ha már lefényképezted, miért is ne készíthetnél belőle valami még szebbet, és maradandóbbat?

Az anyák egy kedves szónak, egy apró figyelmességnek is örülnek, ha a gyereküktől kapják, mert az anyák már csak ilyenek… Ha kézműves táborba nem is jártál, egy szép egyedi képeslapot, vagy keretezett képet Te is tudsz készíteni.

Készíts egy fotót – virágokról, természetről, vagy a családodról, és szánj erre a tutorialra pár percet, és szerezz örömet idén egy apró, de maradandó ajándékkal!

Ha készen vagy, nyomtasd ki fotópapírra, vagy vidd el egy printshopba, ahol keretet is találhatsz hozzá! A módszer természetesen szabadon ötvözhető, vagy továbbfejleszthető más Photoshop műveletekkel!

Itt a tavasz, amelyet már nagyon vártunk. Extra tempóban nyílik, zöldül, pompázik a természet. Csodaszép fények vannak reggel, és alkonyatkor, nappal meg hétágra süt a nap, ideális, hogy minden fontosat megörökítsünk.
Én a webdesign mellett is szeretek kreatív dolgokat elkövetni, a fotózás pihentető hobbi. Ilyen hobbistáknak nagyon jó eszközök a Photoshop színező actionjai, amelyek a kevésbé profi képekből is egész jókat hoznak ki, amelyeket aztán lehet mutogatni a családnak és a barátoknak.

A lányaim végre kiszabadultak a szobából, ha csak tehetik a fűben ülve fedezik fel a világot. A kicsinek főleg nagy élmény, mostanra lett emberke, most kell megtanítani neki az állatok és a növények szeretetét. Ez a kép tegnap készült, igyekszem róluk életképeket készíteni, amelyek nem beállítottak, hanem koszosak, és kócosak, amilyenek amúgy.

A mamák rendszeresen elkérik a heti/havi adagot a lányokról, néhányat ki szoktam nyomtatni itthon, de van, hogy kidolgoztatom őket. Bizony ma már a kidolgozott fotóknak komoly presztízse van, hiszen van, hogy egy nap 200 fotót is készítek, aminek nagy része megy a kukába, vagy az archívba. Most egy olyan szettet kerestem, amelyek hasonlítanak a kedvelt mobil képszínező appra, az Instagram beépített effektjeire.

Ez a Ps action szett ingyenesen letölthető.
http://sa-cool.deviantart.com/art/Classic-3-8-169668295
Tegyél is így – a Download linket a jobb sávban találod. Csomagold ki a .rar fájlt, így egy sa-cool actions 3.8.atn fájlt fogsz kapni, és ez jó!
Nyisd meg a színezni kívánt fotót a Photoshopban (Open), majd a Window/Actions menüt kikeresve kapcsold be az Actions panelt.

Az Actions panelen találsz egy kis fület jobbfent, azt nyisd ki, és válaszd a Load Actionst, amellyel be tudod hívni a letöltött sa-cool actions 3.8.atn fájlt.

Ha betöltötte nincs más dolgod, mint megnyomni az egyiken a Play gombot és megvárni amíg lefut.

Ennyi az egész.
Ehhez hasonló Photoshop actionöket itt is találsz még rengeteget -

http://www.deviantart.com/morelikethis/169668295

A biztonság mindig csak akkor lesz fontos, amikor már késő, és a baj megtörtént. Földrengés sújtotta területeken is mindig a földrengések után kötnek tömegesen lakásbiztosítást, a földrengést megelőző években pedig pang a biztosítási piac. Pedig ha egy kicsit előre gondolkodnánk, akkor meg lehetne előzni a bajt. Nincs ez másként a weben és az informatikában sem. Igen, ez a téma most a biztonságról fog szólni, egy kicsit száraz lesz, de azt ajánlom, hogy olvasd el.

Nem titkoltan a jelenleg is tapasztalható támadásokkal kapcsolatban születik e bejegyzés. Történt ugyanis, hogy egy jelentős méretű botnet hálózatból folyamatosan bombázták a WordPress és Joomla alapú oldalakat brute force módszerrel.

Léteznek szabadon hozzáférhető jelszó listák, melyek a leggyakrabban használt jelszavakat tartalmazzák. A brute force – vagy más néven “nyers erő” – támadások abból állnak, hogy ezeket a népszerű jelszavakat próbálják meg folyamatos próbálkozás mellett összepárosítani az ismert felhasználónévvel. Sajnos sokszor sikerrel.

Például ha a felhasználóneved admin, a jelszavad pedig abc123, akkor ezzel a módszerrel pillanatok alatt bejutnak a felhasználói fiókodba. De akkor sem érezheted magad biztonságban, ha a jelszavad qwerty, 123456, monkey, dragon, iloveyou, vagy ninja. Ezek a jelszavak a 20 legnépszerűbb jelszó listájáról származnak.

Bizonyára ebből már kiderült, hogy a betörések nagy része az emberi tényezőre vezethető vissza. Mert mit ér egy atombiztos rendszer, ha a lustaság miatt gyenge a jelszó? Lehetne mondani a már-már közhelynek számító mondatot: a jelszó legalább 8 karakterből álljon, tartalmazzon kis és nagybetűt, számot, és speciális karaktert. Ha egy ilyen jelszavad van, akkor hasonló támadások ellen biztonságban érezheted magad. A követelményeknek megfelelő jelszó így néz ki: N9tn&H+b
Egyetlen hátránya, hogy nehezen megjegyezhető.

Van egy módszer, amivel könnyen megjegyezhető jelszavat találhatsz ki magadnak. Keress egy közmondást, verset, vagy mondókát, amit könnyen meg tudsz jegyezni. Vegyük például a “Minden jó, ha a vége jó.” közmondást. Ebből készíthetünk magunknak egy jelszót néhány plusz szabály beiktatásával: távolítsuk el belőle a szóközöket, a vesszőt, a végéről a pontot, és cseréljük ki az ó betűket nullára.
Ezt fogjuk kapni: Mindenj0haavégej0!
Ez már egy elég erős jelszó, és könnyen megjegyezhető, a végére még rakhatunk egy felkiáltójelet is, és a speciális karaktert is “letudtuk”. (Nem, ez nem az én jelszavam )

WordPress esetében azt szokták javasolni, hogy már telepítésnél írd át az admin felhasználót egy egyedi névre, vagy a saját nicknevedre. A brute force támadások általában az admin felhasználót célozzák. Bár megfelelő eszközökkel nem tart semeddig megtudni a valós felhasználót, ennek ellenére egy átlagos támadás esetén ez már egy újabb gát a behatolók ellen.
Jogosultságok korlátozásával is lehet még operálni. Ha a bejegyzéseket egy csökkentett jogosultságú (pl. szerző vagy közreműködő) felhasználóval írod, akkor máris csökkentetted a feltörés kockázatát. Ha a fiókba be is jutnak, sok dolgot nem tudnak csinálni. Az adminisztrátor felhasználót pedig csak kivételes esetekben vedd elő.

Védelmi mechanizmus lehet még az IP tiltás is. Megadott mennyiségű sikertelen belépés utána a próbálkozó IP címét tiltólistára tehetjük. Erre WordPress esetében ott van például a Login LockDown bővítmény. Ez az egyedi esetekben megoldás nyújthat, de mint a jelenlegi támadások esetében is, egyszerűen túl sok IP címről érkeztek behatolási kísérletek, így ezzel akár a szervert is túlterhelhetjük.

Mentés! Mentés! Mentés! Mindig legyen biztonsági mentés az oldaladról! Válassz olyan tárhelyszolgáltatót, aki legalább napi szinten készít biztonsági mentést, így egy esetleges behatolás esetén lehetőség van visszaállni egy korábbi állapotra.

Ha már megtörtént a baj, akkor erősen ajánlott a forráskódot átnézni, WordPress esetében az alapokat újratelepíteni. Elképzelhető, hogy a behatolás során elhelyeztek egy backdoort, amit később bármikor felhasználhatnak, hogy újra bejussanak az oldal védett részeire.

Néhány egyszerű szabály betartásával tehát nagyban emelhetjük a biztonsági szintet, de tökéletes biztonság nincs. Viszont a cél az, hogy minél több akadályt gördítsük az esetleges behatolók elé. A biztonság fontos! Ne könnyítsd meg a behatolók dolgát!

(A bejegyzésben linkelt  külső tartalmak kizárólag etikus célokra használhatók fel!)

Mi volt előbb? A tyúk vagy a tojás? Egyáltalán mi köze van a tojásnak a húsvéthoz? Ezt nem tudjuk megállapítani CSS3-mal, viszont készíthetünk vele egyet.

Általánosságban: az egyszerűség kedvéért én most nem fogom a teljes, böngészőfüggetlen CSS kódrészleteket leírni, csak a W3C szabvány szerintieket. A teljes kódot a bejegyzés végén láthatod.

El sem hinnéd mennyire egyszerű. Mire van szűkségünk hozzá? Egyetlen darab div-re, ezt hozzuk is létre:

<div class="egg"></div>

A CSS pedig úgy fog kinézni, hogy ennek a <div>-nek kell először is szélességet, illetve magasságot adni, úgy, hogy a magassága arányosan nagyobb legyen, mint a szélessége. Így fogjuk elérni a nyújtott formát.

.egg {
    width: 200px;
    height: 280px;
}

Ez most még csak egy téglalap, a tojás formáját a border-radius barátunkkal tulajdonsággal fogjuk elérni. A border-radius tulajdonságot dobozok szélének lekerekítésére használjuk. Kevesen tudják viszont, hogy a méretén kívül a hosszúságát (lenght) is megadhatjuk. Ez jelen esetben 50% lesz, tehát azt szeretnénk, hogy a téglalap feléig tartson a lekerekítés minden oldalról. Az ovális forma eléréséhez a felső két sarkot 60%-ra, az alsó két sarkot 40%-ra állítsuk be. (Körbejárási irány: bal felső, jobb felső, jobb alsó, bal alsó.)

border-radius: 50%/60% 60% 40% 40%;

Mindez lefordítva a következőt jelenti:

border-radius: hosszúság / bal-felső jobb-felső jobb-alsó bal-alsó;

Most már van egy tojás formánk, adjunk neki színt is. A segítségemre itt a ColorZilla által készített Ultimate CSS Gradient Generator volt. Használd te is nyugodtan. Szükségünk lesz egy radial színátmenetre. Ez az alakzat középpontjából fog indulni, és a szélén fejeződik be.

background:  radial-gradient(ellipse at center,  #fff 0%, #ccc 100%);

A középről induló színátmenet fehérből (#fff) indul, és világosszürkében (#ccc) végződik. Bár a színvilág nem éppen húsvéti, a kreativitásodra bízom, hogy te milyen színeket választasz hozzá. Még rá kell tegyük a CSS3 logót is, ezt pedig szintén a CSS3 által hozott multiple background segítségével fogjuk elérni. Ez nem takar semmi extrát, egy vesszőn kívül. Felhasználva az előző kódrészletet, a background tulajdonság után közvetlenül hívjuk be a képet, helyezzük középre ismétlés nélkül, majd egy vessző után jöhet a színátmenet is:

background: url(css3.png) no-repeat center, radial-gradient(ellipse at center,  #fff 0%,#ccc 100%);

Összességében a tojás kódja (ez de viccesen hangzik ) eddig így néz ki:

.egg {
  width: 200px;
  height: 280px;
  border-radius: 50%/60% 60% 40% 40%;
  background: url(css3.png) no-repeat center, radial-gradient(ellipse at center,  #fff 0%,#ccc 100%); 
}

Ezzel el is készült a tojásunk, most jöhet a szorgalmi feladat.

Animáljunk!
A tojásunk el fog gurulni, majd vissza fog állni az eredeti pozíciójába.

A CSS3 animációk két részből állnak. Az egyik felében megadjuk, hogy mit akarunk csinálni (keyframes – kulcskockák), a másik felében pedig hogy mindezt hogyan, és mennyi ideig (animation).

Első körben a kulcskockákat kell létrehoznunk. Ez a kifejezés ismerős lehet a Flash-ben jártasaknak. A kulcskockákat rule-ként (szabályként) tudjuk létrehozni, amit @ jellel kezdünk, megadjuk a szabály típusát (keyframes) és nevét, majd a már ismert zárójelek közé tesszük az un. keyframe-selectorokat. Nyugi, annyira nem bonyolult, mint amennyire hangzik, éppen ezért lássuk, hogyan néz ez ki kódra lefordítva:

@keyframes roll {
   0% {}
   100% {}
}

A @keyframes-szel megadtuk, hogy kulcskockák következnek, a roll pedig a neve lesz. Ezzel a névvel fogunk hivatkozni majd rá. A keyframe-selectorok a 0% és a 100% lesznek. Itt definiálhatjuk, hogy mi legyen a kezdő érték (0% vagy helyettesíthető from szóval), és hová akarunk megérkezni (100% vagy helyettesíthető to szóval).

Azt szeretnénk, hogy a tojás elguruljon. Ehhez a transform tulajdonságra lesz szükségünk, annak is a rotate értékére. 90 fokkal elfordítjuk a tojást.

A kiinduló pontra tehát először is meg kell adnunk, hogy ennek értéke 0.

0% {transform: rotate(0deg);}

A 100%-hoz pedig azt, hogy 90 fok:

100% {transform: rotate(90deg);}

Viszont ez így nem lesz túl szép, ezért úgy fogjuk megcsinálni, hogy az animáció végén érjük el ismét a kiindulási pontot. Nincs más dolgunk, mint hogy a jelenlegi 100%-ot átírjuk 50%-ra, majd a 0%-os sort lemásolva az aljára, átírjuk 100%-ra. Valahogy így:

@keyframes roll {
   0% {transform: rotate(0deg);}
   50% {transform: rotate(90deg);}
   100% {transform: rotate(0deg);}
}

0-50%: elérjük a 90 fokot
50-100%: visszatérünk 0 fokra

Itt az idő, hogy a tojás guruljon is. Az animációt a tojásra az animation tulajdonsággal tudjuk alkalmazni. Az animation a következőkkel kell rendelkezzen: animáció neve, hossza, időzítési funkció, késleltetés, ismétlés száma, irány.

Az animáció neve a keyframe-ben meghatározott roll név lesz, a hossza 4 másodperc, az időzítési funkciója ease, nem fogunk késletetni, ismétlés száma infinite (folyamatos), iránya normal lesz.

animation: roll 4s ease 0s infinite normal;

Itt most nem tudunk részletesen kitérjünk minden egyes értékre, ha részletesen érdekel az animation tulajdonság, akkor a W3C Schools oldalán olvass utána.

Ha most megnézed, akkor elég érdekesen néz ki, mivel nem mozdul el, csak egy helyben mozog. A kulcskockákat még el kell látnunk egy kis margóval ahhoz, hogy elérjük a megfelelő hatást:

@keyframes roll {
   0% {transform: rotate(0deg); margin-left:0; margin-top: 0;}
   50% {transform: rotate(90deg); margin-left: 170px; margin-top: 45px;}
   100% {transform: rotate(0deg); margin-left:0; margin-top: 0;}
}

Láthatod, hogy felülről 170px-el, bal oldalról pedig 45px-el beljebb húztam az 50%-os kulcskockánál.  0 illetve 100%-nál ezek értéke 0 lesz. Így elérhetjük a kívánt hatást. A tojás gurul!

Ezzel gyakorlatilag el is készültünk, viszont amit eddig csináltunk, az a legtöbb böngészőben nem fog működni. Nyugi, nem kell kidobnod a kukába, csak a megfelelő tulajdonságokat el kell látni a megfelelő előtagokkal (-webkit-, -moz-, -o-), illetve duplikálni őket, hogy mindegyik böngésző megkapja a magáét. Ezt az alábbi ablakban megnézheted a CSS fülre kattintva:

Check out this Pen!

Hasznos linkek:

• Időzítési funkciók-ról (timing-funciton) itt találtam egy jó szemléltető példát: http://www.the-art-of-web.com/css/timing-function/
• A héten találtam egy nagyon hasznos kis JS fájlt is, ami megszabadít minket a CSS-ben használt előtagok használatától: http://leaverou.github.com/prefixfree/

Több mint 30 percnyi tömény tananyag, mégis könnyed, mert végtelenül egyszerű. Még akkor is, ha addig sosem használtad a Fireworks programot. Mert igazából ez a webdesign tervező szoftver, annyira kézreáll, annyira könnyű méretezni, rétegeket kezelni, ide-oda pakolászni a terven.

A Kutyabolondok egy fiktív terv, amely lehetne macskasimogatók, vagy galambetetők is, tök8. A segédlet a grafikai elkészítésről szól – a koncepció külön tészta.

Egy jól áttekinthető, letisztult és trendkövető főoldali nézet, amely az egyszerű elemei által könnyen elkészíthető. A Metro UI stílus a jelenlegi trendek fontos eleme, színes, csempés, sok fotóval, és minimalista designelemekkel operál. Ezt követte valamelyest ez a terv is – a tutor alapján szabadon szájízre szabható!

33 perc. Persze igazából több mint egy óra volt összerakni, itt-ott belegyorsítottam, kivágtam pár csetbeszélgetést, 10 perc Facebookozást, és pár céltalan egérrel rohangálást.

Kutyabolondok Metro UI style – Fireworks tutorial from webdesigntanfolyam on Vimeo.

Javaslat: ha még sosem csináltál ilyet, akkor nézd meg először végig. Aztán bele lehet egyes részekbe tekerni, vagy épp megállítani. Abszolút kezdőként 3-4x biztos meg kell nézned! Ha csak a Fireworks új, akkor csak 1x végig, aztán kezdheted is!

A csíkos alapot, azaz gridet innen tudod letölteni : 960gs. 
Letöltés után bontsd ki, és a Template mappában a Fireworks mappát keresd. Nyisd ki a 16 sávosat a programban, és ennyi.

A végeredmény, ami kapnod kell:

Jó munkát!