Hej,
to mój pierwszy tego typu projekt i zabawa z pozycjami w CSS i animacją. Poniżej link:
http://codepen.io/annadrybulska/full/mABmgJ/
niestety jeśli tylko zmienicie widok na debug czy jakikolwiek inny BB8 ulega rozczłonowaniu :(
co zrobiłam źle...
proszę o pomoc w zrozumieniu i jakąś wskazówkę :)
dziękuję serdecznie
- Rejestracja:prawie 9 lat
- Ostatnio:ponad 8 lat
- Postów:13
1
HTML5 Anna Drybulska
poprawiłam kod zmieniając position na absolute problematycznych elementów, ale czy rozwiązanie to jest poprawne?
- Rejestracja:prawie 10 lat
- Ostatnio:ponad 4 lata
- Lokalizacja:Gdańsk
- Postów:204
1
Fajne! Gdyby jeszcze głowa ruszała się po tułowiu. Ogólnie rozwiązanie jest spoko. Dodałbym kilka elementów jako :after, :before. Ale tak też może być. :)
chciałabym jeszcze nauczyć się JavaScript tak żeby puścił mi oczko :)
CSS możesz to zrobić też :P np. reagując na hovera lub jak animację ;P
oooo :) jutro będę działać, dziś od 14 go 'tworzyłam', chcę żeby był dopieszczony, a dziś już nie mam siły :)
- Rejestracja:prawie 9 lat
- Ostatnio:ponad 8 lat
- Postów:13
0
:after, :before? tzn, proszę przybliż mi Twój pomysł, dopiero się uczę, może dam radę zaimplementować :)
1
Całkiem ładne ;)
:after :before - poczytaj o pseudoelementach
Przyczepię się do obracającego się wraz z "podwoziem" odbicia światła ;)
o tak, ja również, masz pomysł jak to naprawić?
- Rejestracja:prawie 10 lat
- Ostatnio:ponad 4 lata
- Lokalizacja:Gdańsk
- Postów:204
0
Zamiast tworzyć 3 dodatkowych tagów, można to zrobić jednym. Przykład z innej mojej odpowiedzi: http://jsbin.com/gezijedaza/1/edit?html,css,output
Główną klasę np .test dajemy jako pozycję relatywną. Przykład:
<div class="text"></div>
.test { position: relative; height: 500px; width: 500px; background-color: #fff; }
.test:before { content: ''; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; background-color: #000; border-radius: 0 0 50px 0; }
.test:after { content: ''; position: absolute; bottom: 0px; right: 0px; width: 20px; height: 20px; background-color: #f00; border-radius: 50px 0 0 0; }
Zobacz co ten kod zrobi(mam nadzieję, że błędu nie zrobiłem. Kod pisany na szybko.)
dodał czerwony dolny-prawy róg za i czarny górny-lewy róg przed div z klasą test, może mogę nałożyć cień na 'podwozie', tak by był nieruchomy dzięki temu...
Możesz spróbować obracać cień w przeciwną stronę. :P
1
...może mogę nałożyć cień na 'podwozie', tak by był nieruchomy dzięki temu... - Anna Drybulska
Nie, jeżeli zaczniesz animować rodzica, wszystko w środku też będzie się poruszało względem rodzica.
Żeby zrobić odbicie które nie będzie się obracało powinnaś utworzyć osobny element, wyżej niż to co animujesz, bądź przesunąć go na wierzch z użyciem z-index
warstwa z głową
warstwa z odbiciem
animowane podwozie
udało się, dziękuję, a jak dodawać i usuwać klasy za pomocą JavaScript, nie jQuery? wyszukałam kilka możliwości na stackoverflow ale żadna z nich nie działa..proszę o pomoc
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.