-- I am --

Dienah • 21 • lány • bloggermaster* 
(*ezt nem kell komolyan venni)

Life is not meant to be good, life is meant to be lived.

Nem mondom meg hogy mit csinálj, hogyan csináld. Azt sem mondom meg mit kellene tenned. Én csak azt mondom ami szerintem úgy van, ami engem érdekel, amit én tapasztaltam. És persze ami nekem bevált. Ezen laza keretek között lesz itt szó a blogolásról. 

 
-- My Tags --

FreebiePometo • Blogtipp • CodingHints • Challange • Test • Portfolio • CSS • Grapics • Logo • Usefull Links • Interactive •

Old Tags
*
Nem frissülnek, a régi bejegyzésekhez tartoznak!! Mardéktalanul megtalálhatóak a menüben!

fonts  • FREEBIE 
 • CSS • BLOGTIPP • BLOGTHEME •
 LINKS  • LIST • logo • graphics •  Codingtest interactive

 
-- Interactive --

 
-- My Portfolio --

A műveimet mi más tudja jobban bemutatni mint a Deviantart fiókom? Itt találsz letölthető tartalmat, illetve korábbi blogdesign-okat is.

Meg szeretnéd nézni?

Amennyiben a félkész műveimet szeretnéd megcsodálni látogass el erre az oldalra ahol css kódokat gyártok ,

 
-- My Services --


Ez egy professzionális kérdezz-felelek lesz, ahol a blogolásról és a kódolásról kérdezhettek. Ha elakadtatok egy-egy elem bekódolásával, illetve ha el kell magyarázni valamit, állok rendelkezésre!

Egy mailt kell írnotok csupán a szerk.pometo@gmail.com-ra a következő tárggyal „Blogger Support” és amint tudok válaszolok! Konkrét design-ek és a kódok esetében is szívesen segítek(lehetőleg Gportál :P)!


Lehetőség nyílik az oldalon kritikát kérni, de csak és kizárólag blogoknak, saját készítésű design-el!  Minden designváltás után megejthetitek a kritikakérést. Az oldalak kinézetté szigorú szempontok alapján fogom nézni, olvashatóság és átláthatóság szempontjából nézve. Igyekszem mellőzni a „nekem nem tetszik mert csúnya  a színe” dolgokat.

Amennyiben szeretnéd igénybe venni ezt a szolgáltatást, dobj egy mailt a szerk.pometo@gmail.com-ra lehetőleg „Kritika” tárggyal ellátva.

 
-- My Projects --

Túl sok a minimalizmus, túl sok az egyhangúság, elveszett a stílus és már nagyjából az egyéniség is. Ennek a projectnek az a célja hogy eszközöket biztosítson azok számára, akik a régi Gportálos stílus elemeit akarják használni, kissé modernebb kiadásban. A Project keretein belül 5db régi stílusú CSS kód fog elkészülni, kicsi, színes és mindent bele! #Old Time Gportal Project

Egy új sorozatot szeretnék létrehozni, aminek első részének tekinthetjük a címkék formázását, amely egyes elemeknek a  bekódolási lehetőségeit fogja megtárgyalni, alapszinten. Az elemhez tartozó kódolási dolgokat és a különböző egyszerűbb formázási lehetőségeket. Ezzel az a célom hogy inspiráljalak titeket arra hogy törődjetek az apróságokkal is, mert ez is egy olyan dolog ami egyedivé tesz!

 

-- Comments --
Friss bejegyzések
2017.08.15. 10:59
2017.08.14. 21:24
2017.08.08. 17:01
2017.08.07. 17:40
Friss hozzászólások
 
Poteto+Tometo=Pometo

Blogcímkék formázása

2017.06.28. 12:12, Dienah
Címkék: coding css
Most pár tippel érkeztem hogy hogy dobjátok fel a Gportál blogmodul címkéit, nagyon egyszerű formázásokról van szó, mégis nagyon szépen fel tudják dobni a kinézetet. Legyen szó egyszerű címkékről, vagy egyéb karaterekkel esetleg font awesome ikonokkal megspékelt kódokról.
 
Alapvető külömbség
A legtöbb CSS kódban két különböző formázást láthattok, az egyik a .blogtags, a másik pedig a .blogtags a, vagyis az első a linkeket tartó kis blokk, a másik pedig maga a címke ami alapesetben egy egyszerű linkelt szó. Ha helyezgetni akarjuk magukat a címkéket a .blogtags-hoz kell hozzányúlnunk, ha formázni őket akkor a .blogtags a-hoz.
 
Címketartó blokk kódolása
Elhelyezés: A blokk attól függetlenül formázható hogy éppen fenn illetve a blogmodul alján találhatóak. Ahogy ti is láthattátok pár ember sablonkódjába, ezeket a kis címkéket úgy pakolja az ember ahogy nem szégyelli, ez is megér majd egy misét amit egy külön bejegyzésben fogok összeszedni. Most legyen szó arról hogy ott vannak ahol eredetileg, csak formázni akarjátok őket.
 
Címke szó elrejtése: Itt nem használható a CSS display és visibility tulajdonsága, ami alap esetben eltűnteti és láthatatlanná teszi az elemeket, mert akkor maguk a címkék is eltűnnek. De a megoldás még egyszerűbb. Nem tetszik a címke szó? Egyszerűen csak modosítsuk úgy a dolgot hogy betűméret legyen 1px a szín pedig fehér/átlátszó. Ezzel a módszerrel lényegi helyet sem fog foglalni a szó, szóval ha középre helyezed pl a címkéket 2px távolságban lesz a méltani középtől, amit ha valaki messziről kiszúr megtapsolom :)
 
.blogtags {
font-size: 1px;
color: transparent;}
 
Linkek díszítése
Magukra a linkekere érvényesek az egyszerű szövegformázások, mint a méret, szín, betűtípus stb. Különböző betűtranszformációk, dőlt, félkövér stb. Ezenek a CSS-ben való pontos megvalósításaira nem térnék ki, mert millió helyen le van ez írva :)
Oké oké.. leírom hogy mire kell ráguglizni ha nem ismeritek.
 
font-size, font-family, line-heigh, color, background, text-trasform, font-weight, font-style, text-decoration, border, padding, letter-spacing, 
 
Alapvető stíluselem a keretek használata, ami egy kis padding tulajdonsággal megspékelve egy egyszerű minimalista stílust ad vissza, a keretek miatt miatt mégis megfelelő kiemelést kapnak a címkék.
 
.blogtags a {
font-size: 11pt;
text-transform: uppercase; /* Nagy betűssé tesszük a  szöveget*/
border: 1px solid black /* egy 1px-es fekete egyszerű keretet adunk a linkekenek */
padding: 5px; /* a szöveg a kerettől 5px távolságra lesz */
 
Formázás :before és :after -el
 
 
Ez sem egy nagy blackmagic. A .blogtags a:before felelős a linkek előtti formázásokért, az after ezek alapján a linkek utániért, vagyis jelen esetben még csak a linkek előtti és utáni törközökért. A :before és az :after egyik fő tulajdonsága a content, amivel tetszőleges tartalmat adhatunk ezeknek a térközöknek, természetes a tetszőlegesen beszúrt karakterek/karaktersorok nem lesznek ez esetben linkelve. A példánkban azt nézzük meg hogy hogyan rakunk a linkek köré kapcsoszárójeleket.
 
.blogtags { 
color: white;
font-size: 1px; }
.blogtags a:before { /*kis ikonok a tag-ek előtt */
color: black;
font-size: 15px;
content: '{ ';} /* beszúrjuk a nyitó kapcsos zárójelet */
.blogtags a:after { /*kis ikonok a tag-ek után */
color: black;
font-size: 15px;
content: ' }';}/* beszúrjuk a záró kapcsos zárójelet */
 
Itt alkalmaztam az első pontban említett címke szó éltüntetését is, és a :before és :after formázásokat is, ezeknek a formázása természetesen független lehet a .blogtags a formázásitól, csak maradjunka szövegformázási tulajdonságoknál. A content-be megadható tetszőkeges karaktersorozat, illetve HTML kód is, csak tartsuk a sor színtaktikáját, magyarul maradjanak meg a felsővesszők :)
 
 
Ugyan itt meg szeretném említeni azt hogy magára a címkeblokkra is ugyan így alkalmazható ez a módszer, csak így az összes címke lesz egy darab kapcsoszárójelben. És ha emellé egyszerű linkelt szövegként kódoljuk be a címkéket egész dekoratív lesz az eredmény.
 
.blogtags:before {
content: '{';
color:#e9e077!important;
font-size: 12pt!important;}
.blogtags:after {
content: ' }';
color: #e9e077!important;
font-size: 12pt!important;}
 
 
Egy példa a fontAwesome ikonok használatára:
 
.blogtags a:before { /*kis ikonok a tag-ek előtt */
font-family:FontAwesome;
color: black;
font-size: 15px;
content: '\f02b';}
 
Ugye itt a linkek elé raktunk be egy kis ikont, rakhatjuk utána is, a fentebb említett módszerrel rakhatjuk aze gész címkeblokk elé (ugye a .blogtags:before használatával) és természetesen magukat az ikonokat ugyancsak a :before, :after tulajdonságai miatt függetlenül formázhatod. (fontAwesome ikonokról bővebben itt olvashatsz)
 
A címkék formázása alapvetően egyszerű, egyszerűbb CSS tulajdonságokkal is nagyon szép eredményeket érhetünk el. Csak egy elképzelés kell, és egy kis akarat hogy ténylegesen megcsináljunk. Ha kell alapnak vigyétek a példákban felhasznált kódokat.

Egy icipicit "felbontásbarát" kinézet

2017.03.27. 15:35, Dienah

Most a versenyzőimnek érkeztem pár egy kis szösszenettel. Pár tanács az oldalak kinézetével kapcsolatban, amit nem fogok megemlíteni sem a kritikában sem a pontozásban, de úgy vettem észre mindenkinél fennáll ez a dolog és.. úgy érzem a 21. században már érdemes ezekre odafigyelni.

Ugye a design hibák felmérése érdekében, ellenőriztem az oldalakat a munkahelyi gépemről is, a laptopról és külömbző felbontású monitorokról is. Az otthoni gépem felbontása ezektől valamivel kissebb de manapság még mindig az átlagos méret. Még otthon minden oldal nagyon szépen van felépítve. Az oldalak tartalmi sávja elfoglalja a böngésző 3/4-ét, a betűméret olvasható. Még egy nagyobb felbontásban, az oldalak tartalmi sávja a böngésző felét sem foglalja el, és iszonyú törpék a betűk. Bár az elrendezés mindenhol hibátlan, nem csúszik semmi-semerre mégis iszonyatosan pici minden, és 2 perc olvasás után nyomok egy 150-os nagyítást (pedig eskü nagyon jó szemem van).

Arról ne is beszéljünk hogy melóban #internetexplorer és látok érdekes dolgokat, de én azt a szart nem vagyok hajlandó figyelembe venni, hiába még mindig a leggyakrabban használt böngésző :D

Szerintem, a felbontás függetlenség nem csak azt jelenti hogy adott oldal ne csússzon szét.. Hanem azt hogy minden felbontásban ugyan azt az "élményt" és "látványt" nyújtsa az oldal. Ehhez kicsit a reszponzivitáshoz kell nyúlnunk, olyan mértékben hogy egyszerűen csak nem fix értékekkel dolgozunk, hanem dinamikus értékeket adunk meg ott ahol csak lehet. Például .sitemain width-ét nem úgy adjuk meg hogy 800px hanem úgy hogy 76%, a betűméret nem 12px hanem x%. Kis apróságok, mégis sokban javítják a felhasználói élményt, és mint szerkesztő, egyáltalán nem bonyolult ezt kivitelezni és megszokni.

És merem ajánlani a külömböző kicsi felbontásokra való optimalizálást is, mert még mindig 21. század, és telefonról a gportálos oldalak gusztustalanok :P

Ajánlott olvasmányok ezügyben: Niki ezen cikke és további sok másik még ebben a témában, szintén az ő tollában && gugli

És ezt úgy mindenkinek tanácsolnám, nem csak a versenyzőimnek. Illetve kérem küldjetek egy kis visszajelzést hogy ti általában milyen felbontásban böngésztek.

Tippek a CSS lassú elsajátításához

2017.02.21. 11:39, Dienah
Címkék: css coding blogtipp

Nagyon sok ember nem barátkozik meg a CSS-el, most pár tippel érkeztem hogyan szelídítsetek meg egy kódot, illetve hogyan induljatok el a tanulással. Ez nem feltétlenül egy olyan dolog hogy leülsz és megtanulod, lehet szépen apránként. Én ez utóbbihoz adnék tippeket, a másikhoz pedig a Google a barátotok ;)

Miért? Mert engem személy szerint rohadtul idegesít hogy minden oldal ugyan úgy néz ki, ugyan azokat a kódokat használja. A sablonkód az egy átmeneti dolog, ami addig van még nem írsz sajátot, nem találsz saját stílust, vagy egy apróbb kilengés amit felraksz mert éppen nagyon tetszik.

Alapszituáció:
Nyitottam egy blogot, szeretném hogy úgy nézzen ki ahogy én akarom. Nem tudok kódolni. Keresek egy sablont amit más csinált. Szép-szép, de nem tökéletes. Viszont ha ez meg ez kicsit más lenne, akkor sokkal jobban fog tetszeni... Egy sablonkód, amit más csinál a saját ízlése alapján az sosem lesz az igazi.

Legtöbb esetben mindenkinél úgy kezdődik/kezdődött hogy apránként írt át egy sablonkódot. Színeket, számokat, egyéb értékeket. Kitörölt belőle dolgokat és nézte mi változik. Ehhez két dolog kell, egy megbízható jól megcsinált sablonkód, és némi akarat hogy egyedien nézzen ki a blogod.
Én ezzel a sablonnal kezdtem, bár itt nem látni de csak apró dolgokat írtam át, itt pedig már leültem a popimra és tégláról-téglára felépítettem a kódot. Sokat segít ha van egy olyan kódod amiről már tudod hogy a sorai egészen pontosan mit csinálnak, minden egyes kis mocsok sor esetében.

Lássuk más színben!

Általában a  színekkel kezdődik, és mikor belenéz az ember egy kódba szemet szúr a color: #f5f5f5 sor és társai. Tehát ezek a varázskaraktersorok a színek? Igen. Gyors gugli miegyébb, keressünk szebbet. Cseréljük ki!
Ha egy kód alapvető színkészletét meg akarod változtatni arra van egy jó módszerem, gyors és egyszerű és egy sem marad ki. A küldetésben hű társad a mezei Jegyzettömb. Kiszűröd a különböző színkódokat, és a futurisztikus keresés-csere funkcióval az összeset kicseréled a te választott színeidre. A módszer pontos és hatékony, és megkímél attól hogy 1percnél több időt szánj a kód "látószögben létezésére".

Lopni ér!

Más sablonkódja, amihez az van írva hogy vihető, ingyen, free, tiéd, neszefussel. Persze a megfelelő krediteléssel (kilinkeled az oldaladra hogy ő csinálta a kódot).
Ötleteket is. Látsz egy nagyon szépen bekódolt szöveget, egy szép betűtípust? Egy szép formázást akárhol? A forráskód nézet mindig adott de nem a legeffektívebb az ilyen dolgok megtalálásához, kicsit sok és ha nem érted hogy mi az a szép elem akkor az életben nem találod meg. 

Ebben a jobbklikk fog nekünk segíteni. A GoogleChrome-ban van egy olyan funkció hogy "Vizsgálat" (biztos van a  többi böngészőben is, csak lehet máshogy becézik) ami kiírja neked hogy ez misoda és milyen formázások vonatkoznak rá, az összes kódrészletet kirakja aminek köze van az adott elemhez.

Végezetül beszéljünk a kreditelésről

Ugye illik kirakni mindazt ahonnan segítséget kaptál és felhasználod. Van az a pont ahol már a kód a sajátod. Viszont mibe kerül egy forrás menü? Pár linkelt karakter valahová? Semmibe. Mindenki aki segített hogy eljuss egy adott szintre érdemel valamit. Ha nem is nevezed meg hogy pontosan miért, illik köszönetet mondani.
 

Elejére | Újabbak | Régebbiek | Végére |
 

 

 

 

 

 

 

 


Az ASZTRO-suli mindenkit Szeretettel vár. Tanuld meg az asztrológiát a saját horoszkópod elemzésével -TELJESEN INGYEN!    *****    A csillagjövõ asztrológia portálon akció! Születési horoszkóp + 3 év elõrejelzés + Párkapcsolati elemzés 2000 Ft. katt!    *****    Szereted a humort, jó zenéket? Szeretnél ilyen mûsorban részt venni? Keress oldalamon!    *****    "Revealing the truth is like setting a match on fire. It can bring light or set your world on fire." | PROJECT D.C.    *****    PROJECT DC egy futurisztikus-disztópikus SZEREPJÁTÉK! Bármikor szívesen látjuk a csatlakozókat!    *****    Ne maradj le semmirõl, értesülj elsõ kézbõl a Selena Gomezzel kapcsolatos hírekrõl! Hat éve várja a látogatókat az oldal    *****    Református exmisszus-gyakornok, jégkorong, izomautók, rap zene. Igen, ez mind én vagyok! Hogyan? Nézz be és megtudod! :)    *****    Szeretsz írni? Lenne egy jó témád, amit megosztanál másokkal? Akkor kattints, és nyerj egy vendégposztot nálam! :)    *****    Kedveled Ian Somerhaldert? Odáig vagy a szépséges színésznõért, Nina Dobrevért? Kattints! Nem csak TVD rajongóknak!    *****    Szeretsz filmet nézni? Akkor itt a helyed! Nézz filmet facebook messengeren. Klikk ide!!!!    *****    MAYFLOWER / egy májusban született lány blogja / MAYFLOWER / egy májusban született lány blogja / MAYFLOWER    *****    DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE! DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE!    *****    ***Egy blog. Egy lány. Egy élet.*** Ðzsí blogol. *G-PORTÁL KÖZÖSSÉGMENTÉS ugyanitt. Ha hiányzik a régi közösség.*BLOG***    *****    Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok    *****    Nézz filmet facebook messengeren!!!! Klikk! Klikk!    *****    ONMYMIND \\ EGY ÁTLAGOS SRÁC BLOGOL MINDENRÕL AMI ESZÉBEJUT \\ ZENE, CIKKEK, KRITIKA? KATTINTS ÉS OLVASS MOST KEDVEDRE    *****    **********Rengeteg AKCIÓ! Vegyszermentes kozmetikmok és bio mosó és tisztítószerek, munkalehetõséggel! ***********    *****    OKTATÁS INGYENESEN az ASZTRO-suliban, Asztrológiai tanácsadás BECSÜLET KASSZÁS alapon! Fordulj hozzám bizalommal!    *****    Bûbájos boszorkák - Charmed - Hírek a folytatásról - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed -    *****    LORDE * ISMERD MEG TE IS A ROYALS ÉNEKESNÕJÉT * LORDE * ISMERD MEG TE IS * LORDE * ISMERD MEG TE IS A ROYALS ÉNEKESNÕJÉT