Freies Frontend

etwa 1000~20000

90

Inkompetent. unglücklich schlecht

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:20px;line-height:30px;word-break:break-word;background-color:#f4f2ef;}article,aside,figcaption,figure,footer,header,hgroup,main,n,section{display:block;}h1,h2,h3,h4,h5,h6{margin:0;word-break:break-word;color:#a;}strong,b{font-weight:600;}ol,ul{margin:0;}ul{padding:0;}a{color:#333;text-decoration:none;}article.cardaimg{margin-bottom:0;display:inline-block;width:12px;height:12px;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}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:8px8px40px8px;width:100%;aspect-ratio:4/1;}img[src*="css-landscape"]{width:100%;aspect-ratio:4/1;}iframe{max-width:100%;}hr{min-width:100%;margin-top:30px;margin-bottom:38px;border:none;border-top:1pxdashed#c0c0c0;}p{text-wrap:pretty;margin:15px0;}div.wrapper{max-width:680px;margin:0auto;}div.wrapper.min{max-width:680px;}header.header{background-color:#111;border-bottom:1pxsolidvar(--primary);font-size:14px;line-height:2;}.n{display:flex;flex-wrap:wrap;justify-content:space-between;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;}ul.ni{text-wrap:balance;}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:20pxauto;min-height:54.6px;}.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;}.welcome{margin-top:-8px;}.welcomep{margin:16px030px;}.first-entry{position:relative;}.entry-headerh2{margin-top:10px;font-size:30px;}.post-entry{position:relative;margin:0050px;padding:20px;border:1pxdashed#c0c0c0;border-radius:4px;transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.post-entry:hover{border:1pxsolid#333;}.entry-contentp{margin:5px000;}.meta-info{line-height:22px;font-size:12px;font-weight:300;color:#444;}.single.meta-info{margin-top:4px;}.meta-infospan{color:#4059AD;}.entry-link{position:absolute;left:0;right:0;top:0;bottom:0;}.pination-default{margin:60px0;display:flex;justify-content:center;list-style:none;gap:0.2rem;}.pination-defaulta{padding:4px15px;font-size:18px;color:var(--primary);border:1pxsolidvar(--primary);transition-duration:var(--duration);transition-timing-function:var(--ttfunction);}.pination-defaulta:hover{border-bottom:2pxsolidvar(--primary);}.pination-defaultli.activea{padding:6px15px;border-bottom:2pxsolidvar(--primary);}.pination-defaulta[aria-label="Next"],.pination-defaulta[aria-label="Previous"]{padding:2px10px;}.pination-defaulta[aria-label="Last"],.pination-defaulta[aria-label="First"]{padding:0px10px;}.pination-defaultaspan[aria-hidden="true"]{vertical-align:text-bottom;}.post-title{font-size:30px;transform:translateY(5px);}h2.list-header{margin-top:25px;font-size:20px;padding:10px20px5px;border-radius:8px8px00;background-color:#e6e6e6;}.list-header+ol{font-size:16px;columns:1;margin-bottom:35px;padding-bottom:20px;border-radius:008px8px;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;border-radius:8px;font-size:16px;}footer.pe-footer{margin:50px0;}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;border-radius:8px8px00;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;}.sitemapimg{border-radius:7px7px00;width:100%;aspect-ratio:16/9;}.sitemaph3{font-size:16px;line-height:20px;font-weight:400;text-transform:lowercase;}.sitemap.cardspan{font-size:12px;Freies Frontendcolor:#444;}.sitemap.fb.cardspan{font-size:14px;}.sitemap.fbh3{text-transform:none;}code{display:inline-block;padding:00.5em;font-size:80%;font-family:"MonaSans","NimbusMonoPS","CourierNew",monospace;background-color:#d9d9d9;border-radius:4px;line-height:1.5;}.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;}a.w-icon{padding:05px;}a.w-icon:hover{background-color:#f6f9fe;}a.w-iconimg{display:inline;margin:05px-2px0;width:18px;height:18px;}.ffnli{margin:10px0020px;}.ffna{display:inline-flex;gap:.3rem;padding-left:8px;padding-right:8px;}.ffna:hover{background-color:#f6f9fe;}.ffnaimg{width:18px;height:18px;margin-top:7px;aspect-ratio:16/9;}ul.ffnh3{font-size:18px;padding:05px;Freies Frontend}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.preview{display:grid;grid-template-columns:1fr1fr;grid-gap:.8em;}ul.ffn.previewli{margin:0;}ul.ffn.previewimg{width:100%;height:auto;aspect-ratio:16/9;}ul.ffn.previewh3{font-size:14px;line-height:16px;}ul.ffn.previewa{display:grid;grid-auto-rows:min-content;padding-bottom:8px;width:100%;border:1pxdashedvar(--primary);border-radius:4px;height:100%;}ul.ffn.previewli:hovera{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{position:relative;display:none;line-height:1;top:-13px;left:14px;}article.wrapper-2017,article.wrapper-2024{position:relative;margin-top:100px;margin-bottom:100px;padding:var(--gap);border:1pxdashed#c0c0c0;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{width:100%;aspect-ratio:16/9;position:relative;margin:0;}article.wrapper-2024video{margin-bottom:-5px;width:100%;aspect-ratio:16/9;}.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:0px10px;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;}article.cardvideo,article.cardimg{width:100%;aspect-ratio:16/9;border-radius:8px;}article.cardimg{margin-bottom:8px;}article.cardp{margin:5px0;}article.cardulli{list-style-type:none;display:inline-block;margin-right:10px;}article.cardullia{font-size:16px;text-decoration:none;color:#444;border-bottom:1pxsolid#444;}article.cardullia:hoverimg{ transform:translate(.15em,0)rotate(12deg)skewX(0)skewY(0)scaleX(1)scaleY(1);}@media(min-width:550px){.list-header+ol{columns:2;}.list-header.archive+ol{columns:1;}.sitemap{grid-template-columns:1fr1fr1fr;}.sitemap-item-feature{grid-column:1/span2;}ul.ffn.preview{grid-template-columns:1fr1fr1fr;}}@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{margin:50px0;padding:0auto;} FreeFrontend HTML CSS Bootstrap Tailwind JaScript jQuery React Vue| BooksLandscapes WelcometoFreeFrontend!Discoverourcuratedcollectionofover10,000+freecodesnippetsinHTML,CSS,JaScript,Bootstrap,Tailwind,jQuery,React,Vue,andother.ThisresourcesareFreies Frontenddesignedtoenhanceyourfrontenddevelopmentjourney,regardlessofyourlevelofexperience.Beginbuildingandbeinspired.KeepupviaRSS15CSSTriangleBackgroundsNovember22,2024x2218;updateWithourNovember2024update,weareexcitedtopresent4newitemsfromCodePenandGitHubinthiscollectionofCSStrianglebackgrounds.4043;CSSAnimatedBackgroundsNovember20,2024x2218;updateLookingtoinfuseyourwebsitewithenergyandinteractivity?ExploreourlatestupdatefeaturingacuratedcollectionoffreeHTMLandCSSanimatedbackgroundexamples.Thesestunninganimationsaredesignedtoinstantlyenhanceyoursite’svisualappealanduserexperience.CSSLandscape|2024#32November17,2024x2218;newHello,dearreaders!Inthisissue,datedNovember17,2024,webringyouanexcitingarrayofupdates,news,articles,andtutorialsallcenteredaroundCSSandwebdevelopment.10043;CSSBackgroundPatternsNovember16,2024x2218;updateTiredofplain,boringbackgrounds?DiveintoaworldofcreativepossibilitieswithourextensivecollectionoffreeCSSbackgroundpatterns.CSSLandscape|2024#31November10,2024x2218;newStayup-to-datewiththelatestinCSS!6543;CSSArrowsNovember9,2024x2218;updateLevelupyourwebdevelopmentskillswithourcollectionoffreeHTMLandCSSarrowcodeexamples.7543;CSS3DExamplesNovember5,2024x2218;updateExplorethecreativityandpossibilitiesofCSSwiththeseimmersive,interactive3Dexamples!ThesnippetsshowcasedhereillustratethedepthandcomplexityachievablewithjustCSSandHTML,fromdynamicanimationstodetailed,lifelikemodels.EachcodesnippetemploysadvancedCSStechniqueslike3Dtransformations,animations,andcustompropertiestobuildeverythingfromintricatescenestoclassicgamingconsolesandlifelikeobjects.CSSLandscape|2024#30September24,2024x2218;newWelcometothelatestroundupofwebdevelopmentnews,articles,guides,andtutorials!Inthisedition,wediveintotheupdatesintroducedinFirefox130,offeringnewfeaturesforwebandadd-ondevelopers.1043;CSSTypingTextEffectsSeptember21,2024x2218;updateLookingtobringyourwebsitetolifewithinteractivetextanimations?OurlatestcollectionofCSStypingtexteffectshasgotyoucovered!Thesecaptivatingeffectssimulatethelookandfeeloftypingonatypewriterordigitalkeyboard,addingadynamictouchtoyourwebdesign.1543;CSSWaterEffectsSeptember21,2024x2218;updateWe’reexcitedtointroduceourlatestcollectionoffreeHTMLandCSSwaterandweeffectcodeexamples.Whetheryouwanttoaddserenewaterripples,dynamicwepatterns,orevencaptivatingunderwaterscenes,ourSeptember2024updatehassomethingforeverywebdesigner.«««12345»»» 2016-2024©FreeFrontend x2218; PrivacyPolicyandCookiesPolicy x2218; YouTube x2218; X x2218; Mastodon x2218; RSS document.addEventListener("DOMContentLoaded",function(){constvideoCards=document.querySelectorAll('.wrapper-2024,.wrapper-2017,.card');videoCards.forEach(function(card){constvideo=card.querySelector('video');card.addEventListener('mouseenter',function(){video.play();});card.addEventListener('mouselee',function(){video.pause();});});}); window.dataLayer=window.dataLayer||[]; functiongt(){dataLayer.push(arguments);} gt('js',newDate()); gt('config','G-WDG25XV6ED');