niedziela, 14 lutego 2016

#2 Pomysł na ferie..? + Instrukcja.

Spóźnione, ale zapraszam! 
Nie bić! Przemoc do niczego nie prowadzi..nawet używanie chloroformu na swoje ofiary. (Nie pytajcie czemu o tym pomyślałam, haha) Nie wiedziałam że ta notka zajmie mi tyle czasu.. Chciałam by ta notka wyglądała jak najbardziej zrozumiale. Ostatnio zauważyłam że niektóre dobre graficzki niszczą swoją grafikę tym że mają małe zasoby wiedzy na temat kodów i selektorów. A że leniwce z wielkim talentem istnieją wśród nas, so pomyślałam że pomogę wam byście weszły na level up i nie bały się szukać kodów, bo są one proste, tylko trzeba wam to bardzo dobrze wytłumaczyć. (czyt. niczym nauczyciel 5 letniej dziewczynce która nie umie wiązać buty) Mam nadzieję że dziś mi się to uda.
(Na końcu notki są kolejne 2 wersje profili) A więc dzisiejsza notka będzie gruba, dlatego polecam znaleźć wygodne miejsce, przynieść ciepły kubek z herbatą - lub jak u mnie termos z kawą i znaleźć dobrą parę okularów do czytania i kodowania bo opiszę wam..




- kolumny bez tajemnic 1 -

Otóż dziś przedstawię wam moje patrzenie na nasze niby mało groźne kolumny. Pokażę je wam w częściach, które opiszę byście mieli wszystko jaśniutkie jak moje dzisiejsze słońce za oknem za którym bardzo tęskniłam. Oczywiście podam też selektory których ja najczęściej używam. A w następnej notce (za 4 dni) pojawią się trzy przykłady na kolumny, które będą opisane. Tak więc, zapraszam!

Same kolumny Są to prostokąty, które łączą wszystkie widgety w kolumnie, tłem, be żadnych odstępów między widgetami. Nazywam je inaczej tłami dla widgetów lub dodatkowymi miejscami na popis kodowy. Wyróżniam trzy typy takich SAMYCH KOLUMN. Są nimi: Kolumny z jednolitym tłem; Kolumny z tłem obrazkowym (tutaj zazwyczaj pojawia się dodatkowe tło na widgety); Kolumny z tłem przeźroczystym oraz z tłem ombre (tło przeźroczyste zazwyczaj używa się przy użytym patternie w body.
Najczęściej używane przeze mnie selektory do SAMYCH KOLUMN to:
(nie wchodźcie w CSS i HTML)
See the Pen Selector Blogger by AlatumLuna (@alatumluna) on CodePen.
Oczywiście na prawą stronę działają tak samo tylko zmienia się słowo z 'left' na 'right'. Jest ich mało, ale jeśli pododajemy mniejsze kody to zobaczycie że trochę się może tego nazbierać, a przy okazji dać bardzo fajny efekt. (Ale efekty w następnej notce) Z pewnością zastanawiacie się dlaczego nie dodałam .column-left-outer. Jest on dla mnie nie zbyt sprecyzowanym kodem, który dość często sprawiał mi kłopoty, dlatego w moim słowniku go n i m a.
Widgety - Jest to każdy pojedynczy element w kolumnach- by było prościej- są to na przykład: TEKST; ARCHIWUM BLOGA; STATYSTYKI; MENU.. itp. Selektory do każdego z osobna widgetu znajdziecie na tajemniczym ogrodzie |tu| a osobno  wszystkie selektory do jednego widgetu do modyfikacji go pojawią się w następnych notkach. Nie chcę was zanudzić jak na pierwszy raz, haha. Ale wracając do tematu, są też SELEKTORY KOLUMNOWE DO WIDGETÓW, są nimi:
(nie wchodźcie w CSS i HTML)
See the Pen Selector Blogger -02- by AlatumLuna (@alatumluna) on CodePen.
Te dwa pierwsze selektory należące do SAMYCH KOLUMN już znacie teraz poznaliście kolejne dwa. Nie są jakieś trudne do zrozumienia chyba nie?    
Nagłówki Widgetów -Jak logika na podpowiada -no chyba że ktoś myśli o czymś innym, to polecam się zbadać na zdałnienie rozsiane..pha! *ktoś śmiechnął w tyle* lub to ja jestem chora, haha- jest to nazwa każdego pojedynczego widgetu. Na szczęście -lub czasem też i nie- w tej części poznacie tylko jeden selektory, który uratuje -niektórym- tyłki przed pisaniem h2 każdego widgetu z osobna by połączyć je jedną klamrą i listą przecinków.
(nie wchodźcie w CSS i HTML)
See the Pen Selector Blogger -03- by AlatumLuna (@alatumluna) on CodePen.


Cóż nie taki diabeł zły jakby się wydawał.. Selektory podane, wszystko wyjaśnione.. więc na dziś chyba to tyle. Aa. Jeszcze trzy wersje na autora. Pamiętajcie by wszystko ładnie za kredytować bo po łebkach oberwiecie *perwersyjna Luna on* haha, serio powinnam się leczyć. Oraz wyraźcie swoją opinię czy przydatne czy też nie.. Serio lubię czytać wasze dziwne komentarze.

-Wersja 1-
See the Pen Profile -03- by AlatumLuna (@alatumluna) on CodePen.


-Wersja 2-

See the Pen Profile -04- by AlatumLuna (@alatumluna) on CodePen.




9 komentarzy:

  1. Heyyy jaki fajny efekt z tymi skosami w autorze :D mogłabyś mi wskazać, który to dokładnie kod, bo jakoś nie mogę go odnaleźć xD

    OdpowiedzUsuń
    Odpowiedzi
    1. Jasne jest to ten kod :D

      .cover:before {
      position: absolute;
      content: '';
      top: 0px;
      right:0px;
      border-style: solid;
      border-width: 51px 0 0 125px;
      border-color: #eee transparent transparent transparent;
      z-index:1000;}

      Usuń
  2. Mnie też się właśnie podoba ten efekt co użytkownikowi wyżej.

    OdpowiedzUsuń
  3. O jejku *o* ale wspaniała notka! Kody są po prostu genialne *o* Na pewno skorzystam z nich kiedyś <3 Jak coś, to na pewno dam Ci znać :)
    Pozdrawiam serdecznie i czekam na kolejne ciekawe kody!
    Forain ♥

    OdpowiedzUsuń
  4. Hahahhah dziękuję za tą reklamę XDDD Nawet sygnaturki nie dodałaś :P Kc <33333 Wgl świetne kody i na pewno się przydadzą ! Chyba też jestem niedouczona bo przyznam bez bicia, że na śmierć zapomniałam o istnieniu selektora #sidebar ..(cośtam).. XDDDDD ale o nim wiedziałam .... kiedyś XDDDDDD Pozdrawiam cieplutko !!!!!

    OdpowiedzUsuń
    Odpowiedzi
    1. Haha, widzisz, od tego jestem ja, taki twój przypominacz :D

      Usuń
  5. Nie znałam kody na tytuły :D używałam ogólnie h2 i było to trochę ograniczające, więc bardzo dziękuję i teraz na pewno będę go używać!

    S. xx

    OdpowiedzUsuń

Graphic Luna
Dawniej graphic-catchers-illusion
Blog wraca już za niedługo!