Witaj szanowny Gościu na forum Odjechani.com.pl. Serdecznie zachęcamy do rejestracji. Tylko u nas tak przyjazna atmosfera. Kliknij tutaj, aby się zarejestrować i dołączyć do grona Odjechanych!

Strona odjechani.com.pl może przechowywać Twoje dane osobowe, które w niej zamieścisz po zarejestrowaniu konta. Odjechani.com.pl wykorzystuje również pliki cookies (ciasteczka), odwiedzając ją wyrażasz zgodę na ich wykorzystanie oraz rejestrując konto wyrażasz zgodę na przetwarzanie swoich danych osobowych w ramach funkcjonowania serwisu. Więcej informacji znajdziesz w naszej polityce prywatności. Pozdrawiamy!


Pytanie dotyczące prostej animacji z CSS
#1
Star 
Mam pytanie odnośnie CSS. Nie mogę zrozumieć na jakiej zasadzie działa taki oto przykład.

[Obrazek: Bez_nazwy_2-1355575454.jpg]

Dokładniej chodzi mi o to, aby po najechaniu na div wyświetlił mi się nagłówek pierwszego poziomu h1 i akapit p
Chomik: YouTube | Portfolio deviantART


  Odpowiedz
#2
Podzielę się trochę wiedzą : P

Najpierw musimy zbudować sobie składnie "przycisku" w html
<div id="przycisk"><div>przycisk
	<div>
		<h1>Nagłówek</h1>
		<p>tekst tekst tekst</p>
	</div>
    </div>   
</div>
(porobiłem wcięcia tabulatorem aby było czytelniejsze :P)

Choć może się wydawać na pierwszy rzut oka że to nie ma prawa działać ... żadnych oznaczeń poza jednym ID :)
(no w sumie nie zadziała bez CSS :P)

No i skoro już wspomniałem o css ...
musimy najpierw ukryć naszego diva z <h1> i <p> więci sprawić aby po najechaniu się pojawiał... więc
div#przycisk div div {display:none; position:absolute;}	
div#przycisk div:hover>* {display:block;}

O jaka magia, działa bez JS ;) ale jak to wygląda -.- można się ciut bardziej postarać i rozwinąć nasz css i wyrównać to ładnie, ustawić łapkę po najechaniu kursorem, ... itd :)

No ale nie dam ci wszystkiego na gotowca :)
Najtrudniejsze masz już za sobą :P

Powodzenia! :)
Sikorek ĆwiczyDropbox.com
Być Przyjacielem to dla mnie zaszczyt :)
  Odpowiedz
#3
Wielkie dzięki Szymon, ale mam jedno pytanie? Co powoduję ten znacznik?
>*
Chomik: YouTube | Portfolio deviantART


  Odpowiedz
#4
div:hover>*

ma wykonać coś dla dowolnego tagu w div
Sikorek ĆwiczyDropbox.com
Być Przyjacielem to dla mnie zaszczyt :)
  Odpowiedz
#5
Chodzi mi tylko o >*
_________________________________________________
Opiszę dokładnie problem, a raczej brak konkretnej wiedzy.

Chodzi mi o to, aby po najechaniu na sam div wyświetliły mi się ukryte elementy. Znalazłem w sieci tutorial ukazujący moc CSS3. Po przeanalizowaniu kodu i wywalenia wszystkiego co mąci mi w głowie, prawie zrozumiałem jego zasadę.

<div class="jeden dwa">
	<div class="maska">
		<h2>bla bla bla</h2>
		<p>bla bla bla bla bla bla bla bla bla bla bla</p>
	</div>
</div>
Plik posiada dwa arkusze stylów, jeden odpowiedzialny jest za ustawienie elementów, a drugi za wykonanie animacji i ukrycia elementów.

CSS "style.css" odpowiedzialny za ustawienie elementów.
.jeden {
width: 300px;
height: 200px;
margin: 10px;
overflow: hidden; 
position: relative;  /*chodzi mi o te elemnty i ich zależność między nimi*/
text-align: center;
border: 1px black solid;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.jeden .maska  {
width: 300px;
height: 200px;
position: absolute;  /*chodzi mi o te elemnty i ich zależność między nimi*/
overflow: hidden;
top: 0;
left: 0;
}

.jeden h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative; /*chodzi mi o te elemnty i ich zależność między nimi*/
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
   
}
.jedne p {
font-family: Georgia, serif; font-style: italic;
font-size: 12px;
position: relative; /*chodzi mi o te elemnty i ich zależność między nimi*/
color: #fff;
padding: 10px 20px 20px;
text-align: center;

Jeżeli mógł by mi ktoś wytłumaczyć pozycjonowanie na tym przykładzie był bym bardzo wdzięczy. Dokładniej chodzi mi o pozycjonowanie relatywne, absolutne i "łącznie" ich ze sobą.
Dla jasności umieszczam drugi styl.

CSS "style2.css" odpowiedzialny za animację i ukrywanie elementów.

.dwat .maska {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.dwa h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.dwa p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}


.dwa:hover .maska{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.dwa:hover h2,
.dwa:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.dwa:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}

Chomik: YouTube | Portfolio deviantART


  Odpowiedz
#6
A wysiliłeś się chociaż trochę i użyłeś super narzędzia do zdobywania wiedzy (google.pl) ?
To wszystko masz w podstawach css3, odpowiedzi na wszystkie pytania jakie zadajesz znalazłem w google w ciągu kilku sekund.
http://kurs.browsehappy.pl/CSS/Position
  Odpowiedz
#7
Oczywiście, że czytałem o pozycjonowaniu w necie, inaczej bym tu nie pisał, ale większość z informacji jest albo mało obszerna albo mało zrozumiała dla mnie.
Chomik: YouTube | Portfolio deviantART


  Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  [Pytanie] Strona do szkoły B0hazard 2 1 803 06.06.2012, 23:13
Ostatni post: B0hazard
  [chomikuj.pl] php i banowanie ip - pytanie Swordancer 4 1 964 21.05.2012, 21:32
Ostatni post: szalony
  Świąteczne songi (sample) - krótkie dźwięki do animacji flash adam-as 0 1 796 12.12.2011, 16:44
Ostatni post: adam-as

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości