• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
215 wizyt
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

0 głosów
odpowiedź 12 grudnia 2017 przez Artek Stary wyjadacz (11,800 p.)
Nie wiem czy to optymalne rozwiązanie, ale na pewno można wykorzystać pozycjonowanie względne. - pierwsze co mi przyszło do głowy.
0 głosów
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
1
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.
komentarz 12 grudnia 2017 przez Vorex444 Dyskutant (9,610 p.)
W css takie wzory można uzyć?
komentarz 12 grudnia 2017 przez Schizohatter Nałogowiec (39,600 p.)
Nie... Dlatego właśnie to jest trudne i proponuję moją metodę, w której jedynie co musisz znać, to kąt odchylenia każdego z elementów od kąta "zero".

Podobne pytania

0 głosów
1 odpowiedź 135 wizyt
pytanie zadane 24 października 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)
0 głosów
2 odpowiedzi 266 wizyt
pytanie zadane 30 sierpnia 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)
0 głosów
3 odpowiedzi 157 wizyt
pytanie zadane 23 maja 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...