{"id":3374,"date":"2023-12-23T15:58:15","date_gmt":"2023-12-23T18:58:15","guid":{"rendered":"http:\/\/anyssa.com.br\/uncategorized\/my-css-editable-letter-board-was-featured-in-the-official-the-codepen-spark-newsletter\/"},"modified":"2023-12-23T16:34:06","modified_gmt":"2023-12-23T19:34:06","slug":"my-css-editable-letter-board-was-featured-in-the-official-the-codepen-spark-newsletter","status":"publish","type":"post","link":"https:\/\/anyssa.com.br\/en\/css-en\/my-css-editable-letter-board-was-featured-in-the-official-the-codepen-spark-newsletter\/","title":{"rendered":"My &#8216;CSS Editable Letter Board&#8217; was featured in the official The CodePen Spark newsletter."},"content":{"rendered":"\n<p>Some time ago, I decided to try creating one of those letter boards that we often see in cafes and other paces displaying menus. I challenged myself to use only CSS to simulate the effect of the lines where the letters fit, the frame, and the typography itself.<\/p>\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"CSS Editable Letter Board\" src=\"https:\/\/codepen.io\/anyssa\/embed\/preview\/PoNBMxJ?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=PoNBMxJ#?secret=TKqLmwfemi\" data-secret=\"TKqLmwfemi\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe>\n<\/div><\/figure>\n\n<p>For that, I used the <code>linear-gradient<\/code> function in the <code>background<\/code> property of a <code>div<\/code>. Then, I calculated the vertical repetition in <code>em<\/code> so that the lines matched the size of the text, whatever it might be. That way, the letters really look like they&#8217;re fitted into the board.<\/p>\n\n<p>I took one step further and added the attribute <code>contenteditable<\/code> to the div&#8217;s HTML, making the text of the letter board editable as if it were an input, without the need to modify the HTML.<\/p>\n\n<p>It was a fun exercise. And to my surprise, my pen was featured in the official CodePen newsletter! <a href=\"https:\/\/codepen.io\/spark\/199\" target=\"_blank\" rel=\"noopener\">Read the issue here<\/a>.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"777\" src=\"http:\/\/anyssa.com.br\/wp-content\/uploads\/2023\/12\/anyssa-css-letterboard-1024x777.jpg\" alt=\"\" class=\"wp-image-3368\" srcset=\"https:\/\/anyssa.com.br\/wp-content\/uploads\/2023\/12\/anyssa-css-letterboard-1024x777.jpg 1024w, https:\/\/anyssa.com.br\/wp-content\/uploads\/2023\/12\/anyssa-css-letterboard-300x228.jpg 300w, https:\/\/anyssa.com.br\/wp-content\/uploads\/2023\/12\/anyssa-css-letterboard-768x583.jpg 768w, https:\/\/anyssa.com.br\/wp-content\/uploads\/2023\/12\/anyssa-css-letterboard-1536x1165.jpg 1536w, https:\/\/anyssa.com.br\/wp-content\/uploads\/2023\/12\/anyssa-css-letterboard-2048x1554.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Some time ago, I decided to try creating one of those letter boards that we often see in cafes and other paces displaying menus. I challenged myself to use only CSS to simulate the effect of the lines where the letters fit, the frame, and the typography itself. For that, I used the linear-gradient function [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_eb_attr":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[108],"tags":[],"class_list":["post-3374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-en"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/posts\/3374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/comments?post=3374"}],"version-history":[{"count":3,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/posts\/3374\/revisions"}],"predecessor-version":[{"id":3391,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/posts\/3374\/revisions\/3391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/media\/3371"}],"wp:attachment":[{"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/media?parent=3374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/categories?post=3374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anyssa.com.br\/en\/wp-json\/wp\/v2\/tags?post=3374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}