{"id":1849,"date":"2016-04-17T17:15:27","date_gmt":"2016-04-17T15:15:27","guid":{"rendered":"http:\/\/blogg.improveme.se\/lolla\/?p=1849"},"modified":"2016-04-17T17:15:27","modified_gmt":"2016-04-17T15:15:27","slug":"filter-och-css","status":"publish","type":"post","link":"https:\/\/blogg.improveme.se\/lolla\/2016\/04\/17\/filter-och-css\/","title":{"rendered":"Filter och CSS."},"content":{"rendered":"
Detta avsnitt kallas filter och fokuserar p\u00e5 vad man kan \u00e5stadkomma f\u00f6r filter-effekter p\u00e5 texten. Jag ger f\u00f6rst ett exempel p\u00e5 filter-effekten och sedan vilken kod som kr\u00e4vs f\u00f6r att uppn\u00e5 respektive effekt.<\/p>\n

Gl\u00f6d\/Glow Gl\u00f6d<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n{
\nfont-family: Verdana, ’Times New Roman’, ’Sans-Serif’;
\nfont-style: italic;
\nfont-size: 10pt;
\nfont-weight: bold;
\ncolor: #000000;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nGl\u00f6d<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 35px;
\ncolor: #ffffff;
\nfilter: Glow(Color=ff6900, Strength=3);
\nwidth: 300px;
\nheight: 65px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nSkugga\/Shadow Skugga<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 35px;
\ncolor: #ffffff;
\nfilter: Glow(Color=ff6900, Strength=3);
\nwidth: 300px;
\nheight: 65px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nDroppskugga<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 35px;
\ncolor: #004080;
\nfilter: DropShadow(Color=0099cc, OffX=4, OffY=4, Positive=0);
\nwidth: 300px;
\nheight: 65px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nSuddigt\/Blur<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 35px;
\nfont-weight: bold;
\ncolor: #004080;
\nfilter: Blur(Add=1, Direction=130, Strength=8);
\nwidth: 300px;
\nheight: 65px;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nSuddigt<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 35px;
\nfont-weight: bold;
\ncolor: #004080;
\nfilter: Blur(Add=1, Direction=0, Strength=13);
\nwidth: 300px;
\nheight: 65px;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nFlipp\/Flip<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 25px;
\ncolor: #004080;
\nfilter: FlipV;
\nwidth: 300px;
\nheight: 65px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nFlip<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 25px;
\ncolor: #004080;
\nfilter: FlipH;
\nwidth: 200px;
\nheight: 65px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nToning\/Alpha<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 65px;
\ncolor: #004080;
\nfilter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50, StartY=50, FinishX=0, FinishY=100);
\nwidth: 300px;
\nheight: 110px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nToning<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 65px;
\ncolor: #004080;
\nfilter: Alpha(Opacity=100, FinishOpacity=0, Style=2);
\nwidth: 300px;
\nheight: 100px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nV\u00e5gor\/Wave<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 65px;
\nfilter: Wave(Add=1, Freq=6, LightStrength=4, Phase=5, Strength=4);
\ncolor: #004080;
\nwidth: 300px;
\nheight: 100px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p>\n<\/div>\n

\n
\nV\u00e5gor<\/strong>
\nKoden till ovanst\u00e5ende:<\/em>
\n<style type=”text\/css”><\/p>\n

<!–
\n.box {
\nfont-size: 65px;
\nfilter: Wave(Add=0, Freq=6, LightStrength=3, Phase=7, Strength=4);
\ncolor: #004080;
\nwidth: 300px;
\nheight: 100px;
\nfont-weight: bold;
\n}
\n–><\/p>\n

<\/style><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

Detta avsnitt kallas filter och fokuserar p\u00e5 vad man kan \u00e5stadkomma f\u00f6r filter-effekter p\u00e5 texten. Jag ger f\u00f6rst ett exempel p\u00e5 filter-effekten och sedan vilken kod som kr\u00e4vs f\u00f6r att uppn\u00e5 respektive effekt. Gl\u00f6d\/Glow Gl\u00f6d Koden till ovanst\u00e5ende: <style type=”text\/css”> <!– { font-family: Verdana, ’Times New Roman’, ’Sans-Serif’; font-style: italic; font-size: 10pt; font-weight: bold; color: … L\u00e4s mer<\/a><\/p>\n","protected":false},"author":9652,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[81,2010,2009],"class_list":["post-1849","post","type-post","status-publish","format-standard","hentry","category-design-och-html","tag-bloggar","tag-css","tag-filter"],"_links":{"self":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/posts\/1849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/users\/9652"}],"replies":[{"embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/comments?post=1849"}],"version-history":[{"count":0,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/posts\/1849\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/media?parent=1849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/categories?post=1849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/tags?post=1849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}