#22 Kod na cień za tekstem/bloczkami

Hej, jeśli pamiętacie czasy poszkole, to zapewne pamiętacie jak był cały ten szał na cień za tekstem lub cień wokół bloczku. Jeśli są wśród Was osoby, którym nigdy nie minęła na nie faza lub po prostu chcielibyście upiększyć swoją stronkę jeszcze bardziej to podrzucam wam dzisiaj te dwa kody, które możecie dowolnie miksować z innymi, które już znajdują się na tym blogu :)

Kod na cień za tekstem, przed którego nawiasem musi się znaleźć część na którą ma on zadziałać
{text-shadow: 0px 0px 2px #ff0000;}
Pogrubiłam miejsce, w którym umieszczacie swój kolor. Co do tej części, na którą ma zadziałać kod na cień za tekstem to tutaj macie przykład:
header{text-shadow: 0px 0px 2px #ff0000;}

Kolejny kod to cień za bloczkami/sekcją z bloczkami
{box-shadow: 0px 0px 5px #ff0000;}
Tak samo jak wyżej musi się znaleźć nazwa części, na którą ten kod ma zadziałać, przykładowo:
section {box-shadow: 0px 0px 5px #ff0000;}

Tym razem nie zdradzam wam, które liczby odpowiadają za co i zachęcam do eksperymentowania ;p Co do części, na które możecie zadziałać tym kodem - jest ich cała masa na blogu, w zasadzie znajdziecie je w każdej notce, więc polecam poszperać ;p

No i jak zawsze: jeśli macie jakieś pytania, sugestie, problemy to piszcie na mój profil - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#21 Usunięcie avatarów

Hej, dzisiaj przychodzę do was z dość krótką notką, ponieważ nie jest to jakieś skomplikowane, więc i rozpisywać się nie trzeba.

Tym kodem usuniecie avatar w samej ścianie:

.av{display:none;}

Kolejny kodzik to usunięcie avatara z bloczku "o mnie", możecie też to zrobić bez tego kodu, po prostu edytując ten bloczek ;)

.avatar{display:none;}

Ostatni kod to połączenie dwóch powyższych

.av, .avatar{display:none;}

Tak jak zawsze zachęcam was do zadawania pytań, jeśli potrzebujecie pomocy i sugerowanie mi co powinno pojawiać się na tym blogu, po prostu czasem brak weny na kody, no i fajnie byłoby tworzyć coś z czego z chęcią skorzystacie ;p Tak więc odsyłam was na mój profil - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#20 - zmiana koloru czcionki w ścianie i nie tylko

Cześć i czołem,
Mam ostatnio małe, całkiem malutkie, urwanie głowy. Jednak staram się Was nie zaniedbywać. Dziś kod na zmianę koloru czcionki w ściance i nie tylko ;)

Wstawiam wam dwa sposoby, ze względu na to jak zbudowana jest strona ;p
Pierwszym jest zmiana koloru tekstu w obrębie samego bloczku.

#block2{color:#ffffff} #block2 a{color:#0f0f0f !important}

Na niebiesko zaznaczyłam to co dotyczy zwykłego tekstu, więc treści wiadomości,  na zielono zaznaczyłam część dotyczącą linków. Na czerwono macie zaznaczone kolorki. Ten kod jest przydatny wtedy gdy chcecie wprowadzić dwa kolory - osobno do linków i osobno do treści wiadomości

Można też te opcje zbić w jedno jeśli chcecie mieć taki sam kolor linków i treści wiadomości co zrobicie poniższym kodem.

#block2,#block2 a{color:#ffffff!important}

Drugim sposobem jest zmiana koloru tekstu w obrębie całej sekcji ze wszystkimi bloczkami (kolor tekstu i linków zmienia się we wszystkich bloczkach). 

section{color:#ffffff} section a{color:#0f0f0f !important}

Tak jak powyżej, niebieskim kolorem zaznaczyłam to co dotyczy zwykłego tekstu, na zielono zaznaczona jest część dotycząca linków, ten kod pozwala wam na rozdzielenie tekstu i linków na dwa kolory. 

Oczywiście powyższy kod można zbić w jedno, by mieć cały tekścik we wszystkich bloczkach w jednym kolorze ;) 

section, section a{color:#ffffff !important}

Zdradzę wam mały sekret, można na całej stronie zrobić taki sam kolor tekstu i taki sam kolor linków zamykając się w jednym, krótkim kodzie :)

body, body a{color:#ffffff !important}

Analogicznie jeśli chcecie mieć wszystkie linki na stronie w jednym kolorze a tekst w drugim to sprawdzi się ten kod

body{color:#ffffff} body a{color:#0f0f0f !important}

To tyle na dziś ;p Chyba nie muszę wam przypominać, że na blogu znajdują się kody i ich fragmenty, które możecie zmieniać w taki sposób jaki chcecie, jeśli natomiast tego nie wiecie to ja was tylko tak "przypadkiem" odeślę do postu, w którym nasz kochany Anon wrzucił jakiś czas temu, gdzie znajdziecie np. to jak zmienić rodzaj czcionki ;p  Post #12

W razie jakichś pytań/propozycji/czegokolwiek piszcie na mój profil - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#19 - Półprzezroczyste bloczki

Hej, dzisiaj przychodzę do was z kolejnym kodem, który zaliczam chyba do podstaw, jeśli chodzi o tworzenie wyglądu swojej strony. Dzisiaj zajmiemy się bloczkami ;)

Na początek chciałabym wam ponownie podrzucić linka do stronki, którą umieściłam też w poprzedniej notce, bo może być to pomocne jeśli oprócz zmiany koloru zażyczycie sobie przezroczyste bloczki.
https://html-color-codes.info/convert-color-format/#

Zacznijmy od tego, że można to zrobić w dwa sposoby.
Na stronie można wyróżnić tło bloczków oraz section (tło pod bloczkami)

By uzyskać przezroczystość samych bloczków z transparentną section należy użyć tego kodu:

.block{background-color:rgba(255, 255, 255, 0.5);}section{background-color: transparent}

Na czerwono wyróżniłam zmienne, ponieważ tutaj kolor, którego chcemy użyć na stronie ma inny zapis, określany jako rgba, pierwsze trzy liczby, które znajdziemy w nawiasie odpowiadają za kolor. Wraz ze stroną, którą wam podesłałam, możecie łatwo przetransferować kolor z hexa (np. #ffffff) na zapis rgb, by umieścić wymarzony kolor w waszym kodzie. Ostatnia wartość 0.5 odpowiada za stopień przezroczystości tła - mogą to być wartości od 0 do 1.

Dla powyższego kodu otrzymujemy taki efekt:

Tak jak wspominałam wyżej można również rozróżnić tło pod bloczkami, zmienimy pod nimi przezroczystość poniższym kodem:

.block{background-color: transparent}section{background-color: rgba(255, 255, 255, 0.3)}

Ponownie zaznaczyłam zmienne, które możecie dowolnie modyfikować :) Efekt przedstawia się następująco:

Jeśli natomiast chcecie uzyskać całkowicie przezroczyste bloczki to podrzucam wam kodzik:

section{background-color: transparent}

Przydałoby się teraz usunąć te wszystkie ramki prawda? :P Kod na usunięcie obramowań w bloczkach znajdziecie w notce #2  i notce #11 na tym blogu, gdzie znajdziecie kody na edycję obramowań w bloczkach. Wystarczy zmienić ich rozmiar na 0. Pozostają jeszcze dwie rameczki, które też usuniemy :d Dla leniuszków stworzyłam kodzik usuwający równocześnie obramowania w bloczkach, obramowanie pod menu i obramowanie stopki. :)

.block,.h,header,footer{border:0;}

Na dzisiaj to tyle ;) Jeśli chcecie mieć półprzezroczyste menu to wykorzystajcie ten sposób z kolorem z tej notki i kombinujcie z kodami umieszczonymi tutaj w notce #5

Jeśli macie jakieś sugestie co do tego jakie rzeczy powinny się znajdować tutaj na blogu, co chcielibyście zmienić na swojej stronie to piszcie do mnie na moje konto - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#18 - Rozszerzenie kodów do edycji tła

Hej, dołączyłam do tego bloga, by pomóc w udoskonalaniu strony, na której każdy z nas może się wyżyć w mniej lub bardziej kreatywny sposób. 

Jako pierwszy post chciałabym wam wrzucić rozszerzenie pierwszego posta dotyczącego edycji tła na stronie, ze względu na to, że każdy ma inny sposób na swoją stronę. :) 

Jeśli ktoś z was nie wie, o którym poście mówię to tutaj wam go wstawiam https://kreatywnime.blogspot.com/2018/10/1-poczatek-kody-na-to-profilu.html

Zacznijmy od powtarzania tła. Bazując na kodzie dodanym przez administratora możemy go zmodyfikować tak by stworzyć najbardziej nam odpowiadające tło strony. 

Istnieje kilka możliwości powtarzania tła 

repeat-x - tło jest powtarzane wzdłuż osi x (wszerz strony)

repeat-y - tło jest powtarzane wzdłuż osi y (wzdłuż wysokości strony)

no-repeat - tło nie jest powtarzane

Dla przykładu zamieszczam wam zdjęcie obrazujące jak wygląda powtarzanie wzdłuż osi x

Kod dla takiego wyglądu tła : 

body{background-image:url(link do obrazka);

background-attachment:fixed; background-position: bottom left;background-repeat: repeat-x;}

Oprócz tego w powyższym kodzie wyróżniłam też na zielono kolejną część rozszerzenia kodu - pozycjonowanie tła. Wyróżniamy: 

top left - lewy górny róg

top right - prawy górny róg

bottom left - lewy dolny róg

bottom right - prawy dolny róg

W ten sposób możecie pozycjonować swoje tło, ustawiać jego powtarzalność, dodatkowo łącząc z kodem na kolor tła, który znajdziecie w pierwszym poście tego bloga (podlinkowałam go wam wyżej) możecie uzyskać efekt jak poniżej: 

Do wybierania kolorów ja sama korzystałam ze stronki : https://html-color-codes.info/colors-from-image/

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#17 - Brak "dodaj komentarz" w ścianie (only enter)

To już ostatni post na dziś. We wtorek na pewno żadnego nie dodam, chyba, że ktoś przejmie pałeczkę. Pozdrawiam!

#wall>form>.submit{display:none;}

#msg{width:573px;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#16 - Usunięcie stopki

Bonusowy kod na dziś nr 1:

footer{display:none;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#15 - Menu bez loga

#logo{display:none;}

#menu{width:1200px;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#14 - Usunięcie krzyżyka w ścianie

Prosty kodzik (notka za 15.11).

#delete{display:none;}

NIE MAM JUŻ POMYSŁÓW. :(

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#13 - Usunięcie czasu komentarza

Prosty kodzik (notka za 13.11).

.time-comment{display:none;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#12 - Zmiana koloru, wielkości i czcionki w 'wyślij wiadomość'

Cześć, tak wiem, tym razem to przesadzam z niedostępnością #gg. Aczkolwiek miałem taki okres. Zaraz znowu mnie nie będzie, bo szpital czeka, także dostaniecie pewnie następne notki w weekend. Ale jak zwykle dodam bonusowe, w zamian za czekanko.

Także ten:

Oto kodzik na zmianę koloru "wyślij wiadomość". 

#block1 a{color:kolor!important;}

Ten na wielkość czcionki:

#block1 a{font-size:__px}

A ten na jej 'rodzinę':

#block1 a{font-family:rodzina;}

Przykładowe rodziny: Times New Roman, Trebuchet MS, Courier New, Georgia

Uwagi:

1. Wyślij wiadomość znajduje się w bloku nr 1 (wystarczy zmienić nr bloku).

2. To jedyny link w bloku nr 1. Jeśli nie, inne też się zmienią.

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#11 - Nagłówki

Tym razem notka na czas!

Podkreślenie (obramowanie dolne):

.h{border-bottom:0;} - brak

.h{border-bottom:1px solid black} - do samodzielnej edycji

Zmiana czcionki:

.h{font-size:14px;} - wielkość czcionki

.h{font-family:courier new;} - rodzina czcionki

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#10 - Edycja pola tekstowego ściany

Ostatni post na dziś, oby do czwartku!

Obramowanie:

#msg{border:1px solid red;}

Kolor tła:

#msg{background-color:green;}

Kolor tekstu:

#msg{color:yellow;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#9 - Zmiana koloru przycisków

Zmiana koloru tła:

.submit{background-color:kolor;}

Zmiana koloru fonta:

.submit{color:kolor;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#8 - Wizytówka non-premium

Cze! Za to, że mnie tyle nie było dam też troszkę większy kod. Zanim jednak przystąpicie do prac dodajcie na początku kody z postu #2 i #3.

header,section,footer,#menu{width:600px;margin:0 auto;float:none;}

header,#menu{height:30px;}

#logo{display:none;}

#menu a{font-size:12px;padding:8px;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#7 - Obramowanie avatarów

Obramowanie twojego avatara:

.avatar{1px solid black;}

Obramowanie avatarów w ścianie:

.av{1px solid black;}

Ustawienia:

- grubość obramowania

- rodzaj obramowania: solid, dotted, dashed i inne

- kolor obramowania

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#6 - Tło bloczków

Wybaczcie, że tyle mnie nie było. W zamian dzisiaj dodam aż 5 kodów na bloga. No i postaram się zachować stary system - 3 notki w tygodniu (wt/czw/sb).

.block{background-color:tutaj_kolor;}

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}