[CSS] Kręcące się logo

Tajemnicza A. poprosiła mnie o pomoc, mianowicie chodzi o kręcące się logo, które mam w lewym górnym rogu.  Niestety nie dostałam żadnego kontaktu - maila, ni numeru gg, także postanowiłam zrobić krótką instrukcję i wstawić ją do postu. Swoją drogą bardzo Was proszę, jeżeli już piszecie z anonima, za czym nie przepadam, to dajcie jakiś email do kontaktu czy cokolwiek.




Aby ustawić taką kręcącą się ikonkę będziemy musieli trochę pogrzebać w kodzie HTML i oczywiście dodać co nieco do arkusza CSS, zaczynamy zatem :)

1. Oczywiście najpierw należy przygotować sobie obrazek / logo - w moim przypadku jest to ikona o wymiarach 100 x 100 pikseli. Następnie obrazek uploadujemy na jakiś hosting. 

2. Zajmijmy się CSS'em. Wejdź w zakładkę szablon - > dostosuj, otworzy Ci się projektant szablonów Bloggera, wejdź w Zaawansowane. Do niestandardowego arkusza CSS dodaj następujący kod : 

.LOGO {
position: fixed;
 top: 40px;
 left: 10px;
z-index: 5;
width: 100px /*szerokość w pixelach*/ ; 
height:100px /*długość w pixelaxch*/ ; 
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: perspective(400px) rotateY(0deg);
-webkit-transform: perspective(400px) rotateY(0deg);
-moz-transform: perspective(400px) rotateY(0deg);
-o-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
}

.LOGO:hover{
transform: perspective(400px) rotateY(360deg);
-webkit-transform: perspective(400px) rotateY(360deg);
-moz-transform: perspective(400px) rotateY(360deg);
-o-transform: perspective(400px) rotateY(360deg);
-ms-transform: perspective(400px) rotateY(360deg);
}








Klasa .LOGO opisuje nam ogólnie nasz obrazek, zaś .LOGO:hover opisuje to co dzieje się z nim po najechaniu myszką, czyli po prostu obrót. Nie zmieniajcie nic w tym kodzie oprócz wartości width i height - szerokości i długości (jeżeli wasz obrazek ma wymiary 200x200px to po prostu zmieńcie 100 na 200 itd.) oraz wartości position, top i left .

WARTOŚĆ POSITION : fixed | absolute | relative - poczytajcie trochę o nich w poradnikach CSS, o tym czym się różnią i tak dalej. Ja mam zastosowaną wartość fixed. Działa ona w taki sposób, że nasze logo przesuwa się razem ze stroną i zawsze jest widoczne.



WARTOŚĆ TOP / LEFT : podawana jest w  pixelach - jest to nic innego niż odległość od lewej strony [left] czy też od góry [top]. Poeksperymentujcie z tymi wartościami, będziecie widzieć jak logo się przesuwa.





3.  Teraz czas na część HTML. Kod wygląda następująco : 




<div class="LOGO">


<a href="http://ADRES.STRONY.COM/" target="_blank"> 


<img alt="logo" border="0" src="http://ADRES.OBRAZKA.png" /> </a>


</div>







Oczywiście wpisujemy w kodzie swój adres strony na który chcemy, by przeniosło nas po kliknięciu oraz adres do obrazka.  Kod HTML wklejamy do kodu naszego szablonu, w tym celu wejdź w zakładkę szablon -> Edytuj kod HTML. Odszukaj w swoim szablonie frazy :




 </head>

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 



Pod nią wklej nasz kod i zapisz szablon.





Ja tu dziś uprawiałam łopatologię stosowaną, wybitna w CSS nie jestem, nauczyłam się go niedawno, no ale tym co wiem mogę się z Wami podzielić. Nie wiem czy jest jakiś prostszy sposób na ustawienie takiego bajeru, u mnie jest to zrobione dokładnie tak. Mam nadzieję, że nic nie pomieszałam, ale z moim roztargnieniem wszystko jest możliwe. Jeżeli coś nie działa lub widzicie tu jakiś błąd to piszcie od razu. Jeżeli ten poradnik wam pomógł to podzielcie się efektami ;)










































Brak komentarzy:















Prześlij komentarz


















        

      










Subskrybuj:
Posty (Atom)