• Home
  • Archive by category "CSS"

Stylowanie linków za pomocą pseudoklas :hover :active :focus :visited



Standardowy wygląd linków na stronie internetowej zależny jest od przeglądarki. Każdy browser może wyświetlać linki i ich warianty (z różnymi pseudoklasami) w odmienny sposób.

Zazwyczaj jednak chcemy ustawić własne style, po to, by linki wyglądały tak samo niezależnie od tego, z jakiej przeglądarki korzystamy.

Do tego służą pseudoklasy:

Read More Stylowanie linków za pomocą pseudoklas :hover :active :focus :visited

Rem, em – jednostki miary w css



Przyznam, że rzadko korzystam z takich jednostek miary jak rem i em. Zazwyczaj używam pikseli (px), bo jakoś łatwiej mi skojarzyć, jaki rozmiar będzie posiadać dany element.

Jednostki rem i em, w przypadku czcionek, mają jednak jedną przewagę nad pikselami – mogą być ustawione w korelacji do wielkości czcionki rodzica (em) lub roota (najczęściej jest nim element <html> – rem). Daje to możliwość manimulowania rozmiarami dla wielu elementów na raz. Domyślna wartość rozmiaru czcionki dla roota to zazwyczaj 16px (ale to zależy od przeglądarki).

Read More Rem, em – jednostki miary w css

Jak wycentrować text i div-a w poziomie i pionie używając css



Problem centrowania diva lub tekstu jest dość powszechny i sama niejednokrotnie musiałam poświęcić na jego „naprawienie” więcej czasu niż bym chciała. Czasem sytuacja jest prosta i użycie jednej z podstawowych metod, jak margin: 0 auto rozwiązuje sprawę, a czasem trzeba trochę więcej pogłówkować. Dlatego poniżej przedstawiam kilka przydatnych metod, które możesz użyć w zależności od Twoich potrzeb.

Read More Jak wycentrować text i div-a w poziomie i pionie używając css

Jak ustawić input jako obrazek?

 

How to replace input type=checkbox with an image – short instruction to checkbox image replacement

 

Czasami tworząc listę opcji do wyboru chciałoby się zrobić to niestandardowo, bardziej oryginalnie, w mniej nudny sposób. Po co zaznaczać opcje przedstawione jako tekst, skoro można dodać do nich obrazek i uczynić wybór przyjemniejszym. Jeśli nie bardzo rozumiesz o co mi chodzi, spójrz poniżej:

Read More Jak ustawić input jako obrazek?