Autor publikacji
Virtual Patriot - Administrator

inset()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji inset()

Za pomocą funkcji inset() możemy określić kształt w postaci prostokąta (opcjonalnie z zaokrąglonymi rogami).

Parametry funkcji inset()

Przykładowe zapisy

inset(15px)

inset(5px 15px)

inset(5px 10px 15px)

inset(5px 10px 15px 20px)

inset(25px round 15px)

inset(10% round 10px 20px /20px 10px)

inset(5px 10px 15px 20px round 6px 8px 10px /20px 18px)

inset(5px 10px 15px 20px round 6px 8px 10px 12px /20px 18px 16px 14px)

margin

Parametr margin jest wymaganym parametrem funkcji inset(). Parametr margin określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem kolejnych krawędzi obszaru pierwotnego.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

możemy podać cztery wybrane wartości. Każdą kolejną wartość należy oddzielić od poprzedniej wartości przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Pierwsza wartość określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem górnej krawędzi obszaru pierwotnego. Druga wartość określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem prawej krawędzi obszaru pierwotnego. Trzecia wartość określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem dolnej krawędzi obszaru pierwotnego. Czwarta wartość określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem lewej krawędzi obszaru pierwotnego. Ponadto wartości parametru margin możemy podawać według zasady formuły czterech wartości.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru obszaru pierwotnego, którego kształt chcemy zmienić (pierwsza oraz trzecia wartość liczona jest względem aktualnego rozmiaru wysokości wspomnianego obszaru, a druga oraz czwarta wartość liczona jest względem aktualnego rozmiaru szerokości wspomnianego obszaru)

Wartość domyślna

0

radius

Parametr radius nie jest wymaganym parametrem funkcji inset(). Parametr radius określa wielkość zaokrąglenia kolejnych rogów nowo powstającego prostokątnego kształtu.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

po słowie kluczowym round możemy podać cztery wybrane wartości. Każdą kolejną wartość należy oddzielić od poprzedniej wartości przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Pierwsza wartość określa wielkość zaokrąglenia lewego górnego rogu nowo powstającego prostokątnego kształtu. Druga wartość określa wielkość zaokrąglenia prawego górnego rogu nowo powstającego prostokątnego kształtu. Trzecia wartość określa wielkość zaokrąglenia prawego dolnego rogu nowo powstającego prostokątnego kształtu. Czwarta wartość określa wielkość zaokrąglenia lewego dolnego rogu nowo powstającego prostokątnego kształtu. Gdy chcemy określić osobną wielkość zaokrąglenia rogu w poziomie oraz w pionie, wtedy po pierwszych czterech podanych przez nas wartościach należy umieścić znak /, po którym należy podać kolejne cztery wartości (wartości znajdujące się przed znakiem / będą oznaczały wielkość zaokrąglenia rogów w poziomie, a wartości znajdujące się po znaku / będą oznaczały wielkość zaokrąglenia rogów w pionie). Ponadto wartości parametru radius możemy podawać według zasady formuły czterech wartości (zasada ta tyczy się również ewentualnych wartości występujących po znaku /).

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru obszaru pierwotnego, którego kształt chcemy zmienić (wartość zaokrąglenia rogu w poziomie względem aktualnego rozmiaru szerokości wspomnianego obszaru, a wartość zaokrąglenia rogu w pionie względem aktualnego rozmiaru wysokości wspomnianego obszaru)

Wartość domyślna

0

inset(45px 60px 75px 90px round 12px 14px 16px 18px /20px 22px 24px 26px)

zmiana kształtu obszaru wnętrza elementu HTML za pomocą funkcji inset()

Występowanie funkcji inset()

  1. clip-path
  2. shape-outside

Przykład funkcji inset()

  clip-path:inset(15px 30px 45px 60px);
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt prostokąta, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "inset()", w której to funkcji zostały użyte następujące wartości: "15px 30px 45px 60px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip-path:inset(15px 30px 45px 60px);
        -webkit-clip-path:inset(15px 30px 45px 60px);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

Interpretacja funkcji inset()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .