{"id":2067,"date":"2017-01-16T21:21:52","date_gmt":"2017-01-17T03:21:52","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2067"},"modified":"2017-01-16T21:21:52","modified_gmt":"2017-01-17T03:21:52","slug":"css3s-tilted-text-effect","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css3s-tilted-text-effect\/","title":{"rendered":"CSS3\u2019s Tilted Text Effect"},"content":{"rendered":"

Here\u2019s a cool text effect that can be achieved easily using CSS3: tilted text. To create this effect, you\u2019ll need to create to divs \u2014 one for the text that is to be tilted to the left, and another for the text that is to be tilted to the right. Your HTML should look something like this:<\/span><\/p>\n

<div id=\"container\">\n<\/span><div id=\"tilted-left\">TILTED<\/div>\n<div id=\"tilted-right\">TEXT<\/div>\n<\/div><\/pre>\n
To style this properly, you\u2019ll have to use the transform property with rotate values (which you can customize depending on just how titled you want your text to be). You can also use the text-shadow property to give the text a slight 3D effect. Here\u2019s what your CSS needs to look like:<\/span><\/p>\n
#tilted-left {\n font-size: 100px;\n color: #fff;\n text-shadow:#fff 1px 1px 0,\n #f1f1f1 2px 2px 0,\n #f2f2f2 3px 3px 0,\n #f3f3f3 4px 4px 0,\n #f4f4f4 5px 5px 0,\n #f5f5f5 6px 6px 0;\n transform: rotate(-4deg) rotateX(10deg) skewX(2deg);\n float: left;\n}\n \n#tilted-right {\n font-size: 100px;\n color: #fff;\n text-shadow:#fff 1px 1px 0,\n #f1f1f1 2px 2px 0,\n #f2f2f2 3px 3px 0,\n #f3f3f3 4px 4px 0,\n #f4f4f4 5px 5px 0,\n #f5f5f5 6px 6px 0;\n transform: rotate(4deg) rotateX(-10deg) skewX(-2deg);\n float: right;\n}<\/pre>\n
Play around with the text-shadows, colors, and degrees of rotations to customize this tilted text to your own liking.<\/span><\/p>\n
\"Screen<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Here\u2019s a cool text effect that can be achieved easily using CSS3: tilted text. To create this effect, you\u2019ll need to create to divs \u2014 one for the text that is to be tilted to the left, and another […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2797,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2067"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2067"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2067\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2797"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}