Paslėptos text-shadow galimybės

Siandien koduojant dizaina prireike tam tikru text-shadow galimybiu. Mums prireiks RGBA spalvu paletes ir apimties kuri nurodoma (1-5) skaiciu pagalba.
Rezultatas yra isties ispudingas. Naudojant text-shadow teksta galime pritaikyti meniu juostoje, mygtukuose bei kitur kur tik sugalvosite.

Kaip visada paieska prasideda nuo google. Prireike siek tiek kantrybes kol radau tai ko ieskojau.
Verta pamineti kad veikia visuose narsyklese isskirus IE (Netiketa… Ar ne?)

Inset Text paplito internete gan placiai. Atrodo tikrai patraukliai.

.inset {
font-size: 72px;
color: #666;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Outset Text tekstas.

.outset {
font-size: 72px;
font-weight: bold;
color: #666;
text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
0 -2px 2px #fff, 2px 2px 2px #000,
0px 2px 2px #000, 2px 0 2px #000;
}

Vaivorikstes tipo tekstas.

.rainbow {
font-size: 72px;
font-weight: bold;
color: rgba(0, 0, 0, 0); /* сам текст невидим */
text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
9px 0 0 #f5dd08, 12px 0 0 #059444,
15px 0 0 #0287ce, 18px 0 0 #044d91,
21px 0 0 #2a1571;
}

 

Tekstas su konturu.

.stroke {
font-size: 72px;
font-weight: bold;
color: #999;
text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}

 

Neoninis tekstas.

.neon {
background: #000;
font-size: 72px;
font-weight: bold;
color: #407ec4;
text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}

 

Siuo metu labai populiarus anaglifas. Daznai pastebiu ji ir logotipuose.

.ananglyph {
font-size: 72px;
color: #333;
text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}

Turint mano pateiktas uzuominas galite patys drasiai eksperementuoti. Sekmes…

3D, CSS pamoka, CSS3, Font, text-shadow, Tipografija

HTML/CSS