Css images- transformacje

0

Dzień Dobry.
Potrzebuję pewnego sprawdzenia, a raczej zapytania się jak to powinno być zrobione.
Miałem do zrobienia zadanie według tego mockap. (Zdj z podanej)

mockap-> https://zapodaj.net/7d2812ed17f9d.jpg.html

https://jsbin.com/miruwitoli/edit?html,css,js,output
jak to jest wykonane? pomijając kolory i czcionkę.
Jak najlepiej przekształcić to zdj aby się tak wpowowywało?

Dziękuje za pomoc.

1

Jeśli chodzi o obrazek miecza to zwykły png z css rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

0
Freja Draco napisał(a):

Patrz i podziwiaj:
https://codepen.io/ncerminara/pen/KzurJ

no ładnie to zrobiłeś , ale to jest nie na temat. no i chodzi o to że ja dalej nie wiem jak to powinno być zrobione jak najlepiej. A miecz miał być ze zdj.

1
mateusz1231r4 napisał(a):
Freja Draco napisał(a):

Patrz i podziwiaj:
https://codepen.io/ncerminara/pen/KzurJ

no ładnie to zrobiłeś

Nie... gdybym ja to robiła, byłby czysty CSS.

ale to jest nie na temat. no i chodzi o to że ja dalej nie wiem jak to powinno być zrobione jak najlepiej. A miecz miał być ze zdj.

Przyjrzyj się właściwości box-shadow:
https://www.cssmatic.com/box-shadow

0

Za zbędne uważam:

<div class="character">
<div class="character__info">
<div class="character__img">
<div class="character__elem">

Miałbyś
H1 (bo czemu to jest H4?)
IMG
UL > LI

I tyle.

A w sumie:

<div class="wrp">

też można by się pozbyć i ostylować samo BODY.

Ale to jest mój prywatny punkt widzenia i niekoniecznie pokrywa się z oczekiwaniami autorów zadania.

0

no ale jak to tak stylować body. A to miało być BEM(sam osbie tak wymyśliłem że tak sobie zrobie).
Przecież bez '

' się tego nie da zrobić bo to jest wraper dla grid.
Znasz może miejsce gdzie można się nauczyć jakiś dobrych praktyk html/css? jak to robić prawidłowo.</p>

1 użytkowników online, w tym zalogowanych: 0, gości: 1