obrazek - Kurs HTML i CSS
Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}...korzystamy również z przycinania tła. Możliwe 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}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) Cień na zewnątrz elementu: selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... } Cień wewnątrz elementu: selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... } Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane): poziom - przesunięcie cienia w prawo (ujemne wartości...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "obcięcie" należy podać podziałkę (domyślnie: 100%), według której obrazek zostanie pocięty na siatkę, składającą się z dziewięciu części: czterech narożników, czterech krawędzi i środka. Możliwe jest przy tym podanie: jednej wartości - określa jednakowe odległości cięć linii siatki od wszystkich krawędzi obrazka; jeżeli cała grafika będzie kwadratowa i jako obcięcie podamy wartość trzy razy mniejszą od...
HTML dla zielonych / Ćwiczenia...pogrubienia. Dodaj do strony ilustracje. W przypadku zdjęć i grafik należy szczególnie pamiętać o poszanowaniu praw autorskich! Nie każdy obrazek można sobie swobodnie skopiować na swoją stronę, jeżeli autor nie wyraził na to zgody. Jeśli tworzysz stronę o sobie, może to być po prostu Twoje zdjęcie. Stwórz podstronę o nazwie linki.html (nowy plik HTML w edytorze) i umieść do niej odsyłacz na stronie głównej (czyli w pliku index.html). O tym co to są i jak się tworzy podstrony...
- Nagłówek i treść HTML / Ćwiczenia
...wystarczających umiejętności graficznych, przykładową ikonę możesz wyszukać w internecie. Pamiętaj o poszanowaniu praw autorskich! Nie każdy obrazek można swobodnie skopiować sobie na swoją stronę, jeżeli autor nie wyraził na to zgody. Jednym z serwisów, który udostępnia m.in. darmowe ikony, jest Iconfinder - przy wyszukiwaniu użyj filtra "free". Zwróć również uwagę na pole "License type" - w niektórych przypadkach może być konieczne wstawienie na stronie linku do strony autora...
- Komendy CSS3 / Obrazki CSS
...flip ] Inicjalizacja from-image Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie image-rendering Określenie jak przeskalozwać obrazek Wartość auto | smooth | high-quality | crisp-edges | pixelated Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie object-fit Dopasowywanie rozmiaru obiektów Wartość fill | contain | cover | none | scale-down Inicjalizacja fill Zastosowanie elementy zastępowane Dziedziczenie nie Procenty nie...
- Tekst CSS / Tryb pisania {writing-mode}
...poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej. Inaczej sprawa się ma w przypadku elementów zastępowanych powiązanych z tekstem, które nie są ładowane z zewnętrznego pliku. W takiej sytuacji ułożenie tekstu w ich obrębie powinno być zgodne z ustalonym trybem pisania. To zachowanie nie jest jednak wymagane...
HTML5 / Dekodowanie obrazków <img decoding>...przetwarzania obrazka. auto - wartość domyślna (zależy od przeglądarki) Podpowiada przeglądarce, w jaki sposób najlepiej wyświetlić dany obrazek. Nadanie atrybutu decoding="sync" może spowolnić wyświetlanie całej strony - zwłaszcza w przypadku dużych obrazków. Pytania i odpowiedzi <img decoding> Co to znaczy "dekodowanie"? Dekodowanie odnosi się do procesu przekształcania danych z jednego formatu na inny, zrozumiały dla docelowego systemu lub aplikacji. W kontekście...
- HTML5 / Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>
(interpretuje: Opera 87, Chrome 101) Obrazek: <img src="lokalizacja" fetchpriority="priorytet"> Zewnętrzny zasób: <link href="lokalizacja" fetchpriority="priorytet"> Zewnętrzny skrypt JavaScript: <script src="lokalizacja" fetchpriority="priorytet"></script> lokalizacja Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób priorytet Należy wybrać jedną z następujących wartości: high - wskazany zasób załaduje się wcześniej względem innych...
- HTML5 / Rozmiary przycisku obrazkowego <input "image" width height>
...specyfikacji HTML 4.01. Od teraz można już ustawiać rozmiary przycisku obrazkowego służącego do wysyłania formularza. Jeśli tego nie zrobimy, zanim obrazek się załaduje, przeglądarka zarezerwuje dla niego na stronie domyślną wolną przestrzeń. Zwykle nie będzie ona dokładnie odpowiadać rzeczywistym rozmiarom grafiki. Dlatego po załadowaniu obrazka, elementy strony w pobliżu i poniżej niego mogą przeskoczyć w dół lub na bok. Jeśli użytkownik dokładnie w tym czasie próbował kliknąć w coś na...