Psd to html, jak wy byście to zrobili?

pytanie zadane 11 grudnia 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

Hej, tworzę sobie psdka dosyć ciekawego i napotkałem się z problemem

O to on:

A więc tak w środku to pewnie jest zdjęcie, później jakiś border radius żeby te obramowanie zrobić, ale nie wiem jak dobrze zrobić te kółka wokół :D, macie jakieś pomysły?

2 odpowiedzi

odpowiedź 12 grudnia 2017 przez Artek Stary wyjadacz (11,800 p.)

odpowiedź 12 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

Jeśli liczba kółek nie jest zmienna, to możesz sobie przygotować mixin i najłatwiej będzie to zrobić przez trzy transformacje (punkt startowy to wszystkie elementy w środku kółka):

obrót 'a' stopni, translacja po X równa 'b', obrót -'a' stopni.

Ja tak zrobiłem swoje menu: https://mortmortis.pl/#menu

komentarz 12 grudnia 2017 przez Vorex444 Dyskutant (9,610 p.)

kurcze nie czaje

komentarz 12 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

No te elementy rozłożone są na okręgu, na promieniu R. Między dwoma elementami a środkiem okręgu jest jakiś kąt alfa.

Ustaw elementy dokładnie w środku okręgu (np. poprzez position: absolute), a następnie wykonaj w CSS dla każdego elementu:

transform: rotate(Adeg) transform(Rpx) rotate(-Adeg);

Za "A" oraz "R" podstaw odpowiednie wartości.

Mixin (czyli funkcja) np. w SASS pozwoli Ci na obliczenie tego kąta automatycznie (rozstawienie 10 elementów na okręgu to 360 stopni / 11 jeśli dobrze liczę). Pobaw się tym. Zobacz sobie moje menu, jak jest zrobione. Spróbuj wyłączyć "transform" w inspektorze dla elementu (<li>) i zobacz, że element ląduje w środku.

komentarz 12 grudnia 2017 przez Vorex444 Dyskutant (9,610 p.)

własnie zacząłem to robić i jestem już tutaj

a każdy elemeny pozycjonuje przez

.projects > .project-info > .info:nth-of-type(2) {
top: 4px;
left: 148px;
}

komentarz 12 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)

Jak chcesz to tak robić to proszę bardzo, ale żeby osiągnąć precyzyjne położenie musisz użyć wzoru na okrąg (x^2 + y^2 = r^2) i jeszcze uwzględnić położenia i wymiary każdego elementu, a to nie jest przyjemne.

Uważam, że moja metoda będzie prostsza.