Pomocí position: absolute |
Vytvořit několik vrstev textu, pomocí position:absolute nastavit požadované umístění. Zrcadlení Zrcadlení |
<div class="reflect_1" style="border-top: 1px solid #f9f5ed; border-bottom: 6px solid #f9f5ed; color: rgb(102, 102, 102); font-size: 40px; line-height: 0.2em; margin: 0pt; padding: 0pt 0pt 0pt 10px;"> Zrcadlení</div> <div class="reflect_2" style="border-top: 1px solid #fff; color: rgb(170, 170, 170); font-size: 40px; line-height: 0.7em; margin: 0pt; padding: 0pt 0pt 0pt 10px;"> Zrcadlení</div> |
Příklady, ukázkyPříklady, ukázky |
<div style="position: relative; top: 0px; font-family: Verdana; font-size: 40px; left: 50px; color: #ddcca3;"> Příklady, ukázky <span style="position: absolute; font-family: Verdana; font-size: 23px; left: -30px; color: #565656; opacity: 0.6; top: 24px;"> Příklady, ukázky </span> </div> |
Vlastnost CSS text-shadow. |
Není podporována Internet Explorerem. Vlastnost má čtyři parametry: text-shadow: X Y hloubka barva; 1. X - horizontální posun stínu k textu (kladná hodnota - doprava, negativní - vlevo) 2. Y - vertikální posun stínu k textu (pozitivní - dolů, negativní - nahoru) 3. hloubka - čím vyšší hodnota, tím vyšší stupeň rozostření 4. zřejmé, barva stínu. |
CSS stín textu |
p {font-size: 4em; text-shadow: 1px 1px 1px #000; color: #f9f5ed;} |
stín na tmavém pozadí |
p {font-size: 4em; text-shadow:4px 4px 5px #AAAAAA; color:#000;} |
pozadí a text stejné |
p {font-size: 4em; text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;} |
zatemnění |
p {font-size: 4em; text-shadow: 1px 4px 0 #456; color: #FFF;} |
obtékaný |
p {font-size: 4em; text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: rgba(102, 0, 102, 0.5);} |
google.com |
p {font-size: 4em; text-shadow: 4px 2px black; color: #ece2ca;} |
Můžete přidat dva nebo více stínů, oddělené čárkami: |
mnoho odstínů |
p {font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;} |
obrys |
p {font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;} |
ryté písmo |
p {font-size: 4em; text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;} |
Reliéf |
p {font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;} |
retro |
p {background-color: #EEE; color: #707070; font-family: Times New Roman; font-size: 7em; margin: 0 auto; text-transform: uppercase; text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;} |
neon |
p {background-color: #000; padding: 20px 0; margin: 20px auto; font-family: Garamond; font-size: 7em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;} |
Inset |
p {background-color: #474747; margin: 20px auto; font-family: Helvetica; font-size: 7em; text-transform: uppercase; color: #222; text-shadow: 0px 2px 3px #666;} |
Arial |
p {background-color: #fff; margin: 20px auto; font-family: Arial; font-size: 7em; text-transform: uppercase; color: rgba(0,168,255,0.5); text-shadow: 8px 8px 0 rgba(255,0,180,0.5);} |
Fire |
p {background-color: #000; padding:90px 0 0; margin: 20px auto; font-family: Arial; font-size: 200px; text-transform: uppercase; color: #fff; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;} |
Game |
p {background-color: #eee; text-align: left; padding: 10px 0 50px 35px; margin: 20px auto; font-family: Arial; font-size:7em; text-transform: uppercase; color: #fff; text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;} |
Vrstevnatý |
p {color: #4c6271; font-family: Arial; font-size: 7em; margin: 20px auto; text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a; } |
Vrstevnatý |
p {color: #FE6602; font-family: 'Aclonica',serif; font-size: 7em; margin: 20px auto; text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135; } |
Takový |
p {color: #fff; font: 7em 'ChunkFiveRegular'; margin: 20px auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);} |
Odkaz |
<style type="text/css"> a.text:link, a.text:visited { color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; font: 60px/60px 'ChunkFiveRegular'; display: inline-block; } a.text:hover { text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;text-decoration:none; } a.text:active { text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135; margin-top: 4px; line-height: 56px; color: #dcdcdc; }</style> <a href="URL" class="text">Odkaz</a> |
stín CSS |
<style type="text/css"> .bgrd {width:600px; height:400px; background:#aaa; margin:0 auto; text-align:center; border-radius:10px;text-indent: 0px; } p.skew { font-family: 'times new roman', serif; padding:0; margin:200px 0 0 150px; position:relative; color:#fff; font-size: 100px; text-shadow: -1px -1px 0 #f8f8f8, -2px -2px 0 #f0f0f0, -3px -3px 0 #e8e8e8, -4px -4px 0 #e0e0e0, -5px -5px 0 #d8d8d8, -6px -6px 0 #d0d0d0, -7px -7px 0 #c8c8c8; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; -0-transform-origin: bottom left; transform-origin: bottom left; -moz-transform: skewY(-15deg); -webkit-transform: skewY(-15deg); -ms-transform: skewY(-15deg); -o-transform: skewY(-15deg); transform: skewY(-15deg); position: absolute; z-index: 100; } .skew:before { content:attr(title); color:transparent; position:absolute; left:0; bottom:0; text-shadow: 0 0 5px rgba(0,0,0,.25); 0 0 10px rgba(0,0,0,.2); 0 0 20px rgba(0,0,0,.15); 0 0 40px rgba(0,0,0,.1); -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; -0-transform-origin: bottom left; transform-origin: bottom left; -moz-transform: skewX(60deg); -webkit-transform: skewX(60deg); -ms-transform: skewX(60deg); -o-transform: skewX(60deg); transform: skewX(60deg); z-index:-1; } </style> <div class="bgrd"> <p class="skew" title="stín CSS">stín CSS</p> </div> |