Ostatnio edytowany:

shape-image-threshold

Autor: Virtual Patriot

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.

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

nie

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

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

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 "http://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ść "http://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 {
        padding:1em;
        font-size:0.8em;
        background-color:#CBFFFF;
      }

      #float {
        shape-outside:url(http://webkod.pl/files/css/obrazek-07.png);
        shape-image-threshold:0.5;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        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
    </div>

  </body>
</html>