wstawianie obrazka - Kurs HTML i CSS
Tło CSS / Zaczepienie tła obrazkowego {background-attachment}...Wielokrotne zaczepienie (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) selektor { background-attachment: zaczepienie obrazka 1, zaczepienie obrazka 2,... } Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób zaczepienia. Jeżeli pominiemy ustawienie sposobu zaczepienia następnych obrazków, przejmą one ustawienia z pierwszego. Pytania i odpowiedzi Co to "background-attachment"? background-attachment to właściwość...
- Tło CSS / Przycinanie tła {background-clip}
...jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... } Przykład {background-clip} border-box padding-box content-box
- Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}
...jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-origin: początek obrazka 1, początek obrazka 2,... } Przykład {background-origin} no-repeat; left top; border-box no-repeat; left top; padding-box no-repeat; left top; content-box
- Obramowanie CSS / Cień {box-shadow}
...rgba(0, 0, 0, 0.3);" dodaje cień z przesunięciem 3 piksele poziomo i pionowo, rozmyciem 5 pikseli i kolorystyką szaro-czarną. Jak zrobić cień z obrazka? Aby dodać cień do obrazka (<img>) w CSS, można użyć właściwości box-shadow. Przykład: <img src="obraz.jpg" style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5)" alt="Obrazek"> dodaje cień o przesunięciu 5 pikseli poziomo i pionowo, rozmyciu 10 pikseli oraz kolorystyce szaro-czarnej.
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...krawędzi ramki nie może być zbyt skomplikowana. Obrazek obramowania {border-image-source} selektor { border-image-source: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako obramowanie. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji...
- Dobre praktyki / Przykazania webmastera
...w tle elementów strony - przy pomocy stylów CSS. Dzięki temu uzyskasz możliwość przygotowania odrębnego wyglądu w postaci skórek, a raz wstawionego obrazka img już nie da się w żaden sposób podmienić (bez zmiany jego atrybutu src="..."). Zawsze wypełniaj atrybut alt="..." dla ilustracji Pamiętaj, że z Twojej strony mogą korzystać również osoby niewidome. A nawet jeśli nie, to właściwy tekst alternatywny może pomóc w podniesieniu pozycji Twojej strony w wynikach wyszukiwarek sieciowych...
- Selektory pseudoelementów CSS / Przed... :before
...tekstu generowanego przed wybranym elementem, w analogiczny sposób można tam dodać grafikę: selektor:before { content: url(ścieżka dostępu do obrazka) } Ścieżkę dostępu należy konstruować względem arkusza CSS! Przykład :before {content: url} To jest akapit, rozpoczynający się obrazkiem, pomimo że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red } To jest...
- Selektory pseudoelementów CSS / Po... :after
...Zamiast tekstu generowanego po wybranym elemencie, w analogiczny sposób można tam dodać grafikę: selektor:after { content: url(ścieżka dostępu do obrazka) } Ścieżkę dostępu należy konstruować względem arkusza CSS! Przykład :after {content: url} To jest akapit, kończący się obrazkiem, pomimo że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:after { content: " KONIEC " url(obrazek.gif); color: red } To jest akapit...
- Tekst CSS / Tryb pisania {writing-mode}
...do wierszy tabeli, ale można to zrobić w odniesieniu do komórek tabeli (th, td). Zwróć uwagę, że mimo pionowego ułożenia tekstu, orientacja obrazka nie zmienia się: To jest pierwsza linijka... ...a to jest kolejna linijka. Dla porównania to samo, ale w standardowym ułożeniu tekstu (poziomo): To jest pierwsza linijka... ...a to jest kolejna linijka. Ponadto niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy: To jest pierwsza linijka... obszar tekstowy...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...i kolor obramowania. Na przykład: <img src="obraz.jpg" style="border: 2px solid black" alt="Zdjęcie"> tworzy czarną ramkę o grubości 2 pikseli wokół obrazka.