Tự động

Về 1000~20000

368

Không đủ năng lực. không vui xấu

3

104.21.94.216

FreeFrontend @font-face{font-family:"MonaSans";src:url('../MonaSans.woff2')format('woff2supportsvariations'),url('../MonaSans.woff2')format('woff2-variations');font-weight:200900;font-stretch:75%125%;}:root{--gap:1.67rem;--primary:#333;--secondary:#444;--duration:.15s;--ttfunction:cubic-bezier(.4,0,.2,1);}*,*::before,*::after{box-sizing:border-box;}html{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}body{margin:0;color:var(--primary);font-family:"MonaSans",system-ui,sans-serif;font-weight:400;font-size:18px;line-height:1.67;word-break:break-word;background-color:#efefef;}article,aside,figcaption,figure,footer,header,hgroup,main,n,section{display:block;}h1,h2,h3,h4,h5,h6{margin:0;word-break:break-word;}strong,b{font-weight:600;}ol,ul{margin:0;}ul{padding:0;}a{color:#333;text-decoration:none;}em{font-variation-settings:"wght"400,"wdth"100,"slnt"-10;font-style:normal;}figure{margin:0;}video{max-width:100%;}table{width:100%;border-collapse:collapse;border-spacing:0;}button,input,textarea{padding:0;font:inherit;background:transparent;border:0;appearance:none;}button,input[type="button"],input[type="submit"]{cursor:pointer;}img{display:block;max-width:100%;}img.imelong{border-radius:0040px0;}iframe{max-width:100%;}hr{min-width:100%;margin-bottom:75px;border:none;border-top:1pxsolid#ddd;}p{text-wrap:pretty;}div.wrapper{max-width:700px;margin:0auto;}div.wrapper.min{max-width:680px;}header.header{background-color:#111;position:sticky;border-bottom:1pxsolidvar(--primary);top:0;font-size:14px;line-height:2;z-index:999;}.n{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;margin:0auto;padding:020px;}h1.logo{font-size:14px;}p.logo{margin:0;}na{color:#ddd;display:block;padding:06px;border:1pxsolid#111;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.logoa{font-size:14px;font-weight:700;border:none;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.logoa:hover{font-weight:900;}ul.nili{display:inline-block;font-size:12px;list-style-type:none;}ul.nilia:hover{background-color:#222;border:1pxsolid#444;}div.wrapper.search{margin:10pxauto40px;}.gsib_a,.gsc-search-button{line-height:1;}.gsc-search-button.gsc-search-button-v2{margin:0;padding:7px27px;}.gsc-control-cse{padding:10px0!important;}.footer{margin-top:24px;margin-bottom:24px;font-size:12px;text-align:center;}.footera{margin:05px;}.footera:hover{text-decoration:underline;}.not-found{display:flex;align-items:center;justify-content:center;height:80%;font-size:160px;font-weight:700;}.first-entry{position:relative;}.entry-headerh2{font-size:30px;}.post-entry{position:relative;margin:60px0;padding:var(--gap);border:1pxsolid#ddd;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.post-entry:hover{border-color:#333;background-color:#fff;}.homep{margin-bottom:1em;}.meta-info{font-size:12px;font-weight:300;color:#444;}.meta-infospan{color:#4059AD;}.entry-link{position:absolute;left:0;right:0;top:0;bottom:0;}.pination{margin:60px0;display:flex;justify-content:center;gap:5rem;}.pinationa{padding:2px15px;font-size:18px;color:var(--primary);border:1pxsolid#111;}.pinationa:hover{color:var(--secondary);}.post-title{font-size:30px;margin-top:-15px;transform:translateY(10px);}h2.list-header{font-size:22px;padding:10px20px5px;background-color:#e6e6e6;}.list-header+ol{columns:1;margin-bottom:1.67em;padding-bottom:20px;background-color:#e6e6e6;}.post-contenta{text-decoration:underline;}a.welcome{padding:010px;border-radius:2px;border:1pxsolidrgba(221,221,221,.5);background-color:rgba(221,221,221,.5);text-decoration:none;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}a.welcome:hover{border:1pxsolidvar(--primary);}.highlight{padding:1em;background:#e6e6e6;}footer.pe-footer{margin:50px0;}footer.pe-footerul.pination{display:flex;text-align:center;list-style:none;gap:0.1rem;}footer.pe-footerul.pinationlia{margin:05px;}footer.pe-footerul.pinationlia:hover{color:var(--secondary);}footer.pe-footerul.pinationli.activea{text-decoration:underline;}footer.pe-footerul.pinationli:first-child{margin:015px00;}footer.pe-footerul.pinationli:last-child{margin:00015px;}h2.subheader{font-size:22px;margin-bottom:10px;}.sitemap{margin:0auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-gap:1em;margin-bottom:5em;}.sitemap.fb{grid-template-columns:1fr;}.sitemap.card{min-height:100%;display:flex;flex-direction:column;text-decoration:none;border:1pxsolid#ddd;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.sitemap.card:hover{border-color:var(--primary);color:var(--primary);background-color:#fff;}.sitemap.cardarticle{padding:0.5em;display:flex;flex:1;justify-content:space-between;flex-direction:column;}.sitemaph3{font-size:16px;font-weight:400;text-transform:lowercase;}.sitemap.cardspan{font-size:12px;color:#444;}.sitemap.fb.cardspan{font-size:14px;}.sitemap.fbh3{text-transform:none;}code{display:inline-block;padding:00.5em;font-size:90%;font-family:"MonaSans","NimbusMonoPS","CourierNew",monospace;background-color:#d9d9d9;border-radius:4px;}.highlightcode{color:#eee;background-color:#111;}.newsh2.accent{margin-top:75px;border-top:1pxsolid#111;display:inline-block;}.newsh2.accent:first-child{margin-top:30px;}.ffn{padding:0;list-style:none;}.ffnli{margin:30px0;}.ffnli:first-child{margin-top:10px;}.ffna{display:inline-flex;gap:.3rem;margin-left:-8px;padding-left:8px;margin-right:-8px;padding-right:8px;}.ffna:hover{background-color:#f6f9fe;}.ffnaimg{width:18px;height:18px;margin-top:7px;}ul.ffnh3{font-size:18px;padding:05px;}ul.ffnah3code{background:none;display:inline;padding:0;}ul.ffnh4{font-size:13px;font-weight:400;color:#444;}ul.ffnh4span{color:#111;}ul.ffnp{margin-top:0px;line-height:1.5;}ul.ffnimg.cover{width:100%;height:auto;}ul.ffn.previewimg{width:200px;height:auto;}ul.ffn.previewa{padding-bottom:8px;border:1pxsolid#efefef;width:100%;}ul.ffn.previewa:hover{border:1pxsolidvar(--primary);}.news.highlight{margin-top:95px;font-family:'SegoePrint','BradleyHand',Chilanka,TSCu_Comic,casual,cursive;font-weight:normal;background-color:#e6e6e6;}.ffn-list{margin:25px0;list-style-type:none;columns:15em;}.ffn-listli{border-bottom:1pxdashedvar(--primary);font-size:14px;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.ffn-listli:hover{background-color:#f6f9fe;}.ffn-lista{display:block;width:100%;text-decoration:none;}.ffn-listspan{float:right;}mainfigureimg{z-index:99;width:100%;}mainfigureimg+img{position:absolute;top:0;left:0;z-index:-999;}mainfigure:hoverimg+img{z-index:1;}main.img-extra{display:block;line-height:1;}main.img-extra::after{content:"↑hoverortaptheimetoplaythevideo";font-size:12px;color:#444;}article.wrapper-2017,article.wrapper-2024{position:relative;margin-top:100px;margin-bottom:100px;padding:var(--gap);border:0.5pxsolidhsla(0,0%,0%,0.15);transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}article.wrapper-2017p{margin-bottom:1.67em;}article.wrapper-2024p{margin:5px0;}article.wrapper-2024p:last-child{margin-bottom:22px;}article.wrapper-2024li::after{content:"";display:inline-block;margin:05px;}article.wrapper-2024li:last-child::after{content:none;}article.wrapper-2024li{display:inline-block;list-style-type:none;}article.wrapper-2017:hover,article.wrapper-2024:hover{border-color:var(--primary);background-color:#fff;}article.wrapper-2017figure,article.wrapper-2024figure{position:relative;margin:0;}article.wrapper-2024video{margin-bottom:-5px;}.info-box.info{box-sizing:border-box;float:left;width:33.33%;min-height:50px;}.info-box.infoh4,h4.about-the-item{font-size:12px;color:#444;margin-top:26px;font-weight:400;}.info-box{overflow:hidden;}.info-box.infoul{list-style:none;padding:0;}article.wrapper-2017h3{font-size:18px;}article.wrapper-2024h3{font-size:20px;margin-top:10px;}article.wrapper-2017::after{content:"";display:block;padding:20px;margin:10pxauto;width:100%;}.infospan,span.about-the-item{display:block;font-size:12px;margin-bottom:5px;color:rgba(0,0,0,0.4);margin-top:43px;}.info{clear:none;}.info-boxa:hover{color:#444;}article.wrapper-2017.accent,article.wrapper-2024.accent{display:inline-block;width:25%;color:#444;font-size:12px;}article.wrapper-2024.accent{position:relative;width:100%;margin-top:-30px;}article.wrapper-2017h3+p{margin-top:0;}article.wrapper-2017p+p{margin-bottom:0;line-height:0.5em;}article.wrapper-2017a,article.wrapper-2024a{color:#efefef;background-color:var(--primary);text-decoration:none;padding:0px10px2px10px;border:1pxsolidvar(--primary);transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}article.wrapper-2017a:hover,article.wrapper-2024a:hover{color:var(--primary);background-color:#fff;}@media(min-width:476px){.list-header+ol{columns:2;}.sitemap{grid-template-columns:1fr1fr1fr;}.sitemap-item-feature{grid-column:1/span2;}}@media(min-width:800px){.sitemap{grid-template-columns:1fr1fr1fr1fr;}}@media(max-width:768px){header.header{position:relative;}n.n{display:block;}ul.ni{padding:0;}ul.nili{margin:08px00;}.wrapper{padding:020px;}article.post-entry:first-child{margin-top:10px;}n.pination{margin:-40px020px;}div.wrapper.search{margin-bottom:0;}article.wrapper-2017{margin:33px0;padding:10px;}article.wrapper-2017::after{padding:5px;}.info-box.info{width:100%;text-align:center;}.info-box.infoh4{margin-top:10px;}article.wrapper-2017p+p{line-height:1em;}article.wrapper-2017.accent{display:block;width:100%;margin-top:10px;margin-bottom:0;}n.containerul.pinationlia{font-size:10px;}footer.pe-footer{margin:-15px00;}footer.pe-footerul.pination{margin:0015px;}}.wrapper-ads{display:flex;align-items:center;justify-content:center;padding:50px;border:1pxsolid#ddd;background-color:#fff;} FreeFrontend HTML CSS CSSLandscapes JaScript Bootstrap Tailwind jQuery React Vue Books WelcometoFreeFrontend!Discoverourcuratedcollectionofover10,000+freecodesnippetsinHTML,CSS,JaScript,Bootstrap,Tailwind,jQuery,React,Vue,andother.Thisresourcesaredesignedtoenhanceyourfrontenddevelopmentjourney,regardlessofyourlevelofexperience.Beginbuildingandbeinspired.KeepupviaRSSThesearethelatest10posts.1043;CSSTypingTextEffectsLookingtobringyourwebsitetolifewithinteractivetextanimations?OurlatestcollectionofCSStypingtexteffectshasgotyoucovered!Thesecaptivatingeffectssimulatethelookandfeeloftypingonatypewriterordigitalkeyboard,addingadynamictouchtoyourwebdesign.September21,2024x2218;update1543;CSSWaterEffectsWe’reexcitedtointroduceourlatestcollectionoffreeHTMLandCSSwaterandweeffectcodeexamples.Whetheryouwanttoaddserenewaterripples,dynamicwepatterns,orevencaptivatingunderwaterscenes,ourSeptember2024updatehassomethingforeverywebdesigner.September21,2024x2218;update2043;CSSTextGlitchEffectsIntheever-evolvingworldofwebdesign,stayingaheadofthecurvemeansconstantlyexperimentingwithnewandexcitingvisualeffects.OnesuchtrendthathascapturedtheiminationofdesignersistheCSSglitchtexteffect.Thistechniquebringsatouchofretro-futuristicflairtoyourwebsite,creatingtextthatappearstobeglitchingordistorting,muchlikeamalfunctioningelectronicdisplay.September19,2024x2218;update2543;CSS3DTextEffectsThisTự độngcollectionofcreativewebdemosshowcasesimpressive3DtexteffectsusingHTMLandCSS.Theseworksdemonstrateinnovativetechniquesintextstylingandanimation,makinguseofCSSpropertiesliketransformsandshadowsfordepthandmotion.WithourSeptember2024update,wehemeticulouslysearchedreputablesourceslikeCodePen,GitHub,andotherreliableplatformstobringyoufivenewandthrilling3Dtexteffectoptions.September16,2024x2218;update2543;CSSTextShadowEffectsAdddepth,dimension,andvisualinteresttoyourwebdesignswithourcuratedcollectionofCSStextshadoweffects!Fromoutlinestodramatic3Dtransformations,thesecodeexamplesofferendlesspossibilitiestoenhanceyourtypographyandcaptivateyouraudience.September13,2024x2218;update2043;CSSGlowTextEffectsAreyoulookingtoaddavibrantandeye-catchinggloweffecttoyourwebsite’stext?Ourlatestcollection,"CSSGlowTextEffects",isheretoinspireyourcreativity!Thisroundupfeaturesover20dazzlingCSSglowtexteffectsthatwillhelpyouenhanceyourwebsite'sdesignwithstunningneon-stylelighting.September10,2024x2218;update10043;CSSTextAnimationsTextanimationsareapowerfultoolforbringinglifeandmovementtoyourwebpes,enhancinguserengementandmakingyourcontentmorevisuallyappealing.WithCSS,youcancreateavarietyoftexteffects—fromsubtletransitionstodynamic,eye-catchinganimations.Whetheryouwanttodrawattentiontoheadlines,addpersonalitytoalandingpe,orsimplymakeyoursitemoreinteractive,CSStextanimationsofferendlesspossibilities.September6,2024x2218;update11043;CSSTextEffectsTransformyourtextwithstunninganimations,styles,andinteractions!Weareexcitedtopresentourlatestupdate,featuringacomprehensivecollectionoffreeHTMLandCSStexteffectcodeexamples.Thiscompilationshowcasesawiderangeoftexteffects,includingbackgroTự độngundeffects,hovereffects,rotatingeffects,typingeffects,andmuchmore.August30,2024x2218;update2043;CSSSnowEffectsAsthewinterseasondrawsnear,addingasnoweffecttoyourwebsitecancreateafestiveandenchantingambiance.CSSsnoweffectsareacharmingwaytotransformyourwebprojectsintoawinterwonderland.WhetheryouenvisionalightdustingofsTự độngnowflakes,amoreintenseblizzardscene,oraserenesnow-coveredbackground,CSSprovidesvarioustechniquestobringthesewhimsicalvisualstolife.August29,2024x2218;update4543;CSSScrollEffectsScrollingeffectscansignificantlyenhancetheuserexperiencebyaddingdynamicandinteractiveelementstoawebsite.Fromeye-catchinganimationstosubtletransitions,CSSscrolleffectsallowdeveloperstocreatevisuallyengingpesthatcaptureusers'attentionandguidethemthroughcontenteffortlessly.August29,2024x2218;update(adsbygoogle=window.adsbygoogle||[]).push({}); 2016-2024©FreeFrontend x2218; PrivacyPolicyandCookiesPolicy x2218; YouTube x2218; X x2218; Mastodon x2218; RSS window.dataLayer=window.dataLayer||[]; functiongt(){dataLayer.push(arguments);} gt('js',newDate()); gt('config','G-WDG25XV6ED');