{"title":"Text Effect","description":"","products":[{"product_id":"deboss-text","title":"Deboss Text","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003eDEMO LINK - \u003ca href=\"https:\/\/deboss-text.showit.site\/\"\u003ehttps:\/\/deboss-text.showit.site\/\u003c\/a\u003e\u003cbr\u003ePlease note this effect is hard to see on small thumbnails. Visit the demo link to get the full effect.\u003cbr\u003e\u003cbr\u003e\u003cmeta charset=\"utf-8\"\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e \u003cmeta charset=\"utf-8\"\u003e \u003cspan style=\"font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 0.875rem;\"\u003e\u003c\/span\u003e\n\u003cp\u003eDeboss Text Effect brings a popular logo design technique onto your Showit website.\u003c\/p\u003e\n\u003cp\u003eYou've seen this effect in luxury branding where text appears pressed directly into the surface rather than sitting on top of it. It's subtle, but it instantly creates more depth, dimension, and visual interest.\u003c\/p\u003e\n\u003cp\u003eNow you can achieve that same look on your Showit website.\u003c\/p\u003e\n\u003cp\u003eInstead of flat typography, your headings and any other text can take on a soft engraved appearance that feels intentional, polished, and beautifully integrated into the design itself.\u003c\/p\u003e\n\u003cp\u003eYou simply add the provided code, apply a CS Selector, and the effect is ready to go.\u003c\/p\u003e\n\u003cp\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eMultiple deboss intensity options included\u003c\/li\u003e\n\u003cli\u003eApply the effect to any text element\u003c\/li\u003e\n\u003cli\u003eTwo paper overlay backgrounds (light and dark)\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e**Recommended for use only on darker text colors on either the same dark background or a light background (See examples) \u003c\/p\u003e\n\u003cp\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp\u003eA simple step-by-step PDF guide is included with your purchase.\u003c\/p\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp\u003eInstalls in minutes using Showit’s Custom Head Code area and CS Selectors.\u003c\/p\u003e\n\u003cp\u003eSimply copy and paste the provided code, apply the included selector to any text element, and the deboss effect is instantly applied.\u003c\/p\u003e\n\u003cp\u003eWorks seamlessly across desktop and mobile with no additional setup required.\u003c\/p\u003e\n\u003cp\u003eA small detail that can completely change how custom your typography feels.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45109412298822,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-DebossText.gif?v=1780207254"},{"product_id":"outline-text","title":"Outline Text","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003eDEMO LINK: \u003ca href=\"https:\/\/outline-text.showitpreview.com\/\"\u003ehttps:\/\/outline-text.showitpreview.com\/\u003c\/a\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e \u003cmeta charset=\"utf-8\"\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSome website sections make you stop and stare for a second because your brain is trying to figure out what you're looking at.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThat's exactly what this one does.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eAs images move through the section, they pass between a solid text layer and an outlined text layer, creating the illusion that the typography is changing as the photos move across it.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThe effect feels layered, artistic, and a little unexpected. The kind of detail that makes a website feel custom without screaming for attention.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eNo complicated setup. Just a clever combination of Showit canvases, layering, sticky positioning, and a little CSS.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eCUSTOMIZE\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003e• Font \/ Text\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Color and Stroke color\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Desktop stroke size\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Mobile stroke size\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Images\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Background colors\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eWHAT'S INCLUDED\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eA step-by-step PDF guide walks you through the setup from start to finish.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eYou'll receive the CSS needed for the outline effect along with instructions for how the layered canvas works inside Showit.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eDesktop and mobile stroke sizing are controlled separately so you can fine tune the look on both screen sizes.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eA QUICK NOTE ABOUT FONTS\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eNot every font loves being outlined.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSome fonts look incredible with a stroke applied. Others may have outlines that appear within the letter. Not recommended for script fonts either.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eTHE FINE PRINT\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e• Digital product only\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Requires a Showit website\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Images shown in the demo are not included\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Due to the nature of digital products, all sales are final\u003c\/span\u003e\u003c\/p\u003e\n\u003cbr\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45199270871110,"sku":null,"price":16.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCode_Studio_-_Outline_Text.gif?v=1781900037"}],"url":"https:\/\/showcodestudio.com\/collections\/text-effect.oembed","provider":"ShowCode Studio","version":"1.0","type":"link"}