Jak uzyskać taki kształt na stronie www, i jak umieścić tam zdjęcia do wyświetlenia?

Question

Witajcie,
próbuje stworzyć kształt, w którym po naciśnięciu na nim otworzą się zdjęcia do przeglądania. Jak to ugryźć i dokonać tego przy użyciu HTML,CSS i JS? Zdjęcia do przeglądania mają pojawić się na środku strony w oknie, z możliwością przejścia na kolejne zdjęcia.

Answer 1

CSS'em opcja border-radius

Comments

Dziękuję.

Answer 2

1. Ale jaki kształt? Sam owal, czy taki zawijas? Czy owal/zawijas z ludzikiem?

2. Sam kształt możesz zrobić na przykład w ten sposób: CSS - Tricks Jeśli chcesz coś bardziej złożonego, to jest wiele sposobów. Możesz stworzyć taki kształt w dowolnym programie graficznym a potem dodać go bezpośrednio na stronę internetową przy pomocy tagu img, lub jako tło tego Twojego "buttona". Jeśli kształt nie jest jakiś super złożony, to możesz się pokusić o odpalenie programu do grafiki wektorowej i stworzenia wymaganego kształtu w formacie SVG (Twój kształt będzie dzięki temu miał idealnie ostre krawędzie w każdym rozmiarze okna) istnieje jeszcze możliwość stworzenia takiego obrazka z pomocą HTML + JS i narysowanie go w canvasie

Comments

Dzięki za wyjaśnienie. Jak odpalić ten canvas?

A więc chcę uzyskać dokładnie taki kształt jak na rysunku. Składa on się z linii. Rysunek ma tylko nawiązywać do tego, że potem będą tam umieszczane zdjęcia.

Co chcę wykonać:

1. stworzyć ten kształt złożony z linii (na który wskazuje strzałka)
2. umieścić w tym kształcie obiekt, który będzie zawierał w sobie zdjęcia
3. będą one otwierały się w większym oknie po naciśnięciu w tym kształcie
4. okno to będzie można przesuwać w lewo/prawo na kolejne zdjęcia.

 

---

To chyba najszybciej będzie jeśli wytniesz sobie ten obrazek i zapiszesz z rozszerzeniem .png a następnie dodasz na stronę jako background-image: (w CSS) lub w tagu img (w HTML) canvas byłby okej, gdybyś chciał mieć kontrolę nad tym co się dzieje na tym obrazku - mógłbyś go na przykład animować, żeby machał ręką. W tym wypadku raczej szkoda czasu na takie kombinowanie. Osobiście stworzyłbym taki obrazek w formacie SVG, dla zachowania lepszej jakości krawędzi, ale Ty pewnie musiałbyś najpierw ogarnąć jakiś program do wektorów...

---

Wykonać tą linię graficznie nie będzie problemu. Kwestią tylko teraz jest, jak w obrębie tych linii (wewnątrz - tam gdzie jest ten rysunek) umieścić zdjęcie, po naciśnięciu którego otworzy się to okno z tym zdjęciem i z możliwością ich przeglądania.

---

Tworzysz element, który przechowuje Twoje zdjęcie na przykład div a w nim tag img ze zdjęciem i nadajesz temu elementowi div background-image, który jest tą linią? Chyba nie mam innych pomysłów.

---

Powierzchnia do naciskania zdjęcia ma być o rozmiarach takich jak ten kształt złożony z linii. Powierzchnia ta jest niejako `w tym kształcie`. Jak osiągnąć takie ustawienie powierzchni?

Powierzchnię tą zaznaczyłem liniami poziomymi.