Бухвалова Юлия, Livejournal
Скопируйте ссылку на флаг в адресную строку браузера, включите флаг и перезапустите браузер.
text-shadow: -1px -1px green, 1px -1px green,
1px 1px green, -1px 1px green,
-2px -2px green, 2px -2px green,
2px 2px green, -2px 2px green,
-3px -3px green, 3px -3px green,
3px 3px green, -3px 3px green,
-4px -4px green, 4px -4px green,
4px 4px green, -4px 4px green,
-5px -5px green, 5px -5px green,
5px 5px green, -5px 5px green,
-6px -6px green, 6px -6px green,
6px 6px green, -6px 6px green,
-7px -7px green, 7px -7px green,
7px 7px green, -7px 7px green;
@function shadows($max: 5, $color: white){
$out: null;
@for $i from 0 through $max {
@if ($i > 0) {
$pos: #{$i}px;
$pos-n: -$pos;
$shadow-t-l: $pos-n $pos-n $color;
$out: append( $out, $shadow-t-l, comma );
$shadow-t-r: $pos $pos-n $color;
$out: append( $out, $shadow-t-r, comma );
$shadow-b-r: $pos $pos $color;
$out: append( $out, $shadow-b-r, comma );
$shadow-b-l: $pos-n $pos $color;
$out: append( $out, $shadow-b-l, comma );
}
}
@return $out;
}
http://fonts.googleapis.com/css?family=Rancho&effect=3d
<div class="font-effect-3d">текст</div>
.text {
-webkit-text-stroke: .05em orangered;
}
.text {
background: url(tulips.jpg) 50% 50%;
}
.text {
background: url(tulips.jpg) 50% 50%;
-webkit-background-clip: text;
}
.text {
background: url(tulips.jpg) 50% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<svg viewBox="0 0 1024 620">
<text x="50%" y="50%" dy=".2em" text-anchor="middle">
текст
</text>
</svg>
<text stroke="crimson" stroke-width="3">текст</text>
.text {
stroke: crimson;
stroke-width: 3;
}
.text {
stroke: orangered;
stroke-width: 4;
stroke-dasharray: 50 30 20 10;
}
<text fill="url(#gr-blue)">текст</text>
.text {
fill: url(#gr-blue);
}
<linearGradient id="gr-blue"
x1="0" y1="0" x2="100%" y2="100%">
<stop stop-color="hsl(160, 100%, 80%)" offset="10%"/>
<stop stop-color="hsl(250, 100%, 30%)" offset="90%"/>
</linearGradient>
<pattern id="pt-circle" width="50" height="50"
viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
<circle r="18" cx="25" cy="25"
fill="yellowgreen" stroke="green" stroke-width="7"/>
</pattern>
<pattern id="pt-wood" width="300" height="300"
patternUnits="userSpaceOnUse">
<image xlink:href="wood.jpg"
width="300" height="300"/>
</pattern>
<mask id="mask-text"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<text x="50%" y="50%" dy=".2em" text-anchor="middle"
fill="#FFF">
текст
</text>
</mask>
<g>
<rect fill="url(#pt-wood)" width="100%" height="100%"/>
</g>
<g mask="url(#mask-text)">
<rect fill="url(#pt-wood)" width="100%" height="100%"/>
</g>
.text {
fill: none;
}
.text {
fill: transparent;
}
.text {
fill: none;
}
.text {
fill: transparent;
}
.text {
mix-blend-mode: lighten;
}