-- 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 • CSSGrapics • Logo • Usefull Links • Interactive • Pattern

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.09.25. 20:37
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.

Elvihető CSS

2017.06.01. 17:50, Dienah
Címkék: css freebie

Vannak itt gondok emberek, szóval átdolgoztam az oldal jelenlegi CSS-ét (egy másik project keretein belül), ééééééééssss majdnem hányok az eredménytől. Utálom magam hogy ezt a tökéletes mintát nem tutdam tökéletes kinézetté varázsolni, de sajnálom nem könnyű. A végeredményt a képre kattintva tölthetitek le.

Gportal CSS Code, Ugly, but Responsive by Pometo

Interactive #01

2017.03.13. 19:32, Dienah
Címkék: interactive css

Szerintetek milyen a tökéletes blog design? Te leírod, én pedig megalkotom. Szavakat szeretnék kérni, hogy szerinted mik a legfontosabb tulajdonságai egy blogdesign-nek és én a visszajelzésekből megalkotom a kérdéses kódot, esetleg kódokat.

ÍRD LE KOMMENTBE!

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.
 

CSS: The Elegant Minimalist

2017.02.06. 17:08, Dienah
Címkék: freebie css blogtheme

Készítettem egy elvihető CSS kódot, és pofa nélkül nagyon büszke vagyok rá, összességében nem nagy szám, de számomra máris többet ér mint szinte bárkárki másé. Egó vagy nem, de ezzel a kóddal VÉGRE NORMÁLISAN TUDOK WEBLAPOT BÖNGÉSZNI TELEFONRÓL. Ahogy a gp-s oldalakat megnyúzzák a kis felbontású eszközök, attól leokádnám a kis mobilom.

Bemutatkozó:

  • Kőkemény 15db+CSS sorral és egy nagy marék blackmagic-al sikerült a kicsikét mobilbaráttá tennem. Ami már 2017-ben alap lehetne lassan.
  • Mivel mindenki rá van cuppanva ezekre a minimalista dolgokra, én semmi jónak elrontója nem vagyok.
  • Legalább nem tömegdesign (tapsnekem)


(a képek nem mobil képek, mert nem tudom hogy kell a kis szarosommal sreenshootolni, böngésző összehúzással szimuláltam hogy is néz ki a dolog egy mobilon)

 

Tippek && Trükkök, avagy Must Have

A kötelező pipálgatós: Vezérlőpult, Beállítások és ott pippantsatok be minden olyat négyzete amit nem tudtok hogy misoda. Itt van hozzá a kötelező olvasmány és a képes tutorial is.

Font Awesome: Ha nem akartok az aranyos kis ikonok helyére kis négyzetecskét akkor ajánlott beimportálni az ilyesmit, mondjuk ezzel, de rakhattok frissebbet is:

<link href="/portal/framework/upload/766182_1466169388_09997.css" rel="stylesheet" title="Font Awesome" />

Optimális Logó: Megint csak 4darab egész sor css kód, de definiáltam két divet/akármit/osztályt .logo.logo_mobil. Érdemes a szerkesztehő fejlécbe mindkét osztállyal ellátott logót csinálni, a mobilos mozogjon 400px körül a másik lehet sokkal nagyobb. Itt annyi a feketemágia hogy a mobilos logó kis felbontásban bújik elő, amúgy meg nem látszik, a sima pedig fordítva.

Optimális elrendezés: Mivel kis felbontásban csak így egymás alá túrja az oldalban található blokkokat érdemes jobb oldali elrendezést használni, mert így a mobilos felbontásban a középső modulok lesznek felül mindig. És megkíméled a látogatót attól hogy közel végtelenszer tekerjen végig ugyan azon, amikor esetleg sokat olvasna az oldalon.

LETÖLTENÉD?

Közreműködtek: gugli,Niki mester, és részben azok akiket másik kódjaimnál odacsaptam a forráslistámba.

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

 

 

 

 

 

 

 


Astropapa-iskolája mindenkit szeretettel vár és INGYENES TANÁCSOT AD minden kedves érdeklõdõnek!    *****    Supernatural - ODaát - 13. ÉVad - Extrák - Infók - ÉRdekességek - ODaát - Supernatural - 13.ÉVad - Supernatural - ODaát    *****    A csillagjövõ oldalon,nem csak alacsonyak az árak, hanem a tanácsadás, teljesen ingyenes. Szeretettel várlak minden nap    *****    Új design! Az egyetlen magyar Olicity és a legaktívabb Zöld Íjász rajongói oldala! 6. évad & Arrowverse hírek!    *****    No.1 Christina Aguilera Fan Site - Minden ami X-Tina, minden héten újdonságok! Katt!    *****    TelenovelasWeb - Hírek, képek, videók, saját véleménnyel tarkított bejegyzések telenovellákról és a színészekrõl! Gyere!    *****    Hamarosan olvashatók lesznek az oldalamon az Asztro-tükör asztrológiai írásai, cikkei.    *****    Gesztenye, gesztenye, gesztenye... és egy álmos sün! Gyertek az októberi rétre Mályvával és Pipitérrel! Irány a Mesetár!    *****    Születési,baba,hold horoszkóp,elõrejelzés,párkapcsolati elemzés,fogamzási képlet! Ingyenes tanácsadás!Várlak!Kattints!    *****    Ha te is a letisztult stílus híve vagy, nézz be hozzám! Smink, ruha, kritika //Style and Stuff// Style and Stuff//    *****    MINDEN HÓNAPBAN INGYENES G-PORTÁL SABLON! TELJESEN ÁTSZERKESZTHETÕ A LEGÚJABB KÓDOKKAL! Ne maradj le egyik hónapban sem!    *****    Rendeld meg az asztrológiai csomagok egyikét és teljesen ingyen megbeszélheted velem a kérdéseidet telefonon, skypeon!!!    *****    Nézz filmet messengeren! Ha szereted a filmeket klikk ide! Film!Film!Film!Film!Film!Film!Film!Film!Film!Film! Film!Film!    *****    Nézz filmet messengeren! Ha szereted a filmeket klikk ide! Film!Film!Film!Film!Film!Film!Film!Film!Film!Film!Film!Film!    *****    A CSILLAGJÖVÕ OLDALON RENDKÍVÜLI AKCIÓK,LEHETÕSÉGEK.A MEGRENDELÉSEK UTÁN TELJESEN INGYENES KONZULTÁCIÓ,TANÁCSADÁS.VÁRLAK    *****    Õszi manókalandok a réten! Búcsúztassátok el ti is útra kelõ madarainkat Mályvával és Pipitérrel! Gyertek a Mesetárba!    *****    | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale | Ashley Tisdale |    *****    Bûbájos boszorkák - Charmed - Extrák - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed - Charmed -Játékok    *****    Infrashape Horizontal fittness stúdió Debrecen    *****    WISE-VOGUE | SZISSZ ÉS KLAU BLOGJA TERMÉKTESZTEKKEL, TIPPEKKEL, ÖTLETEKKEL A MINDENNAPOKRA // WISE-VOGUE // WISE-VOGUE