Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Emoji i kaskadowe arkusze stylów

poniedziałek,

Emoji i kaskadowe arkusze stylów

Robiące w Internecie coraz większą furorę emoji można wstawiać do strony internetowej również za pomocą stylów CSS.

W CSS3 pojawiły się możliwości pozwalające wstawiać do dokumentu dodatkową treść z poziomu arkusza stylów. Pseudo-elementy :before i :after dodane do selektora elementu stają się nową zawartością znajdującą się odpowiednio na początku i na końcu wewnątrz wskazanego znacznika. Kluczową własnością kaskadowych arkuszy stylów w tym przypadku jest „content”, która definiuje wstawianą treść. Najczęściej technika ta jest wykorzystywana do wprowadzania kosmetycznych zmian danego elementu.

Przykład emoji dołączonego za pomocą stylów CSS:

CKZiU

<span style="font-size:40px;">CKZiU</span>

Pierwszy sposób na zamieszczenie emoji w kodzie CSS jest prosty i sprowadza się do wklejania skopiowanego wcześniej symbolu.

span:before,
span:after {
  content: "😉";
}

W niektórych sytuacjach prezentowany wcześniej sposób się nie sprawdzi, istnieje jednak bardzo proste alternatywne rozwiązanie. Znak Unicode w CSS można zapisać, posługując się jego kodem numerycznym zapisanym w systemie szesnastkowym (dec). Należy dodać na jego początku przedrostek „\” (backslash) tak jak w przykładowym kodzie. Ewentualnie przedrostkiem może być „\0”.

span:before,
span:after {
  content: "\1F609";
}

Tabela wybranych symboli emoji

Symbol Nazwa Kod hex Kod dec
🦄UNICORN FACE1F984129412
🐮COW FACE1F42E128046
🐂OX1F402128002
🐃WATER BUFFALO1F403128003
🐄COW1F404128004
🐷PIG FACE1F437128055
🐖PIG1F416128022
🐗BOAR1F417128023
🐽PIG NOSE1F43D128061
🐏RAM1F40F128015
Artykuł: DRAM Speculative Leadoff

DRAM Speculative Leadoff

Artykuł: Burst Mode DMA

Burst Mode DMA

Artykuł: Tryby DMA

Tryby DMA

Artykuł: DMA w kontekście historycznym

DMA w kontekście historycznym

Artykuł: Bezpośredni dostęp do pamięci

Bezpośredni dostęp do pamięci

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły