CSSTechniquesAndEffectsForKnockoutTextCSS

476 544

Knockouttextisatechniquewherewordsareclippedoutofanelementandrevealthebackground.Inotherwords,youonlyseethebackgroundbecausethelettersareknockingoutholes.It’sappealingbecauseitopensuptypographicstylesthatwedon’tgetoutoftraditionalCSSproperties,likecolor.

Eventhough,inmostcases,eitherblackorwhiteisusedintheseblendmodestogetacleardistinctionbetweenthetextandthebackground,Ipreferusingadarkerorlightercolorinsteadtokeepthebackimageslightlyvisible,likethis:

Usingadarker(orlighter)coloralsocreatesanice“theme”goingonwiththeimageshownthroughthetext.

Themultiplyblendmodekeepsdarkercolorsdarkandthelightercolorsletthroughwhatever’sbehindthem:ablackportiononthetoplayerwillbefullyopaqueandwhitewillbefullytransparent.

Intheaboveexample,thewhitetextbecamecompletelysee-throughwhilethedarkercolorarounditletstheimagebehindbeseenonlyalittle,asthedarkershadesremainunaffected.

Thescreenblendmodereversestheroles:darkercolorscreatetranslucencewhilelightershadesremainlightandblockwhat’sbehind.

Thedarkenandlightenblendmodesaresimilartomultiplyandscreen,respectively,exceptthatdetailsarelostontheportionsofthebackimagethatcanbeseen.Ratherthanmixingtheshades,themodeschoosethedarkerorthelightershadeofthetwolayersthatareshown.

Seebelowthedifferenceinhowthefourmodeshaveblendedthecolors:

Usingablendmodeisthemostconvenientoptiontogetaknockouttexteffect,becauseitallowsustoapplyadditionalstylesthatothertechniquesmightnotallow.

Let’stakeacloserlookatthestyleswecanusetoenhancetheknockouteffect.

ShadowBlurAddingawhite/blackoralight/darktextshadowtothetextcreatesablurredeffect.Forexample,let’ssayIaddatext-shadowthat’swithalargeblurradiusvalue:

.text{text-shadow:009pxwhite;...}Nowtheedgesarelesscrispandgiveasortofcloudyeffect:

AnimationWecanevenmakethingsmovearoundalittle.Forexample,let’stakebuildonthetext-shadowideawelookedataboveandputsomemovementonittomakeitappearthatthetextisglowing:

TransitionTransitionisanotherpropertywecanapplytoourknockouttextandthatopensupevenmoreinterestingpossibilities,likeusingtext-indentonpseudo-classeslike:hover.

Here’showwecanusetransitiononpseudo-classestointroduceanewelementintotheknockouttext:

Thetransparenttextshowstheimagebehinditthat’salreadycuttotheshapeofthetext.Althoughthisisatrueknockouttextapproach—itliterallyremovesthetext’ssurroundingbackgroundonscreen—havingnobackgroundlefttobleedintoormoveoverleaveslittlespaceforothereffectslikeblur,ormovingtext,totakeplace.That’swheremix-blend-modehasanadvantage.

CSSMaskThefirsttechniquewelookedatemploysmasking,aconceptwhereshapesarecreatedonaforegroundlayerandusecolortodeterminehowmuchoftheshapeshowsthebackground.Theblackpartsoftheforegroundhide(or“mask”)andwhitepartsrevealthebackground,orvice-versa.Anygrayvaluebetweenblackandwhiteistreatedasvaryingdegreesofpartialtransparency.

CSSmaskworksthesameway:youstraightupdeclareanimagetobethemaskappliedoveranotherimageand,dependingonthetypeofthemask,wegetaportioncutout.AsofwritingthispostCSSmaskisfullysupportedinFirefoxonly.

Sincewearelookingspecificallyintoknockouttext,themaskneedstobemadefromtext.ThisisagreatuseforSVG,whichcancreatemasksfromSVGshapesandtexts.

SVG’selementcreatesamaskimagedfromitscontents.ThecontentsImadeinsidetheareawhiterectangle()andblacktext().Thetext,beingblack,bringsuptheportionoftheimagebehindittotheviewaftermasking.

Blurring,Animation,andTransitionCSSmasksopenupthesameblurandanimationeffectswewereabletousewithmix-blend-mode.

Thatsameglowingtextfromweusedbeforeapplieshereaswell,thistimeapplieddirectlytotheelementoftheSVG:

text{font:bolder12vw'AlfaSlabOne';animation:glow3sinfinite;}@keyframesglow{0%{text-shadow:0010pxwhite;}15%{text-shadow:2px2px10pxrgba(255,255,255,1),-2px-2px10pxrgba(255,255,255,1);}30%{text-shadow:2px2px4pxrgba(255,255,255,.7),-2px-2px4pxrgba(255,255,255,.7);}50%{text-shadow:20px20px50pxrgba(255,255,255,.5),-20px-20px50pxrgba(255,255,255,.5);}}However,unlikemix-blend-mode,notallthesamepropertiescanbeanimated.Forexample,text-indentwon’tworkhereandneitherwilltransform.It’struethatCSStransformscanbeappliedtoSVGelementsbutbecauseourmaskisactuallybeingusedasamaskinitstruestform,browsersmightnotapplythosetransformations.

WecanalwaysinjectatransformSVGattributeusingJavaScript,deliveringthosetransformationstotheelementsinsidethemask:

Intermsofresult,bothblendmodesandmaskgivesimilaroutput.Betweenbackground-clipandmix-blend-modevalues,it’llbethechoiceofthedesignthat’llleadtochoosingoneoveranother.Whatyoucanachievewithbackground-clipcanalsobedonebyblending,providedyou’reusingeitheronlyblackorwhitebackgroundmatchingthepage’sbody.

TLDR;knockouttextmethoduno:applyoneofthefourknockout-friendlyblendmodestothetoplayerofatext-imagestackandusedark/light(orblack/white)colorcombinationonthetextanditsenclosure.Methoddos:setbackground-cliptotextintheelementcarryingbothabackgroundimageandatransparenttext.Methodtres:useCSSmaskingonasolidforegroundwithanimagebehindanddictatethecutoutusinganSVGtextmask.

THE END

深度学习图像训练，你**倒是先给我图像啊！计算机视觉算法

Hands

盘点25个设计师必备素材网站，建议收藏！

CSSTechniquesAndEffectsForKnockoutTextCSS

1.PricingMrCutout.com1000 cutouts Limited to regular, common cutouts for basic use 1 user - What will you get as of December 17, 2024. New images every week We added exactly 1677 new cutouts since December 17, 2023 and you can expect even more in a year http://www.mrcutout.com/pricing
2.MixRescue:PocketLipsWhen hip–hop collective Pocket Lips sent in their track 'Rock Show' for Mix Rescue, they were pretty happy with the way their tracking sessions had gone: drums, bass, keyboard, and scratching had been recorded together to get a live vibe, and the arrangment had been completed with furtherhttps://www.soundonsound.com/techniques/mix-rescue-pocket-lips
3.AppStore上的“EggMaster:CookingRestaurant”Step into the sizzling world of cooking mastery! In this addictive physics based kitchen simulation, you'll take control of the pan using your phone’s movement or touch controls to create the perfect cuisine. Master the technique of flipping your ingredients like a pro to serve mouthwatering mehttps://apps.apple.com/cn/app/egg-master-cooking-restaurant/id6739306928
4.ZhPuremixInside the mix 导师 免费视频 成为专业人士 01 学习手册中没有的内容 Puremix将教您如何使用工作室中的所有工具,包括压缩器、均衡器、麦克风、前置放大器、DAW等。 The evolution from analog to digital "Brauerize"? TutorialsExplained Compression topology https://www.puremix.net/
5.Thosaursstormstout Thosaurs stormstout https://th.aliexpress.com/i/1005005040929630.html
6.SmashCutDigitalMarketingHomeSmash Cut Digital specializes in taking businesses to the next level. Let's smash cut to the next scene in the life of your business--the one where you achieved everything you dreamed of.https://www.smashcutdigital.com/
7.ChilloutmixIn the era of rapid technological advancements, artificial intelligence (AI) continues to push the boundaries of what was once thought impossible. One such breakthrough in the field of AI is ChilloutMix, a revolutionary model that harnesses the power of AI to generate captivating images from merehttps://www.plugger.ai/models/chilloutmix
8.DesktopMailHolderWayfair1.41lb. opens in a new tab sale afshin mail cutout metal letter holder by ebern designs $17.99 $28.99 ( 8 ) rated 5 out of 5 stars. 8 total votes free fast delivery get it by wed. dec 4 it is perfect for organizing the pile of mail that invariably ends up cluttering the https://www.wayfair.com/keyword.php?keyword=desktop+mail+holder
9.ChilloutMixesThis is the mix you all have been waiting for. Way too long, if you ask me, but the final two tracks have not yet been released. This is the reason why the mix wasn't put online earlier. The tracks STILL haven't been released, so that's why we decided to cut the final two trhttp://cardamar.quad341.com/
10.HomeHome JJT’s New “Rock and Soul Fable” Available Now November 13, 2024 This story is about how music brings a diverse community of characters together – after some profound personal and community tragedies – to accomplish something miraculous when they least expect it.https://truetunes.com/
11.MixtapeTheologyMixtape Theology: A devotional and retrospective inspired by 90s Christian music & culture. Part-devotional and part-retrospective, Mixtape Theology will take 90s CCM fans to “Another Time, and Another Place” to “Dive” into the biblical passages behind their favorite 90s Contemporary Christian Muhttps://www.mixtapetheology.com/
12.MIXOUT自营旗舰店MIXOUT自营旗舰店主要销售品牌的阅读镜、放大镜、显微镜等产品,店铺致力于为消费者提供品质的商品、满意的服务,用真诚和热情来赢取顾客良好的口碑和信任,树立良好的品牌市场形象。在MIXOUT自营旗舰店这里您可以享受到店铺及时的服务、完善的物流体系、厂家售后保证等。以上来自【京东商城】专业的综合网上购物商城,为您提供https://m.maigoo.com/webshop/374781.html
13.MIXTECProfessional Blender Learn more about MIXTEC's professionals commercial smoothie blender. Learn More Juicer Five speeds design, efficient juice extracting up to 80%, more convenient for juicing variety of ingredients. Learn More Pearl Cooker https://www.mixtecus.com/
14.CoconutBuffaloChipCookiesRecipeStandard chocolate chip cookie dough is loaded up with coconut, corn flakes, and raisins creating a buffalo chip cookie, also known as 'everything but the kitchen sink' cookie.https://www.allrecipes.com/recipe/230427/coconut-buffalo-chip-cookies/
15.mixkit的滤镜可商用吗freepik可以商用吗 Mixkit CUTOUTMIX官网 相关问题 素材网有哪些 十大免费素材下载网站http://***.cn 站酷http://www.sc-cn.net/ 素材 正版音乐授权正版音乐授权_商用音乐素材库-猴子音悦 猴子音悦-正版音乐授权海量曲库,满足多样商用音乐需求,提供广告,电影,视频,游戏等多场景音乐商用授权,价格优惠,VIP会员https://wenda.so.com/q/1678912873216156
16.数据增强之cutout变体,添加噪声和mixcut腾讯云开发者社区数据增强之cutout变体,添加噪声 生成框 代码语言:javascript 复制 def rand_bbox(size, lam): W = size[2] H = size[3] # ratio = np.sqrt(1.from_numpy(nlabel) return img, nlabel, rrate # loss 变化 def label_mix_loss(prediction, nlabel, rrate=0.0): oloss = F.log_softmax(https://cloud.tencent.com/developer/article/2155617
17.剪接艺术组合(Cutoutartmix)eps海外设计素材免费下载爱给网提供海量的设计素材(海外)资源素材免费下载, 本次作品为eps 格式的剪接艺术组合(Cutout art mix), 本站编号41241351, 该设计素材(海外)素材大小为78m, 更多精彩设计素材(海外)素材,尽在爱给网。 浏览本次作品的您可能还对 平面图形插图插画 感兴趣。 找到更多"平面设计资源包/剪接艺术组合"资源搜索更多https://www.aigei.com/item/cutout_art_mix.html
18.CutoutCutout官网 Cutout是一款强大的AI修复和抠图工具,它利用先进的人工智能技术,为用户提供高效、精准的图片处理服务。无论是需要修复的照片,还是需要抠图的素材,Cutout都能轻松应对,帮助用户节省大量的时间和精力。其核心优势在于强大的AI算法,能够自动识别图片中的对象,进行精准的抠图和修复,无需复杂的操作,即可得到满意的https://www.openi.cn/sites/595.html
19.AndrewMacari外部播放此歌曲> Andrew Macari - Cardboard Cutouts (Original Mix) 专辑:3 Years of Drizzle Music Pt. 1 歌手:Andrew Macari 还没有歌词哦https://www.kugou.com/mixsong/1peerc55.html
20.SpyshotsofXiaomiMiMix2sshowaniPhoneXThis moves the selfie camera to a more natural position and should help reduce the bottom bezel, though that is not clearly visible in these shots. Alleged Xiaomi Mi Mix 2s photos show a display cutout on top The “horns” around the cutout are wider, leaving more room for icons in thehttps://m.gsmarena.com/newsdetail.php3?idNews=28152&c=10001
21.11个优质的人物素材网站8.Cutout Mix 网站有一小部分抽象的随行人员系列,具有酷炫的图形风格。网址:cutoutmix.com 9.3NTA 从著名建筑师到“绝命毒师”的“独特”作品集。网址:3nta.com 10.Pimp My Drawing 网站有适用于插图画家和CAD绘图的中等大小的矢量素材集合。网址:pimpmydrawing.com https://weibo.com/ttarticle/p/show?id=2309404449473118994437
22.dxp中发光二极管在哪找Cutoutmix 素材类型:插画人物、艺术人物 能否商用:能 网站地址:cutoutmix.com 这个网站提供了三种风格的插画人物素材: 其中比较接近拼贴风格的无脸人物素材最有艺术气息,可惜的就是数量比较少: 利用同一类型的插画人物素材,我们可以做出风格非常统一的PPT: https://blog.csdn.net/weixin_39829166/article/details/111682355
23.mixinwoodenspoonisolatedonwhitebackgroundcutoutPepper seasoning mix in wooden spoon isolated on white background cutout,站酷海洛,一站式正版视觉内容平台,站酷旗下品牌.授权内容包含正版商业图片、艺术插画、矢量、视频、音乐素材、字体等,已先后为阿里巴巴、京东、亚马逊、小米、联想、奥美、盛世长城、百度、360、https://www.hellorf.com/image/show/247107355?statisticsType=False
24.总结62种在深度学习中的数据增强方式业界新闻它的灵感来自Cutout,其中任何随机区域都用 0 或 255 填充 而在cutmix中,不是用 0 或 255 填充随机区域,而是用另一个图像的补丁填充该区域 相应地,它们的标签也根据混合的像素数按比例混合 (22)SaliencyMix SaliencyMix基本上解决了Cutmix的问题,并认为用另一个补丁填充图像的随机区域并不能保证补丁具有丰富的信息https://www.jindouyun.cn/document/industry/article/183115
25.AI绘画软件免费哪个好用?输入文字一键生成!? AI文生图:用户可以输入一些关键词或描述,boardmix AI会根据这些信息生成相应的图像,同时,该AI绘画软件也提供丰富的提示词库,包括了人物、产品、风景、画面效果及构图描述,用户可轻易复用。 ? AI图生图:用户上传图片,可选择智能参考、几何透视、线稿转化、光影深度、姿势识别5种参考方式,智能生成图片。 https://boardmix.cn/article/7-free-ai-painting-softwares/
26.GingerbreadCutoutsRecipeGingerbread cutout cookies are aclassic holiday treatthat adds a touch of warmth and spice to any festive occasion. This simple recipe uses a combinationGround ginger, cinnamon, and cloves:A mix of spices to add that signature gingerbread flavor to the cookies. Feel free to omit any spices https://www.bhg.com/recipe/santa-size-gingerbread-cookies/
27.Mix3D:OutofThe experiments show that CutOut is sen- sitive to the parameter choice and that Mix3D still outper- forms the best performing CutOut model. Last, we mix a second scene without ground truth labels, i.e., the seman- tic segmentation loss is computed only for points from one scene. Whilehttp://arxiv.org/pdf/2110.02210
28.XiaomiMiMix3review:TheclassicsliderphonereturnsPortrait mode on the Mi Mix 3 works very well with clean cutouts of subjects and a convincing background blur. Very rarely did the Mi Mix 3 struggle with separating the foreground from the background. The bokeh can also be adjusted after the fact to increase or decrease separation between https://www.androidauthority.com/xiaomi-mi-mix-3-review-918218/
29.FreeAIFaceSwap:BestFaceChangerAppsforPhotos[2024]Then, drag the cutouts onto your photo and make your adjustments for a more realistic look. 3. Multi-Face Blender — Best for Mix and Match Face Swapping Available: Android only Key feature: Multi-face swapping tool With Multi-Face Blender, you can use multiple images to create a https://www.cyberlink.com/blog/app-photo-editing/2266/best-face-swap-apps
30.Cutout,Mixup,andCutmix:ImplementingModernImageCutout[2]: randomly remove a square region of pixels in an input image Mixup[4]: mix a random pair of input images and their labels Cutmix[3]: randomly select a pair of input images, cut a random patch of pixels from the first image and paste it to the second image, and thenhttp://towardsdatascience.com/cutout-mixup-and-cutmix-implementing-modern-image-augmentations-in-pytorch-a9d7db3074ad
31.Snowmix/Discussion/GeneralDiscussion:VirtualfeedcutI can see "place rect” and how that works but there doesn’t seem to be a cutout. The move clip sort of seems like what I need. Yes external processes can easily connect and issue simple and complex commands dynamically changing what and how you mix. https://sourceforge.net/p/snowmix/discussion/Snowmix_Support_Forum/thread/086f521a/
32.Mix&MatchBridesmaidsIeena for Mac Duggal Ruffled Asymmetrical Halter DressLoveShackFancy Slim Sequin Maxi DressMac Duggal One-Shoulder Pleated Cutout Side-Slit Gown How To Mix: Colors & Palettes Mixing colors is a classic way to give your party a custom feel. From subtle ombre looks that stay within the same cohttps://www.anthropologie.com/help/bridesmaids-mix-match
33.Cut+Mix相似应用下载Cut+Mix 49次下载 相似应用,小编亲测可用 黄油相机 99.83MB 查看 一键换背景 186.76MB 查看 抖音 260.5MB 查看 马卡龙玩图 184.59MB 查看 You can also combine cutouts with each other to create an amazing collage and then share it with your friends.- cuts out any object from a https://m.wandoujia.com/apps/7030170
34.MixMasterswhich lend the space a contemporary air thanks to their clean lines and sturdy scale. Rounding out the style-spanning mix are a few time-honoredwhose very modern design of silk organza cutouts layered against a tarnished silver-leaf background reflects Brown’s fondness for abstract art, whihttp://atlantahomesmag.com/article/mix-masters-2/
35.logisticsmix是什么意思logisticsmix的中文翻译及音标pre mix 预混合在资料复制机中,某些静电工艺中所用的增色剂的聚集和分散。其目的是保持增色剂的粒子处在悬浮状态、用作防止增色剂聚集的稀释剂。 hot mix cold laid 热拌冷铺 最新单词 suction roll marks是什么意思及反义词 真空辊印痕(纸病) suction pressure safety cutout的中文意思 低压安全断路器 suctiohttps://www.hujiang.com/ciku/logistics_mix/