Zestaw sześciu darmowych iconsetów, które mogą okazać się przydatne podczas tworzenia stron internetowych - głównie dla designerów. Wszystkie iconsety dostępne do ściągnięcia.

Genericons

"Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic. Use for instant HiDPI or to easily change colors on the fly."

Źródło: http://genericons.com/#polldaddy
Download (100KB): strona autora, mirror

Simple Icons

Simple Icons na dzień dzisiejszy oferuje aż 140 ikon. Każdą z nich możemy pobrać w oryginalnym kolorze, lub jako plik *.png w najpopularniejszych rozdzielczościach od 16x16px po 1024px.
Dodatkowo, w dolnej części strony głównej znajduje się lista poszczególnych serwisów wraz z informacją o dominującym w nich kolorze. Kolory dostępne w HEX, RGB, HLS.

Źródło: http://simpleicons.org/
Download (25MB): strona autora, mirror

350 Pixel Perfect Icons

"A set of 350 pixel perfect glyphs icons, perfect for apps, websites or just about anything you can think of. You may use this icon set for both personal and commercial use, which means this resource can be used in any project without worrying about licensing."

Źródło: http://brankic1979.com/icons/
Download (500KB): strona autora, mirror

Batch

"A suite of 300+ icons for web and user interface design, which can be scaled up—or down—without loss of quality.
The download includes: PSD file (shape layers), SVGs (128x128), PNGs (16x16, 32x32, 64x64), Webfont (.eot, .ttf, .woff)."

Mamy dwie opcje downloadu ze strony autora - darmowy, lub z darowizną.
Źródło: http://adamwhitcroft.com/batch/
Download (2MB): strona autora, mirror

MFG Labs iconset

"We have designed a friendly icon set for an internal project. It is designed to be easily embeddable on a website or application using a webfont and css. We have decided to share it with everyone."

Źródło: http://mfglabs.github.io/mfglabs-iconset/
Download (130KB): strona autora, mirror

Gentleface

304 Pixel & Vector Icons

Źródło: http://gentleface.com/free_icon_set.html
Download (4MB): strona autora, mirror
Źródło: http://designhash.com/free-premium-icon-sets-designers/

Freebie: 6 Iconsets

0 Read More

Automatyczna zmiana koloru tła strony internetowej.

Źródło: http://cssdeck.com/labs/immanvel

HTML

<div class="color-background"> <div class="color-me"> <p> Play with colors </p> By Imman Vel </div> </div>

CSS

/*---------------------------------- * * Animation Background color * * Date: 22/12/2013 * Author: Imman vel * Fb User Name: Imman00vel * licence: Free * * Compatible Browsers: IE9+, Firefox 5+, Safari 5+, Opera 12+, Chrome *----------------------------------*/ .color-background { position: absolute; top: 0; left: 0; margin: 0 auto; padding: 0; height: 100%; width: 100%; animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ } @keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-webkit-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-moz-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-o-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } .color-me { position: relative; top: 35%; background-color: #fff; padding: 20px; font-size: 50px; text-align: center; letter-spacing: 3px; } .color-background .color-me p { padding: 0; margin: 0 0 -15px 0; color: #777; letter-spacing: 5px; font-size: 20px; text-transform: uppercase; }

CSS: Płynna zmiana kolorów tła

0 Read More

Wyraziste podkreślenie przyciąga uwagę. Po najechaniu na napis, podkreślenie zamienia się w subtelną ramkę.

Taki delikatny efekt już w 6 linijkach HTML :)


Źródło: http://cssdeck.com/labs/svg-hover-effect

HTML

<div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">ZACH SAUCIER</div> </svg> </div>

CSS

html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg-wrapper { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px; } .shape { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; fill: transparent; stroke: #19f6e8; border-bottom: 5px solid black; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; } .text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 32px; letter-spacing: 8px; color: #fff; top: -48px; position: relative; } .svg-wrapper:hover .shape { stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 760; }

CSS: SVG Hover Effect

0 Read More


Kod dzies. Kod szest. Opis Przykład (nazwa) Przykład (kod)
Znaki specjalne HTML
&quot; &#34; &#x22; quotation mark (znak zapytania) " "
&amp; &#38; &#x26; ampersand & &
&lt; &#60; &#x3C; less-than sign (znak mniejszy niż) < <
&gt; &#62; &#x3E; greater-than sign (znak większy niż) > >
Łacińskie znaki rozszerzone - A
&OElig; &#338; &#x152; latin capital ligature OE (duża ligatura OE) Œ Œ
&oelig; &#339; &#x153; latin small ligature oe (mała ligatura OE) œ œ
&Scaron; &#352; &#x160; latin capital letter S with caron (duża litera S z odwróconym daszkiem) © ©
&scaron; &#353; &#x161; latin small letter s with caron (mała litera s z odwróconym daszkiem) ¹ ¹
&Yuml; &#376; &#x178; latin capital letter Y with diaeresis (duża litera Y z umlautem) Ÿ Ÿ
Znaki modyfikujące poprzedzający znak
&circ; &#710; &#x2C6; modifier letter circumflex accent (daszek) ˆ ˆ
&tilde; &#732; &#x2DC; small tilde (tylda) ˜ ˜
General Punctuation
&ensp; &#8194; &#x2002; en space (spacja o szerokości 1 en = 1/2 em)    
&emsp; &#8195; &#x2003; em space (spacja o szerokości 1 em)    
&thinsp; &#8201; &#x2009; thin space (spacja o szerokości 1/5 em)    
&zwnj; &#8204; &#x200C; zero width non-joiner ‌ ‌
&zwj; &#8205; &#x200D; zero width joiner ‍ ‍
&lrm; &#8206; &#x200E; left-to-right mark (znacznik kierunku tekstu: od lewej do prawej) ‎ ‎
&rlm; &#8207; &#x200F; right-to-left mark (znacznik kierunku tekstu: od prawej do lewej) ‏ ‏
&ndash; &#8211; &#x2013; en dash (łącznik o długości 1 en = 1/2 em) – –
&mdash; &#8212; &#x2014; em dash (łącznik o długości 1 em) — —
&lsquo; &#8216; &#x2018; left single quotation mark (lewy pojedynczy cudzysłów) ‘ ‘
&rsquo; &#8217; &#x2019; right single quotation mark (prawy pojedynczy cudzysłów) ’ ’
&sbquo; &#8218; &#x201A; single low-9 quotation mark (pojedynczy cudzysłów dolny) ‚ ‚
&ldquo; &#8220; &#x201C; left double quotation mark (lewy podwójny cudzysłów) “ “
&rdquo; &#8221; &#x201D; right double quotation mark (prawy podwójny cudzysłów) ” ”
&bdquo; &#8222; &#x201E; double low-9 quotation mark (podwójny cudzysłów dolny) „ „
&dagger; &#8224; &#x2020; dagger (krzyżyk) † †
&Dagger; &#8225; &#x2021; double dagger (podwójny krzyżyk) ‡ ‡
&permil; &#8240; &#x2030; per mille sign (promil) ‰ ‰
&lsaquo; &#8249; &#x2039; single left-pointing angle quotation mark (pojedynczy lewy cudzysłów k±towy) ‹ ‹
&rsaquo; &#8250; &#x203A; single right-pointing angle quotation mark (pojedynczy prawy cudzysłów kątowy) › ›
&euro; &#8364; &#x20AC; euro sign (znak euro) € €
Łacińskie znaki rozszerzone - B
&fnof; &#402; &#x192; latin small f with hook = function = florin (mała litera f z ogonkiem) ƒ ƒ
Duże litery greckie
&Alpha; &#913; &#x391; greek capital letter alpha Α Α
&Beta; &#914; &#x392; greek capital letter beta Β Β
&Gamma; &#915; &#x393; greek capital letter gamma Γ Γ
&Delta; &#916; &#x394; greek capital letter delta Δ Δ
&Epsilon; &#917; &#x395; greek capital letter epsilon Ε Ε
&Zeta; &#918; &#x396; greek capital letter zeta Ζ Ζ
&Eta; &#919; &#x397; greek capital letter eta Η Η
&Theta; &#920; &#x398; greek capital letter theta Θ Θ
&Iota; &#921; &#x399; greek capital letter iota Ι Ι
&Kappa; &#922; &#x39A; greek capital letter kappa Κ Κ
&Lambda; &#923; &#x39B; greek capital letter lambda Λ Λ
&Mu; &#924; &#x39C; greek capital letter mu Μ Μ
&Nu; &#925; &#x39D; greek capital letter nu Ν Ν
&Xi; &#926; &#x39E; greek capital letter xi Ξ Ξ
&Omicron; &#927; &#x39F; greek capital letter omicron Ο Ο
&Pi; &#928; &#x3A0; greek capital letter pi Π Π
&Rho; &#929; &#x3A1; greek capital letter rho Ρ Ρ
&Sigma; &#931; &#x3A3; greek capital letter sigma Σ Σ
&Tau; &#932; &#x3A4; greek capital letter tau Τ Τ
&Upsilon; &#933; &#x3A5; greek capital letter upsilon Υ Υ
&Phi; &#934; &#x3A6; greek capital letter phi Φ Φ
&Chi; &#935; &#x3A7; greek capital letter chi Χ Χ
&Psi; &#936; &#x3A8; greek capital letter psi Ψ Ψ
&Omega; &#937; &#x3A9; greek capital letter omega Ω Ω
Małe litery greckie
&alpha; &#945; &#x3B1; greek small letter alpha α α
&beta; &#946; &#x3B2; greek small letter beta β β
&gamma; &#947; &#x3B3; greek small letter gamma γ γ
&delta; &#948; &#x3B4; greek small letter delta δ δ
&epsilon; &#949; &#x3B5; greek small letter epsilon ε ε
&zeta; &#950; &#x3B6; greek small letter zeta ζ ζ
&eta; &#951; &#x3B7; greek small letter eta η η
&theta; &#952; &#x3B8; greek small letter theta θ θ
&iota; &#953; &#x3B9; greek small letter iota ι ι
&kappa; &#954; &#x3BA; greek small letter kappa κ κ
&lambda; &#955; &#x3BB; greek small letter lambda λ λ
&mu; &#956; &#x3BC; greek small letter mu μ μ
&nu; &#957; &#x3BD; greek small letter nu ν ν
&xi; &#958; &#x3BE; greek small letter xi ξ ξ
&omicron; &#959; &#x3BF; greek small letter omicron ο ο
&pi; &#960; &#x3C0; greek small letter pi π π
&rho; &#961; &#x3C1; greek small letter rho ρ ρ
&sigmaf; &#962; &#x3C2; greek small letter final sigma ς ς
&sigma; &#963; &#x3C3; greek small letter sigma σ σ
&tau; &#964; &#x3C4; greek small letter tau τ τ
&upsilon; &#965; &#x3C5; greek small letter upsilon υ υ
&phi; &#966; &#x3C6; greek small letter phi φ φ
&chi; &#967; &#x3C7; greek small letter chi χ χ
&psi; &#968; &#x3C8; greek small letter psi ψ ψ
&omega; &#969; &#x3C9; greek small letter omega ω ω
Symbole greckie
&thetasym; &#977; &#x3D1; greek small letter theta symbol ϑ ϑ
&upsih; &#978; &#x3D2; greek upsilon with hook symbol ϒ ϒ
&piv; &#982; &#x3D6; greek pi symbol ϖ ϖ
Ogólne znaki wypunktowania
&bull; &#8226; &#x2022; bullet = black small circle (kropka)
&hellip; &#8230; &#x2026; horizontal ellipsis = three dot leader (trzy kropki) … …
&prime; &#8242; &#x2032; prime = minutes = feet (symbol minut i stóp) ′ ′
&Prime; &#8243; &#x2033; double prime = seconds = inches (symbol sekund i cali) ″ ″
&oline; &#8254; &#x203E; overline = spacing overscore (górna linia) ‾ ‾
&frasl; &#8260; &#x2044; fraction slash (znak ułamka) ⁄ ⁄
Symbole podobne do liter
&weierp; &#8472; &#x2118; script capital P = power set (zbiór potęgowy) ℘ ℘
&image; &#8465; &#x2111; blackletter capital I = imaginary part (część urojona) ℑ ℑ
&real; &#8476; &#x211C; blackletter capital R = real part symbol (część rzeczywista) ℜ ℜ
&trade; &#8482; &#x2122; trade mark sign (znak handlowy) ™ ™
&alefsym; &#8501; &#x2135; alef symbol = first transfinite cardinal (pierwsza nieprzeliczalna liczba porządkowa) ℵ ℵ
Strzałki
&larr; &#8592; &#x2190; leftwards arrow (strzałka w lewo)  
&uarr; &#8593; &#x2191; upwards arrow (strzałka do góry)
&rarr; &#8594; &#x2192; rightwards arrow (strzałka w prawo) → →
&darr; &#8595; &#x2193; downwards arrow (strzałka w dół)
&harr; &#8596; &#x2194; left right arrow (strzałka w lewo i prawo)
&crarr; &#8629; &#x21B5; downwards arrow with corner leftwards = carriage return (strzałka w dół skręcająca w lewo - znak powrotu karetki) ↵ ↵
&lArr; &#8656; &#x21D0; leftwards double arrow (podwójna strzałka w lewo) ⇐ ⇐
&uArr; &#8657; &#x21D1; upwards double arrow (podwójna strzałka w górê) ⇑ ⇑
&rArr; &#8658; &#x21D2; rightwards double arrow (podwójna strzałka w prawo) ⇒ ⇒
&dArr; &#8659; &#x21D3; downwards double arrow (podwójna strzałka w dół) ⇓ ⇓
&hArr; &#8660; &#x21D4; left right double arrow (podwójna strzałka w lewo i prawo) ⇔ ⇔
Operatory matematyczne
&forall; &#8704; &#x2200; for all (dla każdego) ∀ ∀
&part; &#8706; &#x2202; partial differential (pochodna częściowa) ∂ ∂
&exist; &#8707; &#x2203; there exists (istnieje) ∃ ∃
&empty; &#8709; &#x2205; empty set = null set = diameter (pusty zbiór) ∅ ∅
&nabla; &#8711; &#x2207; nabla = backward difference ∇ ∇
&isin; &#8712; &#x2208; element of (należy do zbioru) ∈ ∈
&notin; &#8713; &#x2209; not an element of (nie należy do zbioru) ∉ ∉
&ni; &#8715; &#x220B; contains as member (zawiera jako element) ∋ ∋
&prod; &#8719; &#x220F; n-ary product = product sign (iloczyn uogólniony) ∏ ∏
&sum; &#8721; &#x2211; n-ary sumation (suma uogólniona) ∑ ∑
&minus; &#8722; &#x2212; minus sign (znak minus) − −
&lowast; &#8727; &#x2217; asterisk operator (operator mnożenia) ∗ ∗
&radic; &#8730; &#x221A; square root = radical sign (pierwiastek kwadratowy) √ √
&prop; &#8733; &#x221D; proportional to (proporcjonalny do) ∝ ∝
&infin; &#8734; &#x221E; infinity (nieskończoność) ∞ ∞
&ang; &#8736; &#x2220; angle (kąt) ∠ ∠
&and; &#8743; &#x2227; logical and = wedge (iloczyn logiczny) ∧ ∧
&or; &#8744; &#x2228; logical or = vee (suma logiczna) ∨ ∨
&cap; &#8745; &#x2229; intersection = cap (część wspólna zbiorów) ∩ ∩
&cup; &#8746; &#x222A; union = cup (suma zbiorów) ∪ ∪
&int; &#8747; &#x222B; integral (całka) ∫ ∫
&there4; &#8756; &#x2234; therefore (zatem) ∴ ∴
&sim; &#8764; &#x223C; tilde operator = varies with = similar to (operator tylda, zmienia się z, podobny do) ∼ ∼
&cong; &#8773; &#x2245; approximately equal to (w przybliżeniu równy) ≅ ≅
&asymp; &#8776; &#x2248; almost equal to = asymptotic to (prawie różny, asymptotyczny do) ≈ ≈
&ne; &#8800; &#x2260; not equal to (nie równy) ≠ ≠
&equiv; &#8801; &#x2261; identical to (identyczny) ≡ ≡
&le; &#8804; &#x2264; less-than or equal to (mniejszy lub równy) ≤ ≤
&ge; &#8805; &#x2265; greater-than or equal to (większy lub równy) ≥ ≥
&sub; &#8834; &#x2282; subset of (podzbiór) ⊂ ⊂
&sup; &#8835; &#x2283; superset of (nadzbiór) ⊃ ⊃
&nsub; &#8836; &#x2284; not a subset of (nie jest podzbiorem) ⊄ ⊄
&sube; &#8838; &#x2286; subset of or equal to (jest podzbiorem lub jest równy) ⊆ ⊆
&supe; &#8839; &#x2287; superset of or equal to (jest nadzbiorem lub jest równy) ⊇ ⊇
&oplus; &#8853; &#x2295; circled plus = direct sum (suma bezpośrednia) ⊕ ⊕
&otimes; &#8855; &#x2297; circled times = vector product (iloczyn wektorowy) ⊗ ⊗
&perp; &#8869; &#x22A5; up tack = orthogonal to = perpendicular (ortogonalny, prostopadły do) ⊥ ⊥
&sdot; &#8901; &#x22C5; dot operator (operator kropka) ⋅ ⋅
Różne symbole technicze
&lceil; &#8968; &#x2308; left ceiling = apl upstile ⌈ ⌈
&rceil; &#8969; &#x2309; right ceiling ⌉ ⌉
&lfloor; &#8970; &#x230A; left floor ⌊ ⌊
&rfloor; &#8971; &#x230B; right floor ⌋ ⌋
&lang; &#9001; &#x2329; left-pointing angle bracket = bra ⟨ 〈
&rang; &#9002; &#x232A; right-pointing angle bracket = ket ⟩ 〉
Kształty geometryczne
&loz; &#9674; &#x25CA; lozenge ◊ ◊
Różne symbole
&spades; &#9824; &#x2660; black spade suit
&clubs; &#9827; &#x2663; black club suit = shamrock
&hearts; &#9829; &#x2665; black heart suit = valentine
&diams; &#9830; &#x2666; black diamond suit
Duże litery narodowe
&nbsp; &#160; &#xA0; no-break space = non-breaking space (spacja niełamalna)
&iexcl; &#161; &#xA1; inverted exclamation mark (odwrócony wykrzyknik) ¡ ¡
&cent; &#162; &#xA2; cent sign (znak centa)
&pound; &#163; &#xA3; pound sign (znak funta) £ £
&curren; &#164; &#xA4; currency sign (znak waluty) ¤ ¤
&yen; &#165; &#xA5; yen sign = yuan sign (znak jena) Ž Ž
&brvbar; &#166; &#xA6; broken bar = broken vertical bar (pionowa przerwana linia) ¦ ¦
&sect; &#167; &#xA7; section sign (znak sekcji) § §
&uml; &#168; &#xA8; diaeresis = spacing diaeresis (diereza) ¨ ¨
&copy; &#169; &#xA9; copyright sign (znak copyright) ˆ ˆ
&ordf; &#170; &#xAA; feminine ordinal indicator ª ª
&laquo; &#171; &#xAB; left-pointing double angle quotation mark = left pointing guillemet (lewy podwójny cudzysłów kątowy) « «
&not; &#172; &#xAC; not sign (znak negacji) ¬ ¬
&shy; &#173; &#xAD; soft hyphen = discretionary hyphen (miękki łącznik)
&reg; &#174; &#xAE; registered sign = registered trade mark sign (zarejestrowany znak handlowy) Ÿ Ÿ
&macr; &#175; &#xAF; macron = spacing macron = overline = APL overbar (górna linia) ¯ ¯
&deg; &#176; &#xB0; degree sign (stopień) ° °
&plusmn; &#177; &#xB1; plus-minus sign = plus-or-minus sign (plus/minus) ± ±
&sup2; &#178; &#xB2; superscript two = superscript digit two = squared (potęga 2 = do kwadratu) ² ²
&sup3; &#179; &#xB3; superscript three = superscript digit three = cubed (potêga 3 = do sześcianu) ³ ³
&acute; &#180; &#xB4; acute accent = spacing acute ´ ´
&micro; &#181; &#xB5; micro sign (znak mikro) µ µ
&para; &#182; &#xB6; pilcrow sign = paragraph sign (znak paragrafu)
&middot; &#183; &#xB7; middle dot = Georgian comma = Greek middle dot · ·
&cedil; &#184; &#xB8; cedilla = spacing cedilla ¸ ¸
&sup1; &#185; &#xB9; superscript one = superscript digit one ¹ ¹
&ordm; &#186; &#xBA; masculine ordinal indicator º º
&raquo; &#187; &#xBB; right-pointing double angle quotation mark = right pointing guillemet (podwójny prawy cudzysłów kątowy) » »
&frac14; &#188; &#xBC; vulgar fraction one quarter = fraction one quarter (ułamek 1/4) ¼ ¼
&frac12; &#189; &#xBD; vulgar fraction one half = fraction one half (ułamek 1/2) ½ ½
&frac34; &#190; &#xBE; vulgar fraction three quarters = fraction three quarters (u³amek 3/4) ¾ ¾
&iquest; &#191; &#xBF; inverted question mark = turned question mark (odwrócony pytajnik) ¿ ¿
&Agrave; &#192; &#xC0; latin capital letter A with grave = latin capital letter A grave À À
&Aacute; &#193; &#xC1; latin capital letter A with acute Á Á
&Acirc; &#194; &#xC2; latin capital letter A with circumflex  Â
&Atilde; &#195; &#xC3; latin capital letter A with tilde à Ã
&Auml; &#196; &#xC4; latin capital letter A with diaeresis Ä Ä
&Aring; &#197; &#xC5; latin capital letter A with ring above = latin capital letter A ring Å Å
&AElig; &#198; &#xC6; latin capital letter AE = latin capital ligature AE Æ Æ
&Ccedil; &#199; &#xC7; latin capital letter C with cedilla Ç Ç
&Egrave; &#200; &#xC8; latin capital letter E with grave È È
&Eacute; &#201; &#xC9; latin capital letter E with acute É É
&Ecirc; &#202; &#xCA; latin capital letter E with circumflex Ê Ê
&Euml; &#203; &#xCB; latin capital letter E with diaeresis Ë Ë
&Igrave; &#204; &#xCC; latin capital letter I with grave Ì Ì
&Iacute; &#205; &#xCD; latin capital letter I with acute Í Í
&Icirc; &#206; &#xCE; latin capital letter I with circumflex Î Î
&Iuml; &#207; &#xCF; latin capital letter I with diaeresis Ï Ï
&ETH; &#208; &#xD0; latin capital letter ETH Ð Ð
&Ntilde; &#209; &#xD1; latin capital letter N with tilde Ñ Ñ
&Ograve; &#210; &#xD2; latin capital letter O with grave Ò Ò
&Oacute; &#211; &#xD3; latin capital letter O with acute Ó Ó
&Ocirc; &#212; &#xD4; latin capital letter O with circumflex Ô Ô
&Otilde; &#213; &#xD5; latin capital letter O with tilde Õ Õ
&Ouml; &#214; &#xD6; latin capital letter O with diaeresis Ö Ö
&times; &#215; &#xD7; multiplication sign × ×
&Oslash; &#216; &#xD8; latin capital letter O with stroke = latin capital letter O slash Ø Ø
&Ugrave; &#217; &#xD9; latin capital letter U with grave Ù Ù
&Uacute; &#218; &#xDA; latin capital letter U with acute Ú Ú
&Ucirc; &#219; &#xDB; latin capital letter U with circumflex Û Û
&Uuml; &#220; &#xDC; latin capital letter U with diaeresis Ü Ü
&Yacute; &#221; &#xDD; latin capital letter Y with acute Ý Ý
&THORN; &#222; &#xDE; latin capital letter THORN Þ Þ
Małe litery narodowe
&szlig; &#223; &#xDF; latin small letter sharp s = ess-zed ß ß
&agrave; &#224; &#xE0; latin small letter a with grave = latin small letter a grave à à
&aacute; &#225; &#xE1; latin small letter a with acute á á
&acirc; &#226; &#xE2; latin small letter a with circumflex â â
&atilde; &#227; &#xE3; latin small letter a with tilde ã ã
&auml; &#228; &#xE4; latin small letter a with diaeresis ä ä
&aring; &#229; &#xE5; latin small letter a with ring above = latin small letter a ring å å
&aelig; &#230; &#xE6; latin small letter ae = latin small ligature ae æ æ
&ccedil; &#231; &#xE7; latin small letter c with cedilla ç ç
&egrave; &#232; &#xE8; latin small letter e with grave è è
&eacute; &#233; &#xE9; latin small letter e with acute é é
&ecirc; &#234; &#xEA; latin small letter e with circumflex ê ê
&euml; &#235; &#xEB; latin small letter e with diaeresis ë ë
&igrave; &#236; &#xEC; latin small letter i with grave ì ì
&iacute; &#237; &#xED; latin small letter i with acute í í
&icirc; &#238; &#xEE; latin small letter i with circumflex î î
&iuml; &#239; &#xEF; latin small letter i with diaeresis ï ï
&eth; &#240; &#xF0; latin small letter eth ð ð
&ntilde; &#241; &#xF1; latin small letter n with tilde ñ ñ
&ograve; &#242; &#xF2; latin small letter o with grave ò ò
&oacute; &#243; &#xF3; latin small letter o with acute ó ó
&ocirc; &#244; &#xF4; latin small letter o with circumflex ô ô
&otilde; &#245; &#xF5; latin small letter o with tilde õ õ
&ouml; &#246; &#xF6; latin small letter o with diaeresis ö ö
&divide; &#247; &#xF7; division sign (znak dzielenia) ÷ ÷
&oslash; &#248; &#xF8; latin small letter o with stroke = latin small letter o slash ø ø
&ugrave; &#249; &#xF9; latin small letter u with grave ù ù
&uacute; &#250; &#xFA; latin small letter u with acute ú ú
&ucirc; &#251; &#xFB; latin small letter u with circumflex û û
&uuml; &#252; &#xFC; latin small letter u with diaeresis ü ü
&yacute; &#253; &#xFD; latin small letter y with acute ý ý
&thorn; &#254; &#xFE; latin small letter thorn þ þ
&yuml; &#255; &#xFF; latin small letter y with diaeresis ÿ ÿ

Znaki specjalne (html, dec, hex)

0 Read More

W zeszłym roku zainteresowałam się Syntax Highlighter'em, którego zadaniem jest przedstawiać na stronach internetowych kod (html, css, js, c, itd.) w sposób czytelny. Na Google Code możemy znaleźć alternatywę, która jest o tyle wygodniejsza, że nie trzeba za każdym razem zaznaczać jaki język wyświetlamy - wykonuje się to automatycznie.

Sekcja HEAD

Przed zamknięciem znacznika </head> linkujemy do odpowiedniego skryptu, wstawiając:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Jeżeli chcemy skorzystać z szablonu innego niż domyślny (galeria szablonów), wówczas wpisujemy odpowiednią nazwę (w przykładzie - Sunburst):

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script>

I to tyle! Właściwie ta jedna linijka załatwia nam całą sprawę.

HTML

Teraz wystarczy nasz kod, który chcemy przedstawić na stronie, umieścić między znacznikami <pre></pre>, <code></code> lub <xmp></xmp>, pamiętając o dodaniu klasy class="prettyprint"

a skrypt wykona resztę pracy za nas. <pre class="prettyprint"> Tutaj wstawiamy nasz kod HTML, CSS, lub inny Wiele linii kodu </pre>

Jeśli w powyższym przykładzie brakuje Wam numeracji każdej linii, wystarczy dodać jedną klasę.

CSS

<style> .prettyprint ol.linenums > li { list-style-type: decimal; } </style>

HTML

<pre class="prettyprint linenums">Tutaj wstawiamy nasz kod HTML, CSS, lub inny Wiele linii kodu </pre>

Koniec :)

Linki: Galeria styli, Getting started (eng.)
Download: code.google.com

Google Code: Prettify

0 Read More
Subskrybuj: Komentarze (Atom)