#css transform | Explore Tumblr posts and blogs

jcmarchi · 4 months ago

Text

Scroll Driven Animations Notebook

New Post has been published on https://thedigitalinsider.com/scroll-driven-animations-notebook/

Scroll Driven Animations Notebook

Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for gradient text, one for a comparison slider, another for accordions, and the list goes on.

One of his latest is a notebook of scroll-driven animations. They’re all impressive as heck, as you’d expect from Adam. But it’s the simplicity of the first few examples that I love most. Here I am recreating two of the effects in a CodePen, which you’ll want to view in the latest version of Chrome for support.

This is a perfect example of how a scroll-driven animation is simply a normal CSS animation, just tied to scrolling instead of the document’s default timeline, which starts on render. We’re talking about the same set of keyframes:

@keyframes slide-in-from-left from transform: translateX(-100%);

All we have to do to trigger scrolling is call the animation and assign it to the timeline:

li animation: var(--animation) linear both; animation-timeline: view();

Notice how there’s no duration set on the animation. There’s no need to since we’re dealing with a scroll-based timeline instead of the document’s timeline. We’re using the view() function instead of the scroll() function, which acts sort of like JavsScript’s Intersection Observer where scrolling is based on where the element comes into view and intersects the scrollable area.

It’s easy to drop your jaw and ooo and ahh all over Adam’s demos, especially as they get more advanced. But just remember that we’re still working with plain ol’ CSS animations. The difference is the timeline they’re on.

Direct Link →

0 notes

josegremarquez · 5 months ago

Text

Código HTML encabezado con 3 imágenes de fondo, junto con un menú de navegación simple. He utilizado CSS para dar estilo al diseño y posicionar los elementos:

HTML <!DOCTYPE html> <html> <head> <title>Encabezado con Imagen de Fondo</title> <style> header { height: 300px; background-image: url('tu-imagen.jpg'); /* Reemplaza 'tu-imagen.jpg' con la ruta a tu imagen */ background-size: cover; background-position: center; position: relative; } header h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align:…

0 notes

clonecoding-en · 2 years ago

Link

Exploring Web Animation: CSS vs. JavaScript

This article delves into the realm of web animation, exploring a wide range of techniques used to enhance the visual allure and interactivity of websites. The piece discusses the implementation of various animations using both CSS and JavaScript, highlighting the unique benefits each approach offers. While both CSS and JavaScript can achieve similar animation effects, the article suggests that, in most cases, using CSS is the preferred option due to its advantages.

The article delves into the fundamental concepts and practical examples of different animation techniques, such as transitions, keyframe animations, transforms, rotation and spin, scaling, fade in/fade out, and blinking effects. By showcasing how these techniques can be executed using both CSS and JavaScript, the article aims to empower designers and developers to make informed decisions about which method to choose for their animations. Additionally, the article emphasizes the recommendation to lean towards using CSS for animations, highlighting its benefits in terms of performance, simplicity, and consistent behavior across browsers and devices.

#web animation #CSS #JavaScript #transitions #keyframe animations #transforms #rotation #scaling #fade in/fade out #blinking effect

0 notes

thememakker · 2 years ago

Text

LUNO Bootstrap 5 Admin Dashboard Template by Thememakker

LUNO admin template is a premium dashboard solution packed with high-end features. It's designed to empower users to tailor their projects to their exact needs. Here's why LUNO stands out:

100+ Components

LUNO offers a rich set of over 100 components, ensuring you have everything you need to create stunning web applications.

Incredible Set of Interactive Widgets

Interactive widgets with support for multiple dark themes give your dashboard a modern and engaging look.

Quality & Clean Code

Despite its extensive codebase, LUNO's code is immaculate and easy to understand, making customization a breeze.

Fully Responsive

Built with Bootstrap v5, LUNO follows a mobile-first architecture, ensuring your project looks great on any device.

Extensive Documentation

LUNO provides well-maintained documentation that helps you get started quickly, saving you time and effort.

Cross-Browser Compatibility

LUNO empowers applications to run seamlessly on all new-age browsers, ensuring a wider reach for your project.

Active Support

With 24X7 support, LUNO ensures that you get the assistance you need promptly and efficiently.

Fully Customizable

LUNO's developer-friendly architecture makes it a breeze to customize and adapt to your specific project requirements.

W3C Validated

Rest assured that LUNO has passed through all the necessary quality checks to meet the highest web standards.

Get LUNO - Multipurpose Admin Theme

Ready to elevate your web development projects? Check out the exclusive premium Bootstrap 5 admin dashboard template theme on Envato Market. It's your one-stop solution for creating beautiful and functional web applications.

Pre-Built Dashboards

Explore a wide variety of demo dashboards to find the perfect starting point for your project.

Pre-Sale Questions

Have questions before making a purchase? Feel free to reach out to [email protected] for answers and guidance.

Pre-Built Application

Discover a diverse range of demo applications to see how LUNO can suit your project's needs.

Dashboard Screenshots

Take a look at our most attractive dashboard screenshots available in the Sash admin template. These snapshots will give you a taste of the visual appeal LUNO can bring to your projects.

Handcrafted Pages

Explore a wide variety of demo pages, each carefully designed and crafted to meet the high standards of modern web development.

FAQs (Frequently Asked Questions)

What is LUNO Bootstrap 5 Admin Dashboard Template? LUNO Bootstrap 5 Admin Dashboard Template is a premium admin dashboard solution designed for web developers and designers. It offers a comprehensive set of components, clean code, and extensive documentation to streamline web development projects.

Is LUNO Bootstrap 5 Admin Dashboard Template suitable for beginners? While LUNO is feature-rich, its clean code and extensive documentation make it accessible for developers of all skill levels. Beginners can use LUNO effectively with the provided resources.

What makes LUNO stand out from other admin templates? LUNO's standout features include 100+ components, interactive widgets with dark theme support, responsive design, and 24X7 support. Its developer-friendly architecture and adherence to web standards set it apart from the competition.

Can I customize LUNO to match my project's unique requirements? Absolutely! LUNO is fully customizable, and its clean codebase and developer-friendly architecture make it easy to adapt to your project's specific needs.

Is LUNO W3C Validated? Yes, LUNO has passed all the required quality checks and is W3C Validated, ensuring it meets the highest web standards.

Where can I purchase LUNO Bootstrap 5 Admin Dashboard Template? You can get the exclusive premium Bootstrap 5 admin dashboard template theme on Envato Market. Simply visit their website to make a purchase.

In conclusion, the LUNO Bootstrap 5 Admin Dashboard Template & Front-End Elements is your go-to solution for creating powerful and visually appealing web applications. With its extensive features, clean code, and developer-friendly architecture, LUNO is the key to supercharging your web projects. Get started with LUNO today and experience the difference.

youtube

0 notes

hamaonoverdrive · 6 months ago

Text

After a bit of digging, I managed to find this pointing to the cause of the problem (the CSS animation on the tumblr logo being rendered in the background 24/7). I had some issues getting stylish to apply properly, but went ahead and installed this as a bit of overkill, and it works!

A weird side effect is that my sidebar looks like this now:

what is it about this website that's terribly optimized 💀 just having a tab open to tumblr makes my T420 start working at 50% CPU power. No other website seems to do this

#quality text post #CPU still ramps up a lot when the page first renders but I think that's unavoidable #UPDATE: turns out that script blocks the sideblog selector. re-enabled CSS transforms and now that works and the sidebar looks normal :+1:

5 notes · View notes

danny-chai · 1 year ago

Text

ao3 skin that i made!! (copy code under "keep reading")

it's a messy combination of pieces of code from other people's skins and my own changes

the header image is NOT MINE! it is "Pattern Galaxy Space Planets Vibrant Linear Universe" by Arncil on Redbubble, which i just used as an example for an image you could use!

here are some of the skins that i can remember using as part of this, but i've been building it for years so forgive me if i forget some:

Shortening long tag fields by Xparrot (on ao3)

Slim Shaded by AO3 (on ao3)

Lily Garden by tealtiam (on Tumblr)

AO3 Tag category coloring! by ao3css (on Tumblr)

come back here to my tips or leave a comment if you need some help customizing the code!

Background color: #26303C

Text color: #CBC6C3

Header color: #46626D

Accent color: #993F33

steps to create a new skin using this code:

log into ao3 account

go to dashboard >> skins

click "create site skin"

make sure TYPE is "site skin"

add a unique title

copy all code below

paste into field 'CSS'

click on "use wizard" at the top

copy and paste the four colors written above into their corresponding boxes

click SUBMIT

click USE

how to customize this skin:

FONT SIZE: at the very top of the code, change the "90%" to be bigger or smaller to change the font size within a fic

MAIN COLORS: to change the main colors, select "use wizard" when editing the skin and replace any of the four hex codes under "Background color:", "Text color:", "Header color:", and "Accent color:"

SECONDARY COLORS: find all hex codes within the code and change those numbers as you like! i changed all colors to match with the color palette of the header photo that i chose to make it feel cohesive

TAG COLORS: towards the end, the "relationship", "character", and "freeform" tags alternate three colors to make them easy to separate. in this skin they are all very similar, so you can change those to be whatever colors you like!

HEADER PHOTO: find the link towards the end of the code right before the warning tags and replace it with a link to any photo you like! it loops, so you don't have to worry about sizing or anything

FONT: i'm unsure how exactly to do this, but the in-fic font is currently set to Georgia Serif, so i suppose just go find that and replace it with your preferred font!

BORDER STYLES: wherever you see the code "border-style:", replace the word that comes after it with one of these options: none, solid, dashed, dotted, double, groove, ridge, inset, outset, or hidden

WARNING TAGS: at the very end of the code is a list of words or phrases that, when they appear in the tags of a fic, are highlighted in a contrasting color so that they are easy to avoid if necessary. you can add or remove those tags however you like, or change the warning color!

COPY AND PASTE ALL CODE BELOW

#workskin { font-size: 90%; } li.blurb .tags { max-height: 7.5em; overflow-y: auto; } #header { min-height: 0; } #header a, #header fieldset, #header ul.primary, #header ul.primary .current { border: 0; background: 0; } h1 a img { height: 50px; border: 0; } #header .landmark { clear: none; } #header ul.primary { background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(0,0,0,0.75); } #header ul.primary, #header ul.primary .current, ul.primary.actions a, #header ul.primary .current { color: #CBC6C3; } #header ul.primary .current, #header #search input, #header #search input:focus { background: rgba(0,0,0,0.25); color: #CBC6C3; box-shadow: inset 0 0 3px #131A2A; border-color: #131A2A; } .actions, .actions input { text-transform: lowercase; } blockquote.userstuff { font-family: "Mido", "AUdimat", "Ostrich Sans Rounded","Lucida Grande", sans-serif !important; position: relative; background: rgba(0,0,0,0.1); padding: 2%; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 2px rgba(0,0,0,0.4); } blockquote.userstuff:after { content: "\201D"; right: 0; top: auto; left: auto; } body, .userstuff { font-family: Mido, Georgia, serif; } .heading, .userstuff h3, .userstuff h4 { font-family: "CabinSketch", Georgia,serif; } #main .heading { color: #CBC6C3; } #inner .group, #inner .heading, fieldset, .verbose legend, table, table th, col.name, span.unread, span.replied { outline: none; background: transparent; border-color: #131A2A; border-style: double; box-shadow: none; border-radius: 2em; border-bottom-right-radius: 0; border-top-left-radius: 0; } #inner .group .group .group, col.name { border-style: double; border-color: #CBC6C3; box-shadow: 0 0 2px #000; } #inner .bookmark .user.module, #inner .wrapper { border: 0; border-radius: 0; border-top: 3px double #bbb; box-shadow: none; } .filters { font-size: 90%; } .toggled form, .dynamic form, .secondary, .dropdown { background: #fff url("/images/skins/textures/tiles/white-handmade-paper.jpg"); } a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 1px 3px; margin: 2px 0px; border: 2px solid #46626D; border-radius: 5px; } .commas li:after { content: ""; } h5.fandoms.heading { color: transparent; } .favorite a.tag { border: none; } .tags li.relationships:nth-of-type(3n+1) a.tag { background-color: #1d3954; } .tags li.relationships:nth-of-type(3n+2) a.tag { background-color: #264663; } .tags li.relationships:nth-of-type(3n+3) a.tag { background-color: #305475; } .tags li.characters:nth-of-type(3n+1) a.tag { background-color: #214154; } .tags li.characters:nth-of-type(3n+2) a.tag { background-color: #294c61; } .tags li.characters:nth-of-type(3n+3) a.tag { background-color: #31576e; } .tags li.freeforms:nth-of-type(3n+1) a.tag { background-color: #234e54; } .tags li.freeforms:nth-of-type(3n+2) a.tag { background-color: #2a585e; } .tags li.freeforms:nth-of-type(3n+3) a.tag { background-color: #316269; } .tags li.freeforms a.tag:hover, .tags li.characters a.tag:hover, .tags li.relationships a.tag:hover { background-color: #26303C; color: white; } #header .logo { display: none; } #header ul.primary { box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #FCC191 url(https://i.pinimg.com/564x/8c/bc/ae/8cbcae1760dc88ae8730566337a5d2eb.jpg); background-attachment: fixed; } li.blurb a.tag[href*="suicid"], [href*="suicide"], [href*="Suicide"], [href*="rape"], [href*="Rape"], [href*="consentual"], [href*="Consentual"], [href*="non-con"], [href*="consent issues"], [href*="Kidnapping"], [href*="kidnapping"], [href*="Canibalism"], [href*="cannibalism"], [href*="Cannibalism"], [href*="Dove"], [href*="dead dove do not eat"], [href*="murder"], [href*="Murder"], [href*="harm"], [href*="self harm"], [href*="Harm"], [href*="Torture"], [href*="abduction"], [href*="asphyxiation"], [href*="blood"], [href*="Blood"], [href*="death"], [href*="Death"], [href*="gore"], [href*="Gore"], [href*="incest"], [href*="Incest"], [href*="trauma"], [href*="Trauma"], [href*="torture"] { color: #000000; font-weight: bold; background-color: #993F33; }

#ao3 #ao3 stuff #archive of our own #ao3 skins #links #ao3 site skin #css

1K notes · View notes

annierosaart · 7 months ago

Text

Arknights fanfic community, i bring to you something new.

The Arknights Reader Ao3 Workskin

ever wanted to make a fake AK story? complete with backgrounds and character portraits? well now you can!

i spent an entire afternoon coding the css and html for this. i made it as... intuitive as possible.

here's the link to it! have fun:

#arknights #my writing

327 notes · View notes

mahrico · 15 days ago

Text

I’ve been brewing a little magic and ended up crafting three profile codes with the same base layout, each dressed in a different color theme. They're simple, clean, and (dare I say?) kinda enchanting.

Heads up though: the images I used are randomly plucked from the internet while I was sneakily coding during work hours (oops). So please make sure to download and reupload them yourself, then swap the image URLs in the code. Otherwise, things might break later when the images vanish into the void – and nobody needs that kind of heartbreak.

The real beauty of these layouts? They’re powered by CSS variables. At the top of the CSS under :root, you’ll find all the main color settings. Want a new vibe? Just change a few hex codes, and the entire theme transforms. No messy inline styles, no chaos – just clean, manageable code. The HTML is kept as minimal as possible for easier editing and a smoother experience.

♥ Fantasia #1 (Video Theme)

♥ Fantasia #2 (Red Version)

♥ Fantasia #3 (Blue Version)

Have fun customizing, enchanting, and nerding out. And if you end up using it pls show some love, reblog, or drop a comment. ♥ ♥ ♥

#woxcode #html css #css #html #wox #coding #frontend #ui ux design #profilecode

22 notes · View notes

cosmosbuilder · 1 year ago

Text

oh, what's this? your favorite gothic (and adventure/dystopian) literature has been transformed into ao3 skins! oh the humanity!

anyway here are some more ao3 skins inspired from cjgw album. go wild (again)

the code originated and was slightly edited from tealtiam's teal skin with stars and here's a google doc with links to the CSS's and a (probably bad) installation guide along with my other skins

#chonny jash #cjgw #gwtnlh #the novel lyric hunt #ao3 skins #ao3 site skin #back at it agian with more skins #every once in awhile i need to make more

261 notes · View notes

punk-nothing · 5 months ago

Text

Started writing a Choose-Your-Own-Adventure sequel to Disco Elysium starring Cuno. Written in the style of the source material with some game elements.

The first entry features a tutorial, a list of Cuno’s skills that you spec into and the first proper chapter.

If anyone feels like checking it out that would be neat. Figuring out the CSS / HTML for the work skin made me want to drill a hole in head, so please don’t turn off the creator style lmao

#disco elysium #cuno #kuuno de ruyter #harry du bois #ao3 #archive of our own #fanfic

33 notes · View notes

cafetempsrpg · 7 months ago

Text

Module d'écriture inclusive Forumactif

Bonjour/bonsoir à toustes ! Puisque mon taff à la base c'est plus de coder que de grapher, je vous partage aujourd'hui un petit module permettant de transformer les points simples en points médians sur forum actif. Pourquoi ce module ? Si certains adons sur navigateurs permettent de le faire automatiquement, ils ne sont malheureusement pas disponible sur tout les navigateurs web. Il y a aussi des raccourcis claviers, mais ça peut rallonger le temps d'écriture et/ou poser quelques difficultés aux RPGistes handi qui ont besoin de faire une manipulation en plus lors de l'écriture. ça permet aussi à celleux qui ne veulent pas installer un addon spécifiquement pour ça (on vous voit celleux qui écrivent leurs RP depuis le PC du boulot) (je suis aussi coupable) de tout de même transformer leurs points de ponctuation simples en points médians, mais aussi à celleux écrivant depuis leur portable de le faire facilement. Utiliser le module : Lorsque vous écrivez votre RP/message en écriture inclusive et utilisez des simples points, comme pour le mot écrivain.e par exemple. Prévisualisez votre message une fois le RP terminé, puis cliquez sur le bouton "en inclusif". Un pop up en haut de votre fenêtre s'ouvriras. Confirmez jusqu'au bout, enregistrez dans le presse papier et collez le nouveau contenu de votre RP/message modifié. Tout vos mots en inclusifs, séparés d'un point simple se transforment en point médian comme ceci : écrivain·e En cas de catastrophe et de bug du module, utilisez le ctr+z (ou commande+z sous Mac) pour retrouver votre texte d'origine. Postez le tel quel, actualisez la page avec F5 puis éditez votre message en utilisant de nouveau le bouton "En inclusif" pour avoir le bon texte dans votre presse papier.

Installer le module :

Créez une nouvelle page Javascript dans votre panneau d'admin via le Module et sélectionnez "sur toutes les pages". Copiez/collez le Javacript.

2) Ensuite, dans votre template posting_body (au sein de la partie "Poster & Messages privés") ajoutez le bouton En Inclusif où vous le souhaitez :

<button id="replaceButton">En Inclusif</button>

préférablement au même niveau que vos boutons "prévisualiser" et "envoyer" pour vous repérer, cherchez le commentaire " BEGIN switch_preview " vous y trouverez normalement les boutons de prévisualisation, de brouillon et d'envoi. Puis dans votre feuille CSS, personnalisez le bouton à l'aide du sélecteur #replaceButton { votre CSS ici } Vous pouvez retrouver le code sur github juste ici, pour trouver le code javascript à copier/coller ouvrez simplement la page "javacript" ! Le bouton est linké pour sa part dans la page posting_body : bouton juste après le commentaire forumactif visant à vous repérer Si jamais d'autres codeur·euses veulent collaborer pour l'améliorer, n'hésitez pas à me contacter ♥

35 notes · View notes

jergg · 1 year ago

Text

learned something interesting trying to make pets reappear on their lookups

.contentModuleContent img {display: none;}

^ short answer, this line was to blame for CSS hiding the pet image. I wrote my own PL code so my fault. it was intended to hide the customization rating stars and some other cruft. Pretty quick to fix, no need to remove the above line.

#pet_anim img {display:block;}

But...... that means the pet is an image separate from their customization items? You can manipulate the size and margins, but it gets off center really easily. how about transform

#pet_anim img {display:block; transform: rotate(180deg) scale(2)}

it doesn't save because [whatever neopets reason here]. how about filter? people used to go nuts grayscaling their shops back in the late 00s...

#pet_anim img {display:block; filter: grayscale(0.8) drop-shadow(3px 2px 30px #ff0000) hue-rotate(210deg)};

and this one does save!

it's lookup CSS so it doesn't generated into the images on userlookups/forums but on their lookup your pet can glow (or radiate darkness) or be grayscale or inverted idk.

Also clothing may or may not share the pet layer so prepare for a scare if doing it on customized pets. maybe you'll make something better looking

#neopets #petlookups are the only places you can use transition and [target=] properties too #someone with design skill can make good w that

159 notes · View notes

josegremarquez · 5 months ago

Text

Código html con encabezado cuyo fondo sea una imagen

código HTML que crea un encabezado con una imagen de fondo, junto con un menú de navegación simple. He utilizado CSS para dar estilo al diseño y posicionar los elementos: HTML <!DOCTYPE html> <html> <head> <title>Encabezado con Imagen de Fondo</title> <style> header { height: 300px; background-image: url('imagen1.jpg'); background-size: cover; background-position: center; position:…

0 notes

clonecoding-en · 2 years ago

Link

Exploring Web Animation: CSS vs. JavaScript

This article delves into the realm of web animation, exploring a wide range of techniques used to enhance the visual allure and interactivity of websites. The piece discusses the implementation of various animations using both CSS and JavaScript, highlighting the unique benefits each approach offers. While both CSS and JavaScript can achieve similar animation effects, the article suggests that, in most cases, using CSS is the preferred option due to its advantages.

The article delves into the fundamental concepts and practical examples of different animation techniques, such as transitions, keyframe animations, transforms, rotation and spin, scaling, fade in/fade out, and blinking effects. By showcasing how these techniques can be executed using both CSS and JavaScript, the article aims to empower designers and developers to make informed decisions about which method to choose for their animations. Additionally, the article emphasizes the recommendation to lean towards using CSS for animations, highlighting its benefits in terms of performance, simplicity, and consistent behavior across browsers and devices.

#web animation #CSS #JavaScript #transitions #keyframe animations #transforms #rotation #scaling #fade in/fade out #blinking effect

0 notes

amphibianauthor · 6 months ago

Text

Case File 8008135: The Disappearance of Impulse EsVee and Skizz LehMan

Welcome to @that-fall-guy and I's 16k Winter Solstice Fic! We decided to tell an epistolary [collection of documents] fic complete with audio, photos, and a majority of HTML/CSS. (The CSS alone was 3k words) Thank you fallguy for being an amazing co-writer, and thank you @hermitadaymay for hosting a lovely event.

Summary below the cut:

Contents of Case File 8008135 as taken from the Douglas County Sheriff’s Office. Warning: Viewing restricted material without proper credentials and access level is prosecutable under Wis. Law §19.85

OR

Rumors of the existence of ghosts in the Sunny Meadows Mental Institution of Maple, Wi is not as far-fetched as the Douglas County Police Department once believed. Grian, Scar, Gem, Impulse and Skizz would have been more than willing to show the department without all the fanfare of a hunt gone wrong, though.

[Note this is an entirely FICTIONAL case file.]

#ao3 #archive of our own #html coding #hermitcraft fanfic #fanfic #ao3 coding #my fic

22 notes · View notes

allthecastlesonclouds · 10 months ago

Text

Liv laughs outright, selecting the prompt and copying it. “Sure, Ms. D,” she mutters, and Wendell laughs too as he slices through a piece of foam. “Well, that wouldn’t normally be my go-to prompt, I think, but– yeah, that works.” Wendell nods into his project. “Yeah, I completely forgot about that until just now, but– yeah. Funny coincidence, huh?” “Yeah, I guess I know what I’m writing, then.” She opens up a new document and pastes the prompt in, then command+enters onto the next page to start writing. “Maybe I’ll actually get it done by tomorrow.” She can pull the best student card for once. Ms. D doesn’t need to know about her weekend. - - - Liv Skyler, a final English assignment, and change

trans liv fic trans liv fic trans liv fic

i learned css for this one. so. :] written for @d20ficoff!!

#dimension 20 #never stop blowing up #nsbu #liv skyler #wendell morris #olivia skyler #d20 #d20 fanfic #trans liv skyler #castles fics

40 notes · View notes