Jump to content
Sign in to follow this  
P0Y3B

Stylizacja tekstu w kole, dopasowanie rozmiarów i zmiana koloru CSS

Recommended Posts

http://razor.1free.eu/

 

Mam tutaj dwa koła które odsyłają do dwóch innych stron.

 

Chciał bym aby tekst zawarty w nich był dopasowany do koła (Szerokość/Wysokość)

 

Dodatkowo chciał bym uzyskać efekt że po najechaniu na koło tekst zmienia kolor na #fff a tło na #000

 

Share this post


Link to post

Tak powinien prezentować się kod CSS:

#kolo {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 100%;
    margin: 40px auto 0;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}
#kolo:hover{
    background:#000;
    color:#fff;
}
#kolo p {
    font-size: 50%;
}

 

a w HTML zmień tak dla obu:

<a href="bf2.html"><div id="kolo"><p>BF2</p></div></a>

 

I z tego co wiem id może być tylko JEDEN RAZ w jednym divie - dlatego jeśli chcesz coś powielić to nie korzystaj z id (#kolo) tylko z klas (.kolo).
 

Edited by Mativve
Poprawienie kodu
  • Like 2

Share this post


Link to post
6 minut temu, Mativve napisał:

id może być tylko JEDEN RAZ w jednym divie

ID może być tylko jeden raz na całej, wyświetlonej stronie. I nie stylizuje się zazwyczaj po ID, a po klasach. ID powstało po to, by jednoznacznie określić element w JS / jQ.

  • Like 1

Share this post


Link to post
Teraz, Salva napisał:

ID może być tylko jeden raz na całej, wyświetlonej stronie.

No tak, źle napisałem

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...