Jak dodać plik w formacie SVG do strony internetowej?
Temat plików SVG nie jest nowy na moim blogu – poruszyłam jego tematykę w sumie już kilkakrotnie. Tym razem postaram się wam pokazać jak można umieścić taki plik na stronie internetowej.
Responsywne obrazy i grafiki na stronie – metody HTML i CSS (RWD)!
W dzisiejszych czasach nikogo już nie dziwi kiedy obraz na stronie (RWD Responsive Web Design) zaczyna się „kurczyć” dostosowując w ten sposób swoje rozmiary do wielkości ekranu urządzenia.
Lustrzane odbicia obrazków z pomocą CSS
Dzisiaj pokażę wam jak uzyskać efekt lustrzanego odbicia obrazka (ang. CSS image reflections) na stronie internetowej z pomocą CSS. Na chwilę obecną istnieje kilka różnych metod z pomocą, których uzyskać możemy złudzenie odbicia. Dziś omówię najpopularniejsze z nich.
Grafika w Bootstrap 4
Podobnie jak w Bootstrap 3 w Bootstrap 4 posiadamy już gotowe rozwiązania dla grafik umieszczonych na stronie.
Czym jest plik w formacie SVG oraz jakimi programami można go utworzyć i otworzyć?
Zacznijmy od tego że pliki SVG (z ang. Scalable Vector Graphics File) zostały stworzone głównie z myślą o stronach internetowych.
![Mieszanie kolorów z selektorem mix-blend-mode [CSS]](https://aurainweb.pl/wp-content/uploads/2017/11/mieszanie-kolorow.jpg)
Mieszanie kolorów z selektorem mix-blend-mode [CSS]
Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim.
Pozycjonowanie obrazka w obrębie kontenera z CSS – object-position
Właściwość CSS object-position służy do określania pozycji początkowej (położenia początkowego) wybranego elementu HTML w kontenerze.
Dopasowywanie obrazka do rozmiaru obszaru roboczego CSS3 – object-fit
Z pomocą właściwości object-fit określamy w jaki sposób interesujący nas element HTML (np. obrazek) będzie wypełnić dany obszar na stronie internetowej.
5 prostych efektów na obrazkach z wykorzystaniem hover – CSS
Animacje aktywowane efektem typu hover (po najechaniu kursorem myszy) są zawsze ciekawym dodatkiem na stronie internetowej. Dzięki rozwiązaniom jakie dało nam CSS3 stały się też o wiele bardziej popularniejsze i prostsze w użyciu. Niemniej zastosowanie takiej animacji wymaga również pewnej wiedzy.
Charakterystyka właściwości clip CSS
Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie.
Pozycjonowanie tekstu i obrazków z pomocą CSS
W jednym z poprzednich wpisów pokazałam w jaki sposób wyśrodkować obrazek lub tekst wykorzystując do tego czysty HTML. Tym razem pójdę o krok dalej i do ustawiania ich na stronie użyję kaskadowych styli czyli CSS.
![Efekt Parallax podczas przewijania strony internetowej [CSS]](https://aurainweb.pl/wp-content/uploads/2017/01/parallax_11zon.jpg)
Efekt Parallax podczas przewijania strony internetowej [CSS]
Efekt Parallax lub inaczej paralaksa to jeden z ciekawszych i jednocześnie łatwiejszych efektów jakie można spotkać na stronie internetowej. Stosowany jest głównie w wersjach strony na komputery bynajmniej nie tylko dlatego, że lepiej się na nich prezentuje.