Content-Length: 799560 | pFad | http://kachibito.net/web-design/css3-text-shadow-sample.html

CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net

CSS3のtext-shadowを使ったテキスト装飾のサンプル集

Ads

たまに使うので自分用にメモします。
css3のtext-shadow等を使用した
テキスト装飾のサンプルコードの
備忘録です。工夫すればいろいろ
と作れるんでしょうけど、とりあえず
よく使うものをピックアップします。

自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。

CSS3 text-shadow sample

いろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。

Default

Love & Peace
color: #616161 ;
font-family: 'Bevan', serif;
font-size: 50px ;
background: #3b3b3b ;

Drop Shadow

Love & Peace
.dropshadow{
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

Letter Press

Love & Peace
text-shadow: 
-1px -1px 1px rgba(0, 0, 0, 0.4), 
1px 1px 1px rgba(255, 255, 255, 0.5);

Emboss

Love & Peace
text-shadow: 
1px 1px 1px rgba(0, 0, 0, 0.6), 
-1px -1px 1px rgba(255, 255, 255, 0.5);

Double Shadow

Love & Peace
text-shadow: 
2px 2px 0px #939393, 
4px 4px 0px #1c1c1c;

Outline

Love & Peace
color: #3b3b3b;
text-shadow: 
-1px -1px 0px #5c5c5c, 
1px -1px 0px #5c5c5c, 
1px 1px 0px #5c5c5c, 
-1px 1px 0px #5c5c5c;

Block

Love & Peace
text-shadow: 
-1px 0px #2f2f2f, 
0px -1px #2f2f2f, 
1px -2px #2f2f2f, 
2px -3px #2f2f2f, 
3px -4px #2f2f2f, 
4px -5px #2f2f2f, 
5px -6px #2f2f2f,
0px 1px #2f2f2f, 
1px 0px #2f2f2f, 
2px -1px #2f2f2f, 
3px -2px #2f2f2f, 
4px -3px #2f2f2f, 
5px -4px #2f2f2f, 
6px -5px #2f2f2f;

Glowing

Love & Peace
text-shadow: 
0 0 25px #edf8ff, 
0 0 20px #edf8ff, 
0 0 0.40px #edf8ff;

Soft Emboss

Love & Peace
color: rgba(0,0,0,0.6);
text-shadow: 
2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);

Floating

Love & Peace

text-shadow: 0 15px 10px rgba(0,0,0,0.5);

Blot

Love & Peace
text-shadow: 
4px 4px 1px rgba(0, 0, 0, 0.5),
-4px 4px 1px rgba(0, 0, 0, 0.6),
4px -4px 1px rgba(0, 0, 0, 0.6),
-4px -4px 1px rgba(0, 0, 0, 0.5);

Fade

Love & Peace
color: rgba(0,0,0,0);
text-shadow:
2px 8px 6px rgba(0,0,0,0.9),
0px -5px 35px rgba(255,255,255,0.3);

3D Text

Love & Peace
text-shadow: 
0 1px 0 #222, 
0 2px 0 #5e5e5e,
0 3px 0 #111,
0 4px 0 #5e5e5e,
0 5px 0 #000,
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);

Back Light

Love & Peace
color: rgba(59, 59, 59, 1);
text-shadow: 
-1px -1px 0px #5c5c5c, 
1px -1px 0px #5c5c5c, 
1px 1px 0px #5c5c5c, 
-1px 1px 0px #5c5c5c,
0px 0px 25px rgba(97, 97, 97, 0.7),
0px 0px 20px rgba(97, 97, 97, 0.7);

Retro

Love & Peace
text-shadow: 
2px 2px 0px #3b3b3b, 
3px 3px 0px #616161;

Blur

Love & Peace
color: rgba(97, 97, 97, 0.1);
text-shadow: 
0px 0px 15px rgba(97, 97, 97, 0.5), 
0px 0px 10px rgba(97, 97, 97, 0.5);

Emboss & Floating

Love & Peace

text-shadow: 0 15px 10px rgba(0,0,0,0.5),
1px 1px 1px rgba(0, 0, 0, 0.6), 
-1px -1px 1px rgba(255, 255, 255, 0.5);

Outline & Drop Shadow

Love & Peace
color: #3b3b3b;
text-shadow: 
-1px -1px 0px #5c5c5c, 
1px -1px 0px #5c5c5c, 
1px 1px 0px #5c5c5c, 
-1px 1px 0px #5c5c5c,
1px 2px 3px rgba(0, 0, 0, 0.6);

Outline & Block

Love & Peace
color: #3b3b3b;
text-shadow: 
-1px -1px 0px #5c5c5c, 
1px -1px 0px #5c5c5c, 
1px 1px 0px #5c5c5c, 
-1px 1px 0px #5c5c5c,
-1px 0px #2f2f2f, 
0px -1px #2f2f2f, 
1px -2px #2f2f2f, 
2px -3px #2f2f2f, 
3px -4px #2f2f2f, 
4px -5px #2f2f2f, 
5px -6px #2f2f2f,
0px 1px #2f2f2f, 
1px 0px #2f2f2f, 
2px -1px #2f2f2f, 
3px -2px #2f2f2f, 
4px -3px #2f2f2f, 
5px -4px #2f2f2f, 
6px -5px #2f2f2f,
7px -6px #2f2f2f,
8px -7px #2f2f2f;

いくつかに該当するけど隠しテキスト扱いされないのかなこれ。

以上メモ書きでした。カラーコードは便宜変更してください。多くは以下を参考にしています。

CSS文字装飾のバリエーション(12パターン) – jsdo.it
12 Fun CSS Text Shadows You Can Copy and Paste

蛇足

ちょっと遊び。

Fade transition

Love & Peace
.transition{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.fadeanime:hover{
color: rgba(0,0,0,0);
text-shadow:
2px 8px 6px rgba(0,0,0,0.9),
0px -5px 35px rgba(255,255,255,0.3);
}

3D Text transition

Love & Peace
.transition{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.dtexanime:hover{
text-shadow: 
0 1px 0 #222, 
0 2px 0 #5e5e5e,
0 3px 0 #111,
0 4px 0 #5e5e5e,
0 5px 0 #000,
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);
}

Outline & Drop Shadow transition

Love & Peace
.transition{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.out-shadowanime:hover{
color: #3b3b3b;
text-shadow:
-1px -1px 0px #5c5c5c,
1px -1px 0px #5c5c5c,
1px 1px 0px #5c5c5c,
-1px 1px 0px #5c5c5c,
1px 2px 3px rgba(0, 0, 0, 0.6);
}

Emboss & Floating transition

Love & Peace

.transition p{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.emb-floanime{
position: relative;
}
.emb-floanime p:hover{
text-shadow: 0 15px 10px rgba(0,0,0,0.5),
1px 1px 1px rgba(0, 0, 0, 0.6),
-1px -1px 1px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Cloud

Love & Peace

color:rgba(31, 31, 31, 0);
-webkit-transform:scale(0.75) skewY(-10deg);
-moz-transform:scale(0.75) skewY(-10deg);
text-shadow:
10px 20px 12px rgba(255, 255, 255, 0.7),
10px 40px 30px rgba(0, 0, 0, 1);

動かないブラウザありますです。実用性無いほうが逆に楽しいですｗ

Resources & Tools

Resource全記事 →

OSS

OSS全記事 →

AI

AI全記事 →

CSS snippet

CSS全記事 →

JavaScript snippet

JavaScript全記事 →

WordPress Code

WordPress全記事 →
'}},vars:{discoveredBrushes:null,highlighters:{}},brushes:{},regexLib:{multiLineCComments:XRegExp("/\\*.*?\\*/","gs"),singleLineCComments:/\/\/.*$/gm,singleLinePerlComments:/#.*$/gm,doubleQuotedString:/"([^\\"\n]|\\.)*"/g,singleQuotedString:/'([^\\'\n]|\\.)*'/g,multiLineDoubleQuotedString:XRegExp('"([^\\\\"]|\\\\.)*"',"gs"),multiLineSingleQuotedString:XRegExp("'([^\\\\']|\\\\.)*'","gs"),xmlComments:XRegExp("(<|<)!--.*?--(>|>)","gs"),url:/https?:\/\/[\w-.\/?%&=:@;#]*/g,phpScriptTags:{left:/(<|<)\?(?:=|php)?/g,right:/\?(>|>)/g,eof:!0},aspScriptTags:{left:/(<|<)%=?/g,right:/%(>|>)/g},scriptScriptTags:{left:/(<|<)\s*script.*?(>|>)/gi,right:/(<|<)\/\s*script\s*(>|>)/gi}},toolbar:{getHtml:function(e){function t(e,t){return B.toolbar.getButtonHtml(e,t,B.config.strings[t])}for(var n='
',r=B.toolbar.items,i=r.list,a=0,l=i.length;l>a;a++)n+=(r[i[a]].getHtml||t)(e,i[a]);return n+=""},getButtonHtml:function(t,n,r){return n=e(n),''+e(r)+""},handler:function(e){function t(e){var t=RegExp(e+"_(\\w+)"),n=t.exec(r);return n?n[1]:null}var n=e.target,r=n.className||"",i=s(g(n,".syntaxhighlighter").id),a=t("command");i&&a&&B.toolbar.items[a].execute(i),e.preventDefault()},items:{list:["expandSource","help"],expandSource:{getHtml:function(e){if(1!=e.getParam("collapse"))return"";var t=e.getParam("title");return B.toolbar.getButtonHtml(e,"expandSource",t?t:B.config.strings.expandSource)},execute:function(e){var t=o(e.id);r(t,"collapsed")}},help:{execute:function(){var e=x("","_blank",500,250,"scrollbars=0"),t=e.document;t.write(B.config.strings.aboutDialog),t.close(),e.focus()}}}},findElements:function(e,t){var n=t?[t]:i(document.getElementsByTagName(B.config.tagName)),r=B.config,a=[];if(r.useScriptTags&&(n=n.concat(A())),0===n.length)return a;for(var l=0,s=n.length;s>l;l++){var o={target:n[l],params:p(e,E(n[l].className))};null!=o.params.brush&&a.push(o)}return a},highlight:function(e,t){var n=this.findElements(e,t),r="innerHTML",i=null,a=B.config;if(0!==n.length)for(var l=0,s=n.length;s>l;l++){var o,t=n[l],u=t.target,c=t.params,g=c.brush;if(null!=g){if("true"==c["html-script"]||1==B.defaults["html-script"])i=new B.HtmlScript(g),g="htmlscript";else{var h=b(g);if(!h)continue;i=new h}o=u[r],a.useScriptTags&&(o=M(o)),""!=(u.title||"")&&(c.title=u.title),c.brush=g,i.init(c),t=i.getDiv(o),""!=(u.id||"")&&(t.id=u.id),u.parentNode.replaceChild(t,u)}}},all:function(e){m(window,"load",function(){B.highlight(e)})}};return B.Match=function(e,t,n){this.value=e,this.index=t,this.length=e.length,this.css=n,this.brushName=null},B.Match.prototype.toString=function(){return this.value},B.HtmlScript=function(e){function t(e,t){for(var n=0,r=e.length;r>n;n++)e[n].index+=t}function n(e){for(var n,a=e.code,l=[],s=r.regexList,o=e.index+e.left.length,u=r.htmlScript,c=0,g=s.length;g>c;c++)n=L(a,s[c]),t(n,o),l=l.concat(n);null!=u.left&&null!=e.left&&(n=L(e.left,u.left),t(n,e.index),l=l.concat(n)),null!=u.right&&null!=e.right&&(n=L(e.right,u.right),t(n,e.index+e[0].lastIndexOf(e.right)),l=l.concat(n));for(var h=0,g=l.length;g>h;h++)l[h].brushName=i.brushName;return l}var r,i=b(e),a=new B.brushes.Xml,l=this,s="getDiv getHtml init".split(" ");if(null!=i){r=new i;for(var o=0,u=s.length;u>o;o++)(function(){var e=s[o];l[e]=function(){return a[e].apply(a,arguments)}})();return null==r.htmlScript?(v(B.config.strings.brushNotHtmlScript+e),void 0):(a.regexList.push({regex:r.htmlScript.code,func:n}),void 0)}},B.Highlighter=function(){},B.Highlighter.prototype={getParam:function(e,t){var n=this.params[e];return d(null==n?t:n)},create:function(e){return document.createElement(e)},findMatches:function(e,t){var n=[];if(null!=e)for(var r=0,i=e.length;i>r;r++)"object"==typeof e[r]&&(n=n.concat(L(t,e[r])));return this.removeNestedMatches(n.sort(k))},removeNestedMatches:function(e){for(var t=0,n=e.length;n>t;t++)if(null!==e[t])for(var r=e[t],i=r.index+r.length,a=t+1,n=e.length;n>a&&null!==e[t];a++){var l=e[a];if(null!==l){if(l.index>i)break;l.index==r.index&&l.length>r.length?e[t]=null:l.index>=r.index&&i>l.index&&(e[a]=null)}}return e},figureOutLineNumbers:function(e){var t=[],n=parseInt(this.getParam("first-line"));return y(e,function(e,r){t.push(r+n)}),t},isLineHighlighted:function(e){var t=this.getParam("highlight",[]);return"object"!=typeof t&&null==t.push&&(t=[t]),-1!=h(t,""+e)},getLineHtml:function(e,t,n){var r=["line","number"+t,"index"+e,"alt"+(""+(0==t%2?1:2))];return this.isLineHighlighted(t)&&r.push("highlighted"),0==t&&r.push("break"),'
'+n+""},getLineNumbersHtml:function(e,t){var n="",r=a(e).length,i=parseInt(this.getParam("first-line")),l=this.getParam("pad-line-numbers");1==l?l=(""+(i+r-1)).length:1==isNaN(l)&&(l=0);for(var s=0;r>s;s++){var o=t?t[s]:i+s,e=0==o?B.config.space:S(o,l);n+=this.getLineHtml(s,o,e)}return n},getCodeLinesHtml:function(e,t){e=C(e);for(var n=a(e),r=(this.getParam("pad-line-numbers"),parseInt(this.getParam("first-line"))),e="",i=this.getParam("brush"),l=0,s=n.length;s>l;l++){var o=n[l],u=/^( |\s)+/.exec(o),c=null,g=t?t[l]:r+l;null!=u&&(c=""+u[0],o=o.substr(c.length),c=c.replace(" ",B.config.space)),o=C(o),0==o.length&&(o=B.config.space),e+=this.getLineHtml(l,g,(null!=c?''+c+"":"")+o)}return e},getTitleHtml:function(t){return t?""+e(t)+"":""},getMatchesHtml:function(e,t){function n(e){var t=e?e.brushName||a:a;return t?t+" ":""}for(var r=0,i="",a=this.getParam("brush",""),l=0,s=t.length;s>l;l++){var o,u=t[l];null!==u&&0!==u.length&&(o=n(u),i+=N(e.substr(r,u.index-r),o+"plain")+N(u.value,o+u.css),r=u.index+u.length+(u.offset||0))}return i+=N(e.substr(r),n()+"plain")},getHtml:function(t){var n,r,i,a="",s=["syntaxhighlighter"];return 1==this.getParam("light")&&(this.params.toolbar=this.params.gutter=!1),className="syntaxhighlighter",1==this.getParam("collapse")&&s.push("collapsed"),0==(gutter=this.getParam("gutter"))&&s.push("nogutter"),s.push(this.getParam("class-name")),s.push(this.getParam("brush")),t=w(t).replace(/\r/g," "),n=this.getParam("tab-size"),t=1==this.getParam("smart-tabs")?R(t,n):H(t,n),this.getParam("unindent")&&(t=P(t)),gutter&&(i=this.figureOutLineNumbers(t)),r=this.findMatches(this.regexList,t),a=this.getMatchesHtml(t,r),a=this.getCodeLinesHtml(a,i),this.getParam("auto-links")&&(a=I(a)),"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.match(/MSIE/)&&s.push("ie"),a='
'+(this.getParam("toolbar")?B.toolbar.getHtml(this):"")+''+this.getTitleHtml(this.getParam("title"))+""+""+(gutter?'
'+this.getLineNumbersHtml(t)+"":"")+''+'
'+a+""+""+""+""+""+""},getDiv:function(e){null===e&&(e=""),this.code=e;var t=this.create("div");return t.innerHTML=this.getHtml(e),this.getParam("toolbar")&&m(c(t,".toolbar"),"click",B.toolbar.handler),this.getParam("quick-code")&&m(c(t,".code"),"dblclick",X),t},init:function(e){this.id=f(),u(this),this.params=p(B.defaults,e||{}),1==this.getParam("light")&&(this.params.toolbar=this.params.gutter=!1)},getKeywords:function(e){return e=e.replace(/^\s+|\s+$/g,"").replace(/\s+/g,"|"),"\\b(?:"+e+")\\b"},forHtmlScript:function(e){var t={end:e.right.source};e.eof&&(t.end="(?:(?:"+t.end+")|$)"),this.htmlScript={left:{regex:e.left,css:"script"},right:{regex:e.right,css:"script"},code:XRegExp("(?"+e.left.source+")"+"(?.*?)"+"(?"+t.end+")","sgi")}}},B}();"undefined"!=typeof exports?exports.SyntaxHighlighter=SyntaxHighlighter:null








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://kachibito.net/web-design/css3-text-shadow-sample.html

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy