Autor publikacji
Virtual Patriot - Administrator

shape-image-threshold

Data publikacji
Ostatnio edytowano

Opis właściwości shape-image-threshold

Za pomocą właściwości shape-image-threshold możemy określić procent przezroczystości, na podstawie którego ze wskazanego przez nas obrazka może zostać utworzony kształt obszaru interesującego nas elementu HTML.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości shape-image-threshold

przeznaczenie

pływający element HTML

pozycja

static, relative

dziedziczenie

nie

wartość initial

0.0

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości shape-image-threshold

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości shape-image-threshold

liczba

Opis

Za pomocą właściwości shape-image-threshold oraz dowolnej nieujemnej liczby (z zakresu od 0.0 do 1.0) możemy określić procent przezroczystości, na podstawie którego ze wskazanego przez nas obrazka może zostać utworzony kształt obszaru interesującego nas elementu HTML.

przykładowy obrazek posiadający obszary o różnych procentach przezroczystości

Przykładowy obrazek, z którego może zostać utworzony kształt obszaru elementu HTML.

Przykład

  shape-image-threshold:0.5;
float
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, 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, 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, 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

Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu obszaru nieprzekraczającego 50 procent przezroczystości posiadanego przez obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-07.png", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-image-threshold" wraz z wartością "0.5" oraz właściwość "shape-outside" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "https://webkod.pl/files/css/obrazek-07.png".

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;
      }

      #blok {
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:url(https://webkod.pl/files/css/obrazek-07.png);
        shape-image-threshold:0.5;
        float:left;
        width:200px;
        line-height:200px;
        text-align:center;
        font-size:1.8em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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, 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>