Skocz do zawartości

[Dodatki] Okienko z użyciem pozycji "fixed"


Akaexus

Rekomendowane odpowiedzi

Witam!
Pewnie nie jednej osobie (z możliwością edycji swojego profilu) przydałoby się do czegoś w profilu wiadomość, która rzuca się w oczy i którą chcielibyście, aby przeczytał ktoś kto wejdzie na wasz profil... W takim razie trzeba takowy obiekt stworzyć, a jako iż wiele osób nie ma do czynienia w żaden inny sposób z HTML'em, CSS'em czy innymi cudami poza forum, dam wam gotowy.

Kod CSS:

#przyklejonamsg {background: rgba(0, 0, 0, 1); /* Kolor tłaokienka" */border-radius: 10px; /* Zaokrąglenie kątów */bottom: 10px; /* Odległość 10px, od dolnej krawędzi, można ją powiększyć, wtedy okienko będzie wyżej, lub zmienićbottom" natop", wtedy przejdzie do odległości od górnej krawędzi */right: 10px; /* Odległość 10px, od prawej krawędzi, można ją powiększyć, wtedy okienko będzie wysunięte w lewą stronę, lub zmienićright" naleft", wtedy przejdzie do odległości od lewej krawędzi */color: #FFFFFF; /* Kolor czcionki na okienku */height: 80px; /* Połączone z info niżj */width: 200px; /* Rozmiar okienka, aktualnie jest to 200px(szerokość) na 80px(wysokość), można dowolnie zmieniać, gdy np. mamy za dużo tekstu i się on nie mieści, wtedy powiększam */opacity: 0.5; /* Prze????roczystość całego obiektu, czcionki, tła, obramowania. 0.5 wynosi 50% */padding: 5px; /* Odległość tekstu od boków samego okienka */position: fixed; /* Opcja, która umożliwia to, że okienko pozostaje w tym samym miejscu (jest tak jakby przyklejone do naszego ekranu xD) */text-align: left; /* Tekst pisany od lewej, można zmienićleft" nacenter" lubright". */text-shadow: 1px 1px 3px #000000; /* Cień tekstu */z-index: 69; /*Pozycja obiektu". Hmm, jakby to wytłumaczyć... Zapewne znacie co to jest układ współrzędnych (oś X, oś Y), to Z jest to dodatkowa oś, która pozycjonuje tekst w górę lub w głąb. Pozwala to na to, iż okienko jest ponad resztą obiektów na stronie, nie nachodźą na nie, żeadne inne obiekty, czy teksty */border: 3px ridge #CFCFCF; /* Ramka okienka */-o-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0; /* Powoduje przejście z np. 50% prze????roczystości do 100% widocznego obiektu w określonym czasie, a nie natychmiastowo, oraz w określonym schemacie (obecny to z początku szybko i na koniec zwalnia) */-moz-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-webkit-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;}#przyklejonamsg:hover { /* To nasze okienko, gdy najedziemy na nie myszką, tu jest tylko zmienione opacity na 100% widoczności */opacity: 1;-o-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-moz-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-webkit-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;}

Kod HTML:


<div id='przyklejonamsg'><center>To tylko <b>przykład</b> naszego <u>okienka</u>.</center></div>

Można pisać według własnego uznania, podałem przykład, ale podstawą jest:

<div id='przyklejonamsg'>Tu piszemy.</div>




Oczywiście kod CSS wklejamy między
<style type="text/css">Gdzieś w tym miejscu.</style>

A kod HTML, poza, gdzieś w pustym miejscu.




Gotowiec, do wklejenia/przerobienia/przetestowania:
<style type="text/css">#przyklejonamsg {background: rgba(0, 0, 0, 1);border-radius: 10px;bottom: 10px;right: 10px;color: #FFFFFF;height: 80px;width: 200px;opacity: 0.5;padding: 5px;position: fixed;text-align: left;text-shadow: 1px 1px 3px #000000;z-index: 69;border: 3px ridge #CFCFCF;-o-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-moz-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-webkit-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;}#przyklejonamsg:hover {opacity: 1;-o-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-moz-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;-webkit-transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;transition: all 0.5s cubic-bezier(0.2, 0.7, 1, 1) 0;}</style><div id='przyklejonamsg'><center>To tylko <b>przykład</b> naszego <u>okienka</u>.</center></div>

EDIT:
Tak wygląda gotowiec:
rtgvhyjhj.png

 

//By Crason.

 

Post autorstwa skopiowany ze starego forum.

  • Like 1
Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...