Właściwość transform

Nie mam coś weny na instrukcje. Prezentacja ładnego efektu transform. Możemy nim sprawić, że dowolny element się obróci w dowolnej płaszczyźnie lub przesunie. Warto spojrzeć na układ współrzędnych. Kod wstawiamy w nawiasie klamrowym po dowolnym selektorze, of course, tu jest dodany po najechaniu myszką (:hover). Jeśli nie dodasz do niego transition: 5s (s = sekundy, oczywiście dowolna wartość) to element wykona swój ruch od razu i nie będzie można popatrzeć. Miłego myszkowania.

Gradienty

Gradienty to fajny efekt i w dodatku do zrobienia CSSem, a nie graficznie. Ja wolę właśnie kody, więc to dla mnie najprostszy sposób na ciekawsze tło. Do ich tworzenia używamy właściwości background-image:.

background-image: linear-gradient(ghostwhite, lightskyblue ) Zwykły gradient z domyślnymi ustawieniami kierunku i procentów

background-image: linear-gradient(ghostwhite 20%, lightskyblue 70%) Poprawiony procent dla obu kolorów

background-image: linear-gradient(to left, ghostwhite 20%, lightskyblue 70%) Zmieniony kolorek

background-image: repeating-linear-gradient(ghostwhite 10%, cyan 30%) Powtarzający się gradient w sytuacji, gdy procenty nie sięgają stu.

background-image: radial-gradient(ghostwhite , lightskyblue) Okrągły, ustawienia domyślne

background-image: radial-gradient(ghostwhite 20%, lightskyblue 60%) Znów, dodane procenty

background-image: radial-gradient(ellipse, ghostwhite 10%, lightskyblue 70%) Zmieniony na elipsę się trochę rozciągnął

background-image: radial-gradient(ellipse 60px 30px, ghostwhite 10%, lightskyblue 70%) Wielkość elipsy ustawiamy dwoma wartościami

background-image: radial-gradient(circle, ghostwhite 10%, lightskyblue 70%) Koło jest ładne proporcjonalne

background-image: radial-gradient(circle 50px, ghostwhite 10%, lightskyblue 70%) A wielkość koła jedną

Modyfikacja archiwum

Ostatnio szukałam sposobów na zmianę wyglądu archiwum w formie hierarchii. Nie znalazłam takiej instrukcji, więc kliknęłam zbadaj element i powpisywałam to, co zobaczyłam do arkusza css. Poznałam takie oto selektory:

• #BlogArchive1 ul.hierarchy a - każdy link w archiwum,
• #BlogArchive1 a.post-count-link - linki do roku, miesiąca, tygodnia,
• #BlogArchive1 ul.posts a - linki do konkretnych postów, gdyby więc wszystkie linki w archiwum miały być jedną czcionką, ale innych rozmiarów, to wiecie, co zrobić. 
• span.post-count - informacja, ile postów opublikowano w danym roku lub innym okresie w naszym archiwum,

Wszystkie te selektory dotyczą hierarchii. W przypadku listy potrzebne są takie:

• #BlogArchive1_ArchiveList - cała lista, np. do tła,
• #BlogArchive1_ArchiveList a - linki w liście, teoretycznie też da się tym zrobić tło, ale radzę wtedy dodać właściwość padding na przynajmniej kilka pixeli,
• #BlogArchive1_ArchiveList ul.flat li - punkty listy, jak chcesz ustawić punktor, to z tym właśnie działa,

Nie znalazłam selektora liczby postów. W przypadku menu potrzebny jest selektor: #BlogArchive1_ArchiveMenu i on wystarczy. Niezależnie od rodzaju archiwum jego tytuł to #BlogArchive1 h2. Nie widzę sensu dodawania tu gotowych kodów czy screenów efektów. 

Potrójne i odstające ramki

Taki śmieszny efekt na dziś :)

«Waść ma krzyż w herbie — wołał Podhajski — to skryta
Aluzyja, że w rodzie bywał neofita».
«Fałsz — przerwał Birbasz — Przecież ja z tatarskich hrabiów
Pochodzę, a mam krzyże nad herbem Korabiów».
«Poraj — krzyknął Mickiewicz — z mitrą w polu złotym,
Herb książęcy, Stryjkowski gęsto pisze o tym».
~Pan Tadeusz, Księga czwarta

U napierśnika wisi księżyc w kształt Leliwy,
To jest w kształt nowiu. Cały ten sprzęt osobliwy,
Zdobyty (jak wieść niesie) w boju podhajeckim
Na jakimś bardzo znacznym szlachcicu tureckim,
Przyjm, Asesorze, w dowód mojego szacunku».
~Pan Tadeusz, Księga jedenasta

Link w kółku z fajnym efektem

Witam was! Nadeszła pora na kolejną instrukcję! Otóż , ja to nazwałam link w kółku z fajnym efektem. Mamy do uzyskania taki efekt.

 

Wysuwani obserwatorzy

Cześć i czołem! Przychodzę do was z następną instrukcją. Wiele osób na czat box'ie pytało o wysuwanych obserwatorów.Wiem , że to było dawno, ale.. Więc o to jestem!  Jest to sposób na to , żeby zaoszczędzić trochę miejsca, ale tez to bardzo fajnie wygląda. Ładnie się prezentuje, a do tego jeszcze można dodać różne efekty i jest cudo! 

 Mamy do otrzymania taki efekt!

Tło z wielu obrazków

Chcesz mieć ramkę inną niż możliwe do zrobienia w CSS? Ze ściętymi narożnikami, a może ramkę podwójną i kropkowaną? Czy jeszcze coś innego? Ten post jest dla ciebie.

Możesz narysować sobie tło, ale wtedy należałoby uważać z rozmiarem elementu, który ma to tło. Jak się zbytnio powiększy nasze tło nieładnie się rozciągnie.

Zatem może by zrobić jeden obrazek jako środek, który by się dowolnie powielał i dwa inne, które zajęłyby końce? I na to właśnie mam kod.

Instrukcja na menu + ...no właśnie, czyli pierwsze koty za płoty!

           Hej! Mam na imię Lena i właśnie dołączyłam do załogi "Zatracone instrukcje". Jestem z tego mega dumna i mam nadzieję, że spełnię wasze oczekiwania. Jeśli czegoś byście nie zrozumieli pytajcie. Na pewno pomogę!

Grafiką interesują się od mniej więcej roku i postanowiłam spróbować na zatraconych..Może się uda! :D

           Dzisiaj przygotowałam dla was instrukcję na fajne menu, jak na zdjęciu poniżej.

Powitanie + akapity

Cześć! Nazywam się Sławomira i jestem tu nowa. Mam 17 lat, kodowania uczę się mniej więcej tak długo, jak istnieje Idąc przez las, czyli od maja 2015. Uwielbiam rysowanie, historię i Słowian oraz fascynuje mnie genetyka. Ale ad rem, przejdźmy do instrukcji.

Na blogach często czegoś brakuje. Akapitów mianowicie. Lubię czytać, gdy akapity są wcięte. Wtedy jest wygodniej.

Gdy już ktoś ma akapity na blogu… zrobione są spacjami. Też tak kiedyś robiłam, ale nie ma takiej potrzeby. Istnieje na to kod.

Do arkusza CSS dodaj:

.post-body {text-indent: 25px;}

[Menu] Menu obrazkowe

Sporo osób pytało mnie, jak zrobić menu obrazkowe. No cóż... Obiecałam opublikować taką instrukcję i oto i ona. Bardzo bym prosiła o skupienie i uważne czytanie. Nie jestem specem od tłumaczenia i zawsze robię to dość chaotycznie, ale postaram się jak najlepiej potrafię ;p

Instrukcja, którą zaprezentuję, będzie bazowała na obecnym głównym DAnayi. Sądzę, że nie powinno być większych problemów. Dla wszystkich tych, którzy chcą pogłębić wiedzę, polecam artykuł: Poradnik Webmastera

Od czego zaczniemy? Tradycyjnie od uruchomienia ramki HTML/JavaScript. A teraz to, co powinniśmy wkleić.

Swój własny, niepowtarzalny podpis

Dzisiaj przedstawię prosty sposób na swój własny podpis na szablonie. Jest to obecnie dość popularny zabieg. Wielu szabloniarzy umieszcza ten dodatek. Jest on bardzo praktyczny, a przy okazji nieco upiększa szablon (bynajmniej moim zdaniem).

[Pseudoklasa] Czyli każdy inny - #PageList1

Witajcie. Jest to kolejny post z instrukcją na ZI. Postaram się w miarę najprościej objaśnić, jak można bardzo łatwo i fajnie zmienić wygląd chociażby stron / menu.

Na początku zapraszam do lektury Useful :nth-child  - warto zapoznać się z tą lekturą.

Jak widzicie na obrazku powyżej, uzyskałam bardzo fajny efekt. Jest przy tym nieco pracy, ale warto :)

[Karty] Czyli jak zrobić fajny efekt

Od razu mówię, że korzystałam z instrukcji Tyler. Postaram się wytłumaczyć jak zrobić takie fajne kółeczka, które się obracają i gdy się najedzie cień się odsuwa.