{"id":252961,"date":"2017-03-21T05:46:32","date_gmt":"2017-03-21T12:46:32","guid":{"rendered":"http:\/\/css-tricks.com\/?p=252961"},"modified":"2017-03-21T05:46:32","modified_gmt":"2017-03-21T12:46:32","slug":"text-effects-css-little-contenteditable-trick","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/text-effects-css-little-contenteditable-trick\/","title":{"rendered":"Text Effects with CSS (and a little contenteditable trick)"},"content":{"rendered":"

Mandy Michael<\/a> has been creating some incredible text effects<\/a> with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real<\/em> web text too. Custom fonts typically, but no images, canvas, or SVG or anything like that. <\/p>\n

<\/p>\n

Take a look at this beautiful effect:<\/p>\n

See the Pen CSS only 3D paper fold text effect<\/a> by Mandy Michael (@mandymichael<\/a>) on CodePen<\/a>.<\/p>\n

The fact that it is real text makes it accessible, searchable, and of course, selectable:<\/p>\n

\"\"<\/figure>\n

Demos are an awesome place to use the contenteditable<\/code> attribute, which turns any text element into sort of like a textarea<\/code> or input<\/code>, in that then anyone can click right into it and change the text. <\/p>\n

<h1 contenteditable>Cool Title<\/h1><\/code><\/pre>\n
But because many of Mandy’s demos use pseudo elements with text that needs to match the text in the element itself, the text can get out-of-sync:<\/p>\n
\"\"<\/figure>\n
Never fear! It’s just a few lines of JavaScript to keep those bits of text in sync:<\/p>\n
var h1 = document.querySelector(\"h1\");\r\n\r\nh1.addEventListener(\"input\", function() {\r\n  this.setAttribute(\"data-heading\", this.innerText);\r\n});<\/code><\/pre>\n
The input event is real handy, as it covers any change in an element’s value, even contenteditable<\/code> elements. It has decent browser support, just no IE (Edge is fine). If you really needed this for IE, you could still get it done combining events like keyup<\/code>, paste<\/code>, and blur<\/code> and stuff. But you probably don’t need to for a little thing like this.<\/p>\n
Now we’re all good:<\/p>\n
\"\"<\/figure>\n
But before we go, let’s bask in more of Mandy’s creations:<\/p>\n
See the Pen Lines and layered css text effects <\/a> by Mandy Michael (@mandymichael<\/a>) on CodePen<\/a>.<\/p>\n
See the Pen Stripy Rainbow Text Effect<\/a> by Mandy Michael (@mandymichael<\/a>) on CodePen<\/a>.<\/p>\n
See the Pen Single element, multi coloured 3d text effect<\/a> by Mandy Michael (@mandymichael<\/a>) on CodePen<\/a>.<\/p>\n
See the Pen Split fractured text<\/a> by Mandy Michael (@mandymichael<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in […]<\/p>\n","protected":false},"author":3,"featured_media":253001,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1192],"class_list":["post-252961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-text-effect"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-21-at-8.46.14-AM.png?fit=777%2C266&ssl=1","jetpack-related-posts":[{"id":314419,"url":"https:\/\/css-tricks.com\/the-mad-magazine-fold-in-effect-in-css\/","url_meta":{"origin":252961,"position":0},"title":"The Mad Magazine Fold-In Effect in CSS","author":"Chris Coyier","date":"June 25, 2020","format":false,"excerpt":"This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/mad-magazine-fold-in.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/mad-magazine-fold-in.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/mad-magazine-fold-in.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/mad-magazine-fold-in.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/mad-magazine-fold-in.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":365946,"url":"https:\/\/css-tricks.com\/css-hover-effects-background-masks-3d\/","url_meta":{"origin":252961,"position":1},"title":"Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D","author":"Temani Afif","date":"May 26, 2022","format":false,"excerpt":"We\u2019ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn\u2019t use any shadows. We also combined them with CSS variables and calc()\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":365738,"url":"https:\/\/css-tricks.com\/cool-hover-effects-that-use-css-text-shadow\/","url_meta":{"origin":252961,"position":2},"title":"Cool Hover Effects That Use CSS Text Shadow","author":"Temani Afif","date":"May 13, 2022","format":false,"excerpt":"In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":306302,"url":"https:\/\/css-tricks.com\/css-only-marquee-effect\/","url_meta":{"origin":252961,"position":3},"title":"CSS-Only Marquee Effect","author":"Chris Coyier","date":"April 5, 2020","format":false,"excerpt":"You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement. You'll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/marquee.png?fit=1200%2C631&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/marquee.png?fit=1200%2C631&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/marquee.png?fit=1200%2C631&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/marquee.png?fit=1200%2C631&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/marquee.png?fit=1200%2C631&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":304025,"url":"https:\/\/css-tricks.com\/4-ways-to-animate-the-color-of-a-text-link-on-hover\/","url_meta":{"origin":252961,"position":4},"title":"4 Ways to Animate the Color of a Text Link on Hover","author":"Katherine Kato","date":"March 3, 2020","format":false,"excerpt":"Let\u2019s create a pure CSS effect that changes the color of a text link on hover\u2026 but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let\u2019s look at those while being mindful of important things, like accessibility,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340420,"url":"https:\/\/css-tricks.com\/how-to-create-neon-text-with-css\/","url_meta":{"origin":252961,"position":5},"title":"How to Create Neon Text With CSS","author":"Silvia O'Dwyer","date":"May 18, 2021","format":false,"excerpt":"Neon text can add a nice, futuristic touch to any website. I\u2019ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I\u2019d share some tips on how to do it! In this article, we\u2019re going to take a look at how to add\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/neon-text-open-all-day.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/neon-text-open-all-day.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/neon-text-open-all-day.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/neon-text-open-all-day.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/neon-text-open-all-day.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/252961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=252961"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/252961\/revisions"}],"predecessor-version":[{"id":253002,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/252961\/revisions\/253002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/253001"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=252961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=252961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=252961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}