#48 - Wyśrodkowane nagłówki bloków

Hej, dziś przychodzę do was z szybkim kodem, czasem ciężko mi jest wymyślić coś nowego, zwłaszcza jak zdecydowałam się, że jednak notki z szablonamy będą się pojawiać co 5 postów. Proszę was o sugestie co do treści, które powinnam zamieszczać na blogu, to bardzo ważne!

.h{text-align: center;}

A wygląda to mniej więcej tak: 

Jeśli mielibyście jakieś pytania/sugestie co do tego co powinno się pojawiać na blogu to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#47 - Gradientowe tło

Hejka, jak tam pierwszy miesiąc nowego roku? Szybko wam przeleciał przez palce czy może dłużył wam się w nieskończoność?
Jeśli mam być szczera mój zleciał tak szybko, że dopiero od lutego wprowadzam nowe postanowienia do mojego życia xd
Dziś przychodzę do was z nowym kodem na tło. Mianowicie na gradientowe tło. Możecie je zastosować do bloczków, całej sekcji pod bloczkami lub do tła na stronie.

#block1 - bloczek lewa strona
#block2 - bloczek prawa strona
section - sekcja pod bloczkami
body - tło na stronie

oto kod w wypadku gdy chcemy, by tło strony było gradientowe:

body{background-image: linear-gradient( #kolor1, #kolor2);}

W tym wypadku gradient będzie od góry do dołu, w przypadku gdy chcecie by gradient szedł od lewej do prawej w nawiasie umieszczacie : to right. 

body{background-image: linear-gradient (to right, #kolor1, #kolor2);}

Jeśli mielibyście jakieś pytania/sugestie co do tego co powinno się pojawiać na blogu to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#46 - Odstępy między wersami

Hej, dziś szybki i krótki kodzik, który pewnie część z was kojarzy z czasów poszkole.

.div{line-height:8px;}

Wielkość 8 pikseli możecie dowolnie modyfikować oraz odnosić do wybranych przez siebie części strony :)


Jeśli mielibyście jakieś pytania/sugestie co do tego co powinno się pojawiać na blogu to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#45 - Szablon 'Stokrotka'

Cześć, dziś przychodzę do was z szablonem (pewnie czekaliście na to xd)

Wygląda on tak: 

Do lewego bloczku wklejacie:

[img]link do obrazka1[/img][c][div]wasz tekst1[/div][/c][p]wasz tekst 2[/p][c][msg][/c]

[style]#block1 img{border-radius: 40% 0% 40% 0% ; border-bottom: solid 5px #FCA464;width:245} #block1{width:245px;background-color:#E5E6EB;border-radius:40% 0% 0% 0%;border:0px;margin-left:220px;} #block1 div{margin:10px;font-family: times new roman; font-size:15px; color:#32444E;}#block1 p{width:225px; margin:10px;font-family:courier new;font-size:10px;color:#7C8499;text-transform:uppercase; text-align:justify;letter-spacing:2px;font-style:italic;}#block1 a{font-family:times nwe roman;font-size:10px;color:#32444E!important;}#menu,#logo,footer{display:none;}[/style]

Do prawego bloczku wklejacie:
[p]wasz tekst3[/p][style]header,footer,section{border: none;background-color:transparent;}#block2{width:400px;background-color:#E5E6EB;border-top:none;border-bottom:none;margin-left:10px;border-right:50px solid transparent;border-left:50px solid transparent; border-image: url(link do obrazka2) 150 round;}#block2 p{width:350px;padding:90px 30px 70px 30px;font-family: times new roman; font-size:10px;color:#768195;letter-spacing:2px;text-align:justify;}[/style]
Kolor 1 - czerwony (ramka pod obrazkiem nad imieniem i nazwiskiem postaci)
Kolor 2 - niebieski (tła w bloczkach)
Kolor 3 - pomarańczowy (wasz tekst1/imię i nazwisko postaci)
Kolor 4 -zielony (wasz tekst2/wasz tekst3)


Jeśli mielibyście jakieś pytania/sugestie co do tego co powinno się pojawiać na blogu to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#44 - obrazek jako ramka

Hej, dziś przychodzę do was z małym przedsmakiem następnego posta - obrazek jako ramka np. div/bloczku.

.div{border-image: url(link do obrazka) 150 round;}

Zamiast div'a możecie np. wstawić #block1/#block2 - cokolwiek wam się zapragnie. Oczywiście oprócz powyższego kodu musicie też ustawić sobie grubość ramek, ich styl itp. Tutaj odsyłam was do poprzednich postów, ponieważ było już ich wiele na ten temat ;)

Tą wielkość przed round (zaznaczyłam ją na czerwono, żebyście nie przegapili) dowolnie modyfikujecie, tak by obrazek wstawiony w ramkę wyglądał tak jak chcecie ;) 

Jeśli mielibyście jakieś pytania/sugestie co do tego co powinno się pojawiać na blogu to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#43 - Efekty czcionki w bloczkach

Hej, jak tam u was? Podekscytowani na wieści od Admina w sprawie rozwijania portalu? ;)
Ja mocno trzymam kciuki za Anona, żeby mu się udało :)

Dziś przychodzę do was z efektami czcionki, których możecie użyć przy edycji bloczków.

Zaczniemy od kodów na text-decoration

.div{text-decoration: overline;}

Są trzy rodzaje 'dekoracji' tekstu:
overline - nad waszym tekstem będzie się znajdować linia
line-through - linia będzie przebiegać przez wasz tekst
underline - podkreślenie waszego tekstu

Teraz przejdziemy do text-transformation

.div{text-transformation: uppercase;}

Tak samo jak powyżej są trzy rodzaje 'transformacji' tekstu:
uppercase - nawet jeśli nie będziecie mieć napisanego wszystkiego capslockiem, sprawi to że cały tekst będzie napisany dużymi literami
lowercase - przeciwieństwo uppercase, cały tekst będzie napisany małymi literami
capitalize - każda pierwsza litera każdego wyrazu będzie napisana z dużej litery

Na dziś to wszystko, mam nadzieję że oprócz kopiowania szablonów, kiedyś zechcecie sami kombinować z kodami ;)

Jeśli mielibyście jakieś pytania/sugestie co do tego co powinno się pojawiać na blogu to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#42 - Różne teksty

Cześć, jak wam życie mija? Mam nadzieję, że dość dobrze, ja natomiast podrzucam wam dzisiaj krótki kod, a raczej wyjaśnia wam pewną rzecz ;p
Podoba wam się efekt jak każda sekcja tekstu ma inny styl?
Coś w ten deseń?

Możecie taki efekt uzyskać dowolnie stylizując każdą z sekcji tekstu. W wariancie non premium macie 3 opcje, w zasadzie 4 jeśli byście chcieli kombinować.

Przykładowo do powyższego efektu użyłam poniższego kodu:

[div][c][br]Roslyn[br][/c][br][span][c]broken angel with golden heart and great mind[/span][/c][br][p]Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.[/p][/div]
[style].div{font-family: times new roman; font-style: 13px black; width:350px; font-weight:bold;}.span{font-family:times new roman; font-style: 10px black; width 300px; font-weight:normal;}.p{font-family:courier; font-style: 3px #ff0000;text-align:justify;font-weight:normal;}[/style]

Każdym kolorem zaznaczyłam sekcję, mam nadzieję, że widzicie pewne prawidłowości i złożycie sobie całość z puzlami z poprzednich postów ;)


W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#41 - obramowanie wewnątrz obrazka

Cześć,
Dziś przychodzę do was z kodem, który używałam już ostatnio w szablonie. Mam na myśli obramowanie wewnątrz obrazka, jeśli jeszcze nie wiecie o co mi chodzi to może po prostu podrzucę wam poniżej screenshota.

[img]link do obrazka[/img]
[style].img {outline-offset: -10px; outline: solid 1px #ffffff;}[/style]

Oczywiście możecie zmienić odległość od krawędzi obrazka, szerokość ramki i kolor. Poniżej podpisuję wam co w tym kodzie odpowiada za co ;)

kolor czerwony -  odległość wewnątrz od krawędzi obrazka
kolor pomarańczowy - styl ramki
kolor zielony - grubość ramki
kolor niebieski - kolor ramki

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#40- Szablon dziewczęcy

Hej, dziś przychodzę do Was z szablonem, który mogłabym powiedzieć, że został stworzony z myślą o dziewczynach xd Jednak jeśli pozmieniacie kolory, to możecie sobie dopasować wygląd stronki ;)

Blok po lewej stronie:

[avatar][br][br][c][b]Imię i nazwisko postaci[/b][br][br][span][i]Krótki tekst[br][/i][br][br][msg][/c]
[/span][style]#block1{width: 300px;background-color:#E1DBE9;margin-left:220px;margin-top:50px;padding:20px;outline-style:solid;outline-color:#E1DBE9;outline-width:3px;outline-offset:10px;font-family:times new roman;color:#7A1B47!important;font-size:15px}.avatar{margin-left:80px;border-radius:100px;border:3px solid #ffffff;}.span,.msg a{font-family:times new roman;font-size:12px;} #block1 a{font-size: 11px; color:#7a1b47!important;}#logo{display:none;}#menu{width:600px;margin-left:250px;} #menu,#menu a{font-family: times new roman;font-size: 12px;font-style:italic; padding: 5px;background-color:transparent;color:#C78FB4} #menu a:hover{letter-spacing: 2px;font-weight:bold;text-shadow: 0px 0px 3px #E1DBE9;}[/style]

Blok po prawej stronie:

[style] section,#block1,#block2,header,footer{border:0px;}footer{display:none}body{background-color:#ffffff;} section{background:transparent}.div{background-color: rgba( 255, 255, 255, 0.8); width:170px;height:220px;margin:10px;color:#7A1B47; font-family: times new roman; font-size:12px; font-style:italic; letter-spacing:1px;padding:30px;}#block2{width:250px;height:200px;background-image:url(LINK DO TŁA W BLOKU NR 2);margin-left:50px;padding:10px;margin-top:60px;text-align:justify;}[/style]
[div]WASZ TEKST[/div]

KOLOR 1 
KOLOR 2 

KOLOR 3

W zasadzie możecie to dowolnie edytować, by uzyskać pożądany efekt ;) Następnym razem podrzucę coś bardziej w stylu starego poszkole, bo wiem że niektórzy bardzo lubią ten styl ;) 

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#39 - Margines zewnętrzny i wewnętrzny bloczków

Cześć i czołem, dziś przychodzę do was z kodem na margines wewnętrzny i zewnętrzny divów.

Zacznijmy może od zewnętrznego marginesu bloczków, dzięki któremu możecie przykładowo pozycjonować  bloczki na stronie.

.div{margin: 200px;}

Zamiast margin możecie wstawić:
margin-top - górny margines
margin-bottom - dolny margines
margin-right - prawy margines
margin-left - lewy margines

Dzięki temu modyfikując dowolnie wybrany przez was margines. Oczywiście wartość ta wyrażona jest w px.

Następnie przechodzimy do wewnętrznego marginesu, używając go możecie modyfikować w jakiej odległości od krawędzi znajdzie się tekst w waszym bloczku.

.div{padding: 30px;}

Zamiast padding możecie wstawić
padding-top
padding-bottom
padding-right
padding-left

Jeśli nadal nie wiecie do czego służy wewnętrzny margines to podrzucam wam zdjęcie z szablonu, który pojawi się na blogu za kilka dni ;p

Tekst pojawia się nie przy samej krawędzi bloczku, a w określonej odległości.

To tyle na dziś.
W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#38 - Menu pogrubiane

Hejka, dziś przychodzę do was z kolejnym kodem, który napisałam przy okazji robienia dla Was szablonu, który pojawi się tutaj w jednej z następnych notek ;)

#logo{display:none;}#menu{width:600px;margin-left:250px;} #menu,#menu a{font-family: times new roman;font-size: 12px;font-style:italic; padding: 5px;background-color:transparent;color:#000000} #menu a:hover{letter-spacing: 2px;font-weight:bold;text-shadow: 0px 0px 3px #000000;}


Wygląda to mniej więcej tak:

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#37 - Pozycjonowanie bloczków

Cześć i czołem.
Dziś pojawiam się, by pokazać wam jak to robię, że bloczki są w różnych pozycjach na stronie. Do pozycjonownia bloków wykorzystuję dwie ich własności.

margin-top - margines górny
margin-left - margines z lewej strony.

A linijka kodu, którą możecie na własny sposób modyfikować zamieszczam poniżej:

.div{margin-top: 200px; margin-left: 400px}

Obydwie wielkości wyrażane są w pikselach [px]

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#36 - Pozycjonowanie tekstu w bloku

Hej, dziś krótka notka, która wbrew wszystkiemu może się okazać bardzo pomocna ;p
Przejdźmy od razu do pozycjonowania tekstu w bloczkach (divach).

.div{text-align: justify;}

Powyższa linijka kodu sprawi, że wasz tekst będzie wyjustowany, 'justify' możecie wymieniać na kilka różnych opcji, które pod spodem wam zamieszczam:

justify - tekst jest wyjustowany
center - tekst jest wyśrodkowany
left - tekst jest wyrównany do lewej krawędzi bloku
right - tekst jest wyrównany do prawej strony bloczku.

To tyle na dziś ;)
W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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

#35 - Obramowanie w bloczkach

Hej, mam nadzieję, że nowy rok powita Was samymi dobrymi rzeczami, ja sylwestra spędzałam na spokojnie w związku z chorobą.
Jednak nie ma tego złego co by na dobre wyszło :D

Dziś zajmiemy się obramowaniem w bloczkach (divach), które sami możecie edytować w dowolny sposób.

.div{border-style: solid; border-width: 3px; border-color: #ff0000; border-radius: 15px;}

border-style - mówi o stylu obramowania: solid (klasyczna 'kreska'), dotted (kropkowana), dashed (kreskowana), double (podwójna, efekt widać dopiero przy szerokości ramki 3 lub 4 px);
border-width - mówi o szerokości obramowań bloczków, wielkość ta wyrażana jest w px.
border-color - mówi o kolorze jaki ma mieć to obramowanie;
border-radius - zaokrąglenie obramowania, tutaj kombinujcie z wielkością zaokrąglenia, by osiągnąć pożądany efekt.

Warto też wspomnieć, że możecie dowolnie miksować te style, możecie też sprawiać, że wasza ramka będzie występować tylko na dolnej części bloku lub z któregoś boku.

Występują orientacje obramowań:
border-top
border-left
border-bottom
border-right

Wtedy używacie takiej linijki kodu przykładowo:
.div{border-bottom: solid 2px #ffffff; }

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

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