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

Weekly Dev Challenge 9 - Kilka pytań

VPS Starter Arubacloud
0 głosów
317 wizyt
pytanie zadane 3 stycznia 2018 w HTML i CSS przez Alcomats Użytkownik (580 p.)
edycja 3 stycznia 2018 przez Alcomats

Witam mam kilka pytań co do wykonanej przezemnie strony z Facebook-owej strony Weekly Dev Challenge.

Link : https://alcomats.github.io/Challange/

Kod : https://github.com/Alcomats/Challange

Pytanie nr 1 :  dotyczy slidera ( który nie działa, ponieważ nie umiem jeszcze pisać w języku JS ). Czy te " doty" robi się w taki sposób jak ja zapisałem poprzez atrybut <a> ? 

<div class="points">
                <a href="#" class="first-switch-point"><span class="ion-ios-circle-filled" aria-hidden="true"></span></a>
                <a href="#" class="switch-point"><span class="ion-ios-circle-filled" aria-hidden="true"></span></a>
                <a href="#" class="switch-point"><span class="ion-ios-circle-filled" aria-hidden="true"></span></a>
            </div>

Pytanie nr: 2 - dotyczy sekcji poniżej - "video-section" - chodzi mi o cornery, czy prawidłowo je stworzyłem poprzez dodanie pustych divów w HTML , a w CSS je ostylowałem oraz wypozycjonowałem.

<a href="#" class="square-cotaniner">
                <span class="ion-ios-arrow-right play-icon" aria-hidden="true"></span>
                <span class="corner-top-left"></span>
                <span class="corner-top-right"></span>
                <span class="corner-bottom-left"></span>
                <span class="corner-bottom-right"></span>
                <p class="play-paragraph">Watch my Video</p>
            </a>

Pytanie nr 3: dotyczy hovera w social-ikonach, czy stworzyłem go poprawnie? Jak dawałem zwykły padding to bordery były w różnych kształtach i nie były okrągami: 

.social-link:link,
.social-link:visited {
    text-decoration: none;
    color: #848282;
    font-size: 25px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    background-color: transparent;
    border-radius: 50%;     
}

.social-link:hover,
.social-link:active {
    background-color: #e6b5b5;
    color:#fff;
}

I jeszcze podpinam jedno pytanie jak uzyskać ten efekt ( zdjęcie poniżej) żeby po najechaniu na ikone nie pojawił się tylko włąsnie okrąg ale jeszcze ten border w okół okręgu : 

 

Dziękuje za wszelką pomoc!

1 odpowiedź

+1 głos
odpowiedź 3 stycznia 2018 przez Comandeer Guru (599,730 p.)

ad. 2) Użyłbym tutaj pseudoelementów, nie tworzyłbym pustych elementów.

ad. 1) Nie do końca. Te kropki nie służą przejściu na nową stronę, ale wykonaniu akcji (przewinięcie slidera). Z tego powodu wstawiłbym tutaj przyciski (button). Co więcej, takie wstawienie ikony sprawia, że taki element interaktywny nie ma tekstowej etykiety, przez co może być niezrozumiały dla użytkowników czytników ekranowych. Ikonie musi towarzyszyć etykieta.

ad. 3) Hmmm, a border-style: double?

komentarz 3 stycznia 2018 przez Alcomats Użytkownik (580 p.)

ad.1)

Czy taki zapis jest poprawny ? 

<div class="points">
                <button type="button" class="button"><span class="ion-ios-circle-filled dot-icon" aria-label="slider-dot"></span></button>
                <button type="button" class="button"><span class="ion-ios-circle-filled dot-icon" aria-label="slider-dot"></span></button>
                <button type="button" class="button"><span class="ion-ios-circle-filled dot-icon" aria-label="slider-dot"></span></button>
            </div>

ad.3) Faktycznie działa lecz wiesz, może jak ustawić odległość między borderami ?

 

komentarz 3 stycznia 2018 przez Comandeer Guru (599,730 p.)

ad. 1) Nie jest, bo etykieta powinna być dla przycisku, nie ikony. No i etykieta powinna mieć sens:

<button type="button" class="button" aria-label="Przejdź do następnego slajdu"><span class="ion-ios-circle-filled dot-icon" aria-hidden="true"></span></button>

ad. 3) W takim wypadku jednak trzeba się posłużyć np. pseudoelementem lub outline.

komentarz 4 stycznia 2018 przez Alcomats Użytkownik (580 p.)
Ok dzięki!

Comandeer mógłbyś jeszcze tylko okiem rzucić na ten :hover posłużyłem sie jak mówiłeś pseudoelementem ale bym był bardzo wdzięczny, jakbyś sprawdził kod czy wygląda to wporządku :)

Podobne pytania

0 głosów
2 odpowiedzi 1,125 wizyt
pytanie zadane 7 grudnia 2017 w HTML i CSS przez Alcomats Użytkownik (580 p.)
0 głosów
1 odpowiedź 157 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...