• 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ń

0 głosów
283 wizyt
pytanie zadane 3 stycznia 2018 w HTML i CSS przez Alcomats Użytkownik (590 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 (568,880 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 (590 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 (568,880 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 (590 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,074 wizyt
pytanie zadane 7 grudnia 2017 w HTML i CSS przez Alcomats Użytkownik (590 p.)
0 głosów
1 odpowiedź 93 wizyt
+1 głos
0 odpowiedzi 219 wizyt
pytanie zadane 28 marca 2021 w HTML i CSS przez janzw4 Bywalec (2,050 p.)

88,330 zapytań

136,924 odpowiedzi

305,592 komentarzy

58,601 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...