docZadanie (Cień pudełka) Właściwość box
download 
Reklamacja Transkrypt
Zadanie (Cień pudełka) Właściwość box
Zadanie (Cień pudełka)
Właściwość box-shadow wyświetla cień wokół pudełka elementu.
Oprócz koloru we właściwości tej należy podać przynajmniej jedną z dwóch pierwszych
wartości przedstawionych poniżej.
przesunięcie w poziomie – jeżeli wpiszemy wartość ujemną, to cień będzie
umieszczony z lewej strony pudełka.
przesunięcie w pionie – jeżeli wpiszemy wartość ujemną, to cień będzie umieszczony
powyżej pudełka
wielkość rozmazania – jeżeli pominiemy tą wartość, to cień będzie jednolity,
podobnie jak obramowanie elementu
rozpiętość cienia – jeżeli podamy tą wartość i będzie ona dodatnia, to cień będzie się
rozchodził we wszystkich kierunkach na zewnątrz elementu. W przypadku podania
wartości ujemnej zostanie on zmniejszony.
wewnątrz elementu – jeżeli przed wszystkimi wartościami umieścimy słowo
inset, to cień zostanie wyświetlony wewnątrz elementu.
Stwórz plik html i css. W pliku html wpisz
<body>
<p class="cien1"></p>
<p class="cien2"></p>
<p class="cien3"></p>
<p class="cien4"></p>
<p class="cien5"></p>
</body>
W pliku css wpisz
.cien1{
width:100px;
height:100px;
border: 1px solid black;
box-shadow: 5px 5px 10px red;
}
Wypróbuj różne możliwości. Na przykład
Uzyskany efekt
Zadanie (Zaokrąglone wierzchołki)
Właściwość border-radius tworzy zaokrąglone wierzchołki pudełek dowolnych
elementów. Jej wartość określa długość promienia zaokrąglonego wierzchołka i jest
podawana w pikselach.
Stwórz plik html i css. W pliku html wpisz
<body>
<p>
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle
poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do
wypełnienia tekstem próbnej książki.
</p>
</body>
Uzyskany efekt
Natomiast w pliku css wpisz
p{
border: 8px solid red;
padding: 20px;
width: 250px;
border-radius: 20px;
}
Kształty eliptyczne
Aby tworzyć bardziej złożone kształty można określić różne długości dla poziomej oraz
80px
pionowej osi zaokrąglonego wierzchołka elementu.
50px
border-radius: 80px 50px;
Można też określić parametry jednego, wybranego wierzchołka
border-top-left-radius: 100px 50px;
Będzie okrąg, jeżeli utworzysz kwadratowy element
i przypiszesz włąściwości border-radius wartość
odpowiadającą długości jego krawędzi
