css 文本特效,5个CSS3文本特效集

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Montserrat:700|Oswald|Fredoka+One|Patua+One|Oswald);

section {

width: 100%;

text-align: center;

padding: 50px 0;

font-size: 10rem;

}

span {

display: inline-block;

}

.cmyk {

background: url(//stephy.mccdgm.net/images/patterns/lightpaperfibers.png);

}

.cmyk span {

color: 000;

font-family: 'Fredoka One', sans-serif;

text-shadow: 0.25rem -0.25rem rgba(255, 0, 255, 0.75), -0.25rem -0.25rem rgba(0, 255, 255, 0.75), 0 0.5rem rgba(255, 255, 0, 0.75);

}

.skewed {

background: url(//stephy.mccdgm.net/images/patterns/dark_wood.png) #2b2b2b;

}

.skewed span {

font-family: Oswald, sans-serif;

font-size: 6rem;

text-transform: uppercase;

padding: 0 25px;

/* to extend the border past the text */

margin: 80px 0;

background: #FFDF00;

box-shadow: 0 0 0px 10px #FFDF00;

border: 10px solid #fff;

-webkit-transform: rotate(-22.5deg) skew(-22.5deg);

-ms-transform: rotate(-22.5deg) skew(-22.5deg);

transform: rotate(-22.5deg) skew(-22.5deg);

}

.thin-shade {

background: #89DFB8;

font: 6rem 'Montserrat', sans-serif;

text-transform: uppercase;

letter-spacing: 0.35rem;

color: #F7EB98;

text-shadow: -4px 4px 0 #89DFB8, -6px 6px 0 rgba(255, 255, 255, 0.5);

}

.candy {

background: #D74386;

}

.candy span {

position: relative;

font-family: 'Patua One', cursive;

color: transparent;

z-index: 0;

}

.candy span:before,

.candy span:after {

content: 'Candy';

position: absolute;

left: 0;

}

.candy span:before {

color: #FF63AA;

background-size: 50px 50px;

background-color: #FF63AA;

background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.candy span:after {

content: 'Candy';

position: absolute;

left: 0;

z-index: -1;

text-shadow: -6px 6px 0 #D8347F, -5px 5px 0 #D8347F, -4px 4px 0 #D8347F, -3px 3px 0 #D8347F, -2px 2px 0 #D8347F, -1px 1px 0 #D8347F, -2px 5px 15px #000;

}

.pressed {

background: #333 url(//stephy.mccdgm.net/images/patterns/gray_sand.png);

}

.pressed span {

color: transparent;

font-family: 'Oswald', sans-serif;

position: relative;

z-index: 0;

}

.pressed span:before,

.pressed span:after {

content: 'Pressed';

position: absolute;

left: 0;

color: #222;

}

.pressed span:before {

z-index: 1;

background: -webkit-linear-gradient(transparent, transparent), url(//stephy.mccdgm.net/images/patterns/dark_wall.png);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.pressed span:after {

text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.2);

z-index: -1;

}