Właściwość CSS – resize

Kategoria wpisu Interfejs, Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , , , on przez .



Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea).

Właściwość resize jest ściśle powiązana z overflow. Cecha nie będzie działać jeśli overflow=”visible”. Dopuszczalne wartości to „scroll”, „auto”, albo „hidden”.

Ustawienia resize

resize przyjmuje kilka wartości

  • none – brak
  • both – można dowolnie rozszerzać, zmieniać wymiary (bok, dół)
  • horizontal – można rozszerzać w bok
  • vertical – można rozszerzać w dół
  • initial – ustawienia domyślne
  • inherit – dziedziczy ustawienia rodzica

Przykłady:

Podstawowe wymiary przykładowych prostokątów – CSS

none

Kod HTML


resize: both

Kod HTML

Kod CSS


resize: horizontal

Kod HTML

Kod CSS


vertical

Kod HTML

Kod CSS


resize: initial

Kod HTML

Kod CSS


resize: inherit

Kod HTML

Kod CSS

Interpretacja przez przeglądarki

WłaściwośćChromeIE / EdgeFirefoSafariOpera
resize4.0nie działa5.0
4.0 -moz-
4.015.0

źródło:
https://www.w3schools.com/cssref/css3_pr_resize.asp

przeciąganie, zmienianie rozmiarów pola tekstowego z pomocą CSS

Przeczytaj również

Trójkąty za pomocą CSS Trójkąty na stronie przeważnie umieszcza się w formie ilustracji, jest to najpopularniejsza metoda jednak nie jedyna. Trójkąty można również stworz...
Zmiana koloru zaznaczenia właściwość CSS ::selecti... Jak zapewne każdy zauważył podczas zaznaczania na stronie internetowej fragmentu tekstu tło pod nim zmienia on kolor np. na ciemno niebieski (w zależn...
Przykładowe generatory gradientów CSS Samodzielne tworzenie gradientów w CSS jest dość trudnym i mozolnym zajęciem. W większości przypadków uzyskane w ten sposób efekty nie do końca spełni...
Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...