Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 1 of butter-tartz-tutorialz (CSS & HTML on AO3)
Stats:
Published:
2024-03-24
Completed:
2024-03-25
Words:
2,923
Chapters:
3/3
Comments:
12
Kudos:
31
Bookmarks:
16
Hits:
455

How to Make Stylized CSS Card Links for your Fics

Summary:

This is a tutorial and live-example on how to use CSS skins and HTML on AO3 to make some stylish card links that move around and look pretty cool when you hover your cursor over them :)

Notes:

The Unabridged Guide on Chapter 1 walks you through the process of how everything works with examples and demonstrations.

Check out Quick Start on Chapter 2 if you want to get started as soon as possible.

And the full CSS Work Skin is available on Chapter 3.

(See the end of the work for more notes.)

Chapter 1: Unabridged Guide + Examples

Chapter Text

Today I will be showing off how to make these cards that I used in Chapter 4 (CHOOSE YOUR CHARACTER) of IJKHM, my personal CSS-sandbox which has derailed into a fic of its own. Read with caution, it is unabashedly shameless fetish material. You have been warned.

You can use them to:

  • link to your socials in the end notes of a fic.
  • link to various text anchors and jump between sections of chapters.
    • ^ This is what I did in my fic :)
  • link to different chapters and fics.
  • anything else you can think of

    • This is my first CSS Tutorial. Back when I was new to this, I got all of my CSS and HTML knowledge by picking apart people's AO3 skins and trying to figure out how they work. I thought back to those tutorials and how useful they were and who knows, maybe someone will enjoy having these fun cards in their fics too.

    Getting Started

    I might make a page explaining skins in more detail, but for now, you can have the quick-start:
    First, you'll have to create a new work skin.
    Create a work skin, give it a title, and save it once you have something in there.

    Then, you'll need to create a new fic or add your work skin to a pre-existing fic.
    On your fic, scroll down to "Select Work Skin".
    Scroll down to the box labelled "Work text*" and put it in HTML mode if it isn't already.

    CSS goes in the Work Skin, HTML goes in the fanfic. You might be switching between these often when you're previewing and adjusting things, so it is good to familiarize yourself with switching from one to the other.

    Even more importantly though, you should keep the bulk of your typing somewhere else. You don't need a coding tool, any text editor like Google Docs, Notepad—as long as it can hold what you're working on, it will work. This way, your work will be saved and you can come back to it later even if something messes up your work and you lose it. The other great thing about this is that it'll keep your code the way you left it. When you save your code on AO3, it will skim through it and clean it up for security and convenience purposes. Sometimes this may make it harder to follow along with your work, so I recommend pasting your code somewhere before saving or previewing.

    Now that you have your setup, we can get to work.

    The Cards

    Our cards are made of a few basic components: namely the card, an image, a link, and a highlight. Feel free to include or omit any details as you like.

    Our cards are composed of a few basic components. Let's start with the simplest: designing the base of the card.

    We're starting with CSS to design the card, so make sure you're in the work skin. There, you can type in:

    CSS

      
#workskin .card {
  display: inline-block;
  border-radius: 1em;
  width: 6em;
  height: 8em;
  padding: 0.5em;
  overflow: hidden;
  transition: transform 1.5s ease, background-color 1.5s ease, box-shadow 1.5s ease-out;
  transform: skewX(15deg);
  margin-left: 4.3em;
  border: 4px solid  #555 ;
  background-color:  #555 ;
  box-shadow: 0em 0em 3em  #555 ;
}

    That's your basic card. You can change the colors ( #555555 by default) right from here if you want, but you can also make a class that builds off of the card.

    First of all, AO3 doesn't support 3D transformations with its limited CSS. Fortunately however, we can fake the effect with 2D transformations and some sneaky tricks to get as close as we can to the ideal results. Our cards will use the skew and rotate transformations along with some transitions to tie everything together.

    CSS

      
#workskin .card:hover {
  transform: rotate(-15deg);
  background-color: #fff;
  box-shadow: -1.5em 1em 3em  #555 ;
}

    Then for the icon:

    CSS

      
#workskin .card .icon {
  content: url(REPLACE ME WITH IMAGE URL);
  width: 4em;
  height: auto;
  margin: auto;
  transition: opacity 1.5s ease;
  opacity: 0;
}

    Again, you can replace content with your image. Here are a few things to note:
    Replace the quotation marks with a direct image URL like this:
    url(https://archiveofourown.org/images/ao3_logos/logo_42.png)

    AO3 doesn't like image URLs with irregular domains. This means mostly anything outside of the standard .com or .org. It also doesn't like images that don't end with a regular image file type, meaning it wants something ending in .png, .jpeg, etc. You'll see that I used the AO3 logo because it suits these conditions.

    Additionally, AO3 uses "icon" as a class name for displaying profile pictures. That is why we are selecting specifically only the icons within the cards. If you'd like your images to be displayed without a card, rename the class or make a new one.

    Next, you can add a link:

    CSS

      
#workskin .card .link {
  top: -.25em;
  left: -.25em;
  position: absolute;
  border-radius: 1em;
  width: 6.5em;
  height: 8.5em;
  padding: 0.5em;
  z-index: 1;
}

    This is a transparent overlay that will sit on top of your card and take clicks. You don't need to change anything here.

    Then the highlight:

    CSS

      
#workskin .highlight {
  position: absolute;
  top: -3%;
  left: 0;
  width: 1em;
  height: 106%;
  margin-left: -55%;
  transform: skew(-20deg);
  transition: width .5s ease, margin-left .9s ease, opacity .2s;
  background: linear-gradient(#ffe479, #fff);
  opacity: 0.75;
}

#workskin .card:hover .highlight {
  width: 2.5em;
  margin-left: 140%;
  opacity: 1;
  background: linear-gradient(#ffe479, #fff);
}

    You can replace the highlight colors with your own colors, which fade from up to down. You can put any amount of colours in there, and also specify stops for the gradients to specify "when" the color is on the shape.

    We'll also make the smaller highlight that appears before the larger one (which, ironically enough, uses the ::after pseudo-class). It will follow behind the larger highlight and behave the same as the rest of the highlight on hover.

    CSS

      
#workskin .highlight::after {
  content: "";
  position: absolute;
  top: -3%;
  left: 0em;
  width: 0.6em;
  height: 106%;
  margin-left: -55%;
  background: linear-gradient(#ffe479, #fff);
  opacity: 0.75;
}

    Now on your cards, you won't see the highlight while it's outside of the card. This is because we have overflow: hidden;, which will hide any part of the card that "overflows" out from the main card element. Right now in this demo, it's just visible for demonstrative purposes. If, for whatever reason, you want to have the highlight visible, you can do that by setting the property like overflow: visible; instead.

    That's all you need for your first card, so you can save the work skin and start putting in your HTML to actually put the card in your fic:

Work Text*

  
<div class="card">
  <a class="link" href="#url"></a>
  <div class="icon"></div>
  <div class="highlight"></div>
</div>

Only include the classes you want to use. For example, if you didn't make a link, you don't need to put in <a class="link" href="#url"></a>

For people that are using links, you'll notice #url. You can replace this with any link you'd like, and that card will redirect to that page. However, if you have a # symbol in front, it will act as a reference to an anchor on your fic page.

This means that writing #url will direct you here:
https://archiveofourown.info/works/54675064#url

Except instead of this fic, that'll link you to #url on your fic.

Where does that lead? Well, you decide!

Hide this anchor anywhere in your fic, and then your card will lead you to there:

Work Text*

<a name="url"></a>

On this fic, the #url anchor leads to the examples at the end of the chapter. Try it for yourself and see where you end up!

Making Your Own Classes

This is great for making one card, but if you're making any more than one, you should leave the template as is and make your own classes that build on from them.

All of your classes can remain unchanged without consequences, except you'll want to remove the content line from the icon class. Like this:

CSS

  
#workskin .card .icon {
  content: url(REPLACE ME WITH IMAGE URL);
  width: 4em;
  height: auto;
  margin: auto;
  transition: opacity 1.5s ease;
  opacity: 0;
}

It's okay to remove the image here, because we'll be adding our image back in a later class. Everything else will stay the same, then you can just add new classes.

Some examples:

CSS

  
/* Note how there's no spaces here */
#workskin .card.dirk {
  box-shadow: unset;
  background-color: #f2a400;
  border-color: #f2a400;
}

#workskin .card.dirk:hover {
  box-shadow: -1.5em 1em 3em #f2a400;
  background-color: #fff;
}

/* Note the space here */
#workskin .icon .dirk {
  width: 5em;
  content: url('https://i.ibb.co/xDPBC8H/dirk-shades.png');

/* Selectors without spaces means "elements with both the card and the jake class" */
/* Selectors with spaces means "icon elements that are descendants of a jake element" */
/* It is a subtle difference, but an important distinction if you want to use it like this. */
}

Here, we replace the card's colors, we unset the default glow, and made it so it only glows on hover. We also gave it an image icon. Because this symbol is a bit wider, we also changed the icon width from 4em to 5em. And because the original card icon class already had height: auto;, we don't need to add it here and the height will adjust automatically to match the new width.

Anyways, to put this new card in the fic, you're just going to add your new class-name to the card. The children will see the Dirk tag and use the styles we just defined.

Work Text*


<div class="dirk card">
  <a class="link" href="#dirk"></a>  
  <div class="icon"></div>
  <div class="highlight"></div>
</div>

More examples:

CSS


#workskin .sailor-moon {
  box-shadow: 0em 0em 3em #fbc1ff;
  background-color: #fbc1ff;
  border-color: #fbc1ff;
}

#workskin .card.sailor-moon:hover {
  box-shadow: -1.5em 1em 3em #FFEB85;
}

#workskin .card.sailor-moon .icon {
  width: 6em;
  content: url('https://i.ibb.co/qWYMHJN/sailor-moon-heart.png');
}

#workskin .rainbow::before {
  content: "";
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0.5em 0.5em 0 0 #ffbc4f;
  opacity: 0.5;
  position: absolute;
  transform: rotate(10deg);
  margin-left: -283%;
  margin-top: 250%;
  transition: transform 2.5s ease;
}

#workskin .card:hover .rainbow::before {
  transform: rotate(-50deg) scale(1.3, 1.7);
}

#workskin .rainbow {
  width: 2em;
  opacity: 0.7;
  background: linear-gradient(#64e9ed, #caa1ff, #f02b7d);
  margin-left: -70%;
}

#workskin .rainbow::after {
  width: 0.9em;
  background: linear-gradient(#64e9ed, #caa1ff, #f02b7d);
  opacity: 0.7;
  margin-left: 115%;
}

#workskin .card:hover .highlight.rainbow {
  background: linear-gradient(#64e9ed, #caa1ff, #f02b7d);
}

This was me playing with things and trying to make a cute Sailor Moon-themed card, which I think turned out very nicely :)

The next example I decided to put in the end notes, a unique way to link to your socials.

Stuff to Improve on

I'm working on a solution to make the animations mobile-compatible. The links work, but unfortunately the on hover effects do not. I'm also thinking of just playing around and seeing what I can do with these.

Chapter 2: Quick Start

Notes:

There are comments that look like /* this in CSS*/ and <!-- in HTML --> in the code, but you don't have to worry about those. They won't affect anything in the code, in fact, AO3 removes them after you save. They're just there to tell you what to do, but you don't have to delete them or anything.

You can click the heading-links to quickly pull up a new work skin, a new fic, and an HTML/CSS reference.

Chapter Text

Work Text (HTML):

  
<!-- This is your card. Put it wherever. Replace class-name with your new class' name -->
<div class="card class-name">
    <a class="link" href="#destination"></a>
    <div class="icon"></div>
    <div class="highlight"></div>
</div>

<!-- Your card will link to wherever you put this anchor: -->
<a class="link" href="destination"></a>
<!-- Alternatively you can put a link in like: href="https://archiveofourown.info/" -->

Work Skin (CSS):


/* YOUR CARD CLASS */
/* Make as many of these as you want and use their respective names to reference them in your HTML */
/* Replace the #colours with hex codes */
#workskin .class-name {
  box-shadow: 0em 0em 3em #colour;
  background-color: #colour;
  border-color: #colour;
}

#workskin .card.class-name:hover {
  box-shadow: 0em 0em 3em #colour;
}

/* Replace this placeholder image with your direct image-url */
#workskin .class-name .icon {
  content: url(https://archiveofourown.info/images/ao3_logos/logo_42.png);
}

/* ------------------- */
/* BASE CARD TEMPLATE */
/* You don't need really to change anything here. */
#workskin .card {
  display: inline-block;
  border-radius: 1em;
  width: 6em;
  height: 8em;
  border: 4px solid #555;
  padding: 0.5em;
  background-color: #555;
  overflow: hidden;
  box-shadow: 0em 0em 3em #555;
  transition: transform 1.5s ease, background-color 1.5s ease, box-shadow 1.5s ease-out;
  transform: skewX(15deg);
  margin: 1em 3em 0 2.3em;
}

#workskin .card .icon {
  width: 4em;
  height: auto;
  margin: auto;
  transition: opacity 1.5s ease;
  opacity: 0;
}

#workskin .card .link {
  top: -.25em;
  left: -.25em;
  position: absolute;
  border-radius: 1em;
  width: 6.5em;
  height: 8.5em;
  padding: 0.5em;
  z-index: 1;
}

#workskin .card:hover {
  transform: rotate(-15deg);
  background-color: #fff;
  box-shadow: -1.5em 1em 3em #555;
}

#workskin .card:hover .icon {
  opacity: 1;
}

#workskin .highlight {
  position: absolute;
  top: -3%;
  left: 0;
  width: 1em;
  height: 106%;
  margin-left: -55%;
  transform: skew(-20deg);
  transition: width .5s ease, margin-left .9s ease, opacity .2s;
  background: linear-gradient(#ffe479, #fff);
  opacity: 0.75;
}

#workskin .highlight::after {
  content: "";
  position: absolute;
  top: -3%;
  left: 0em;
  width: 0.6em;
  height: 106%;
  margin-left: -55%;
  background: linear-gradient(#ffe479, #fff);
  opacity: 0.75;
}

#workskin .card:hover .highlight {
  width: 2.5em;
  margin-left: 140%;
  opacity: 1;
  background: linear-gradient(#ffe479, #fff);
}

#workskin a.card,
#workskin a.card:link,
#workskin a.card:visited,
#workskin a.card:active,
#workskin a.card:hover {
  border: none !important;
}

Chapter 3: Full Work Skin

Summary:

Copy and paste this into a new work skin, and use the HTML guide from the previous chapter if you need a reference on what to do :)

Notes:


BASIC CARD
Card - Icon - Link - Highlight - Mini-cards
SOCIAL MEDIA
AO3 - Twitter - Tumblr
CHARACTERS
Jake English - Dirk Strider - Sailor Moon / Rainbow Highlight - Moon Animation


Chapter Text


/* BLANK CARD TEMPLATE: */
/* Make new classes to extend this. */
#workskin .card {
  display: inline-block;
  border-radius: 1em;
  width: 6em;
  height: 8em;
  border: 4px solid #555;
  padding: 0.5em;
  background-color: #555;
  overflow: hidden;
  box-shadow: 0em 0em 3em #555;
  transition: transform 1.5s ease, background-color 1.5s ease, box-shadow 1.5s ease-out;
  transform: skewX(15deg);
  margin-left: 4.3em;
}

/* Hover effects that affect the card itself. Here we make the card visible (by turning it white), move it around a bit, and change the "glow" colour (grey by default) and make it a bit stronger. */
#workskin .card:hover {
  transform: rotate(-15deg);
  background-color: #fff;
  box-shadow: -1.5em 1em 3em #555;
}

/* Icons within cards. AO3 already uses 'icon' as a class-name for displaying profile-pictures, so this specifically selects only the icons inside cards. */
/* If you're looking for the setting that centers the icon, that would be margin: auto; Delete that if you want it off-center. */
/* Also be aware that AO3's <center> tags will center the icon along with the card. */
#workskin .card .icon {
  width: 4em;
  height: auto;
  margin: auto;
  transition: opacity 1.5s ease;
  opacity: 0;
}

/* Hover effects that affect the icon. Here we set the opacity to 1 so we can see it. */
#workskin .card:hover .icon {
  opacity: 1;
}

/* Transparent overlay that you can apply to use a card as a link. */
#workskin .card .link {
  top: -.25em;
  left: -.25em;
  position: absolute;
  border-radius: 1em;
  width: 6.5em;
  height: 8.5em;
  padding: 0.5em;
  z-index: 1;
}

/* This is the highlight that appears when you hover over the card. */
/* Move it from the left to the right across the width of the card by animating the margin-left property. */
#workskin .highlight {
  position: absolute;
  top: -3%;
  left: 0;
  width: 1em;
  height: 106%;
  margin-left: -55%;
  transform: skew(-20deg);
  transition: width .5s ease, margin-left .9s ease, opacity .2s;
  background: linear-gradient(#ffe479, #fff);
  opacity: 0.75;
}

/* The ::after pseudo-element is the thinner highlight which, ironically, comes before the main highlight animation. */
#workskin .highlight::after {
  content: "";
  position: absolute;
  top: -3%;
  left: 0em;
  width: 0.6em;
  height: 106%;
  margin-left: -55%;
  background: linear-gradient(#ffe479, #fff);
  opacity: 0.75;
}

#workskin .card:hover .highlight {
  width: 2.5em;
  margin-left: 140%;
  opacity: 1;
  background: linear-gradient(#ffe479, #fff);
}

/* Hiding link borders. My device doesn't show any, but yours might. */
#workskin a.card,
#workskin a.card:link,
#workskin a.card:visited,
#workskin a.card:active,
#workskin a.card:hover {
  border: none !important;
}

#workskin .card.mini {
  width: 4em;
  height: 6em;
}
#workskin .card.mini .icon {
  width: 75%;
}

/* SOCIAL MEDIA CARDS */
/* AO3 CARD */
#workskin .ao3 {
  box-shadow: 0em 0em 3em #900;
  background-color: #900;
  border-color: #900;
}

#workskin .card.ao3:hover {
  box-shadow: -1.5em 1em 3em #900;
}

#workskin .ao3 .icon {
  content: url(https://archiveofourown.info/images/ao3_logos/logo_42.png);
}

/* TWITTER */
#workskin .twitter {
  box-shadow: 0em 0em 3em #1DA1F2;
  background-color: #1DA1F2;
  border-color: #1DA1F2;
}

#workskin .twitter .icon {
  content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/512px-Logo_of_Twitter.svg.png);
}

/* TUMBLR */
#workskin .tumblr {
  box-shadow: 0em 0em 3em #35465c;
  background-color: #35465c;
  border-color: #35465c;
}

#workskin .tumblr .icon {
  content: url(https://cdn-icons-png.flaticon.com/512/145/145811.png);
}

/* CHARACTER CARDS: */
/* JAKE ENGLISH */
#workskin .card.jake {
  box-shadow: 0em 0em 3em #1f9400;
  background-color: #1f9400;
  border-color: #1f9400;
}

#workskin .card.jake:hover {
  box-shadow: 0em 0em 3em #1f9400;
}

#workskin .card.jake .icon {
  content: url('https://i.ibb.co/LxjH7rY/jake-skull-lineless.png');
}


/* DIRK STRIDER */
#workskin .card.dirk {
  box-shadow: 0em 0em 3em #f2a400;
  background-color: #f2a400;
  border-color: #f2a400;
}

#workskin .card.dirk:hover {
  box-shadow: 0em 0em 3em #f2a400;
}

/* Dirk's shades are a little wider so they need a bit more width */
#workskin .card.dirk .icon {
  width: 5em;
  content: url('https://i.ibb.co/xDPBC8H/dirk-shades.png');
}


/* SAILOR MOON */
#workskin .sailor-moon {
  box-shadow: 0em 0em 3em #fbc1ff;
  background-color: #fbc1ff;
  border-color: #fbc1ff;
}

#workskin .card.sailor-moon:hover {
  box-shadow: -1.5em 1em 3em #FFEB85;
}

#workskin .card.sailor-moon .icon {
  width: 6em;
  content: url('https://i.ibb.co/qWYMHJN/sailor-moon-heart.png');
}

/* Rainbow highlight */
/* Add this to your highlight like this: class="highlight rainbow". This will also add the moon if you don't get rid of it */
#workskin .highlight.rainbow {
  width: 2em;
  opacity: 0.7;
  background: linear-gradient(#64e9ed, #caa1ff, #f02b7d);
  margin-left: -70%;
}

#workskin .highlight.rainbow::after {
  width: 0.9em;
  background: linear-gradient(#64e9ed, #caa1ff, #f02b7d);
  opacity: 0.7;
  margin-left: 115%;
}

#workskin .card:hover .highlight.rainbow {
  background: linear-gradient(#64e9ed, #caa1ff, #f02b7d);
}

/* Moon animation, raw CSS attached to the rainbow highlight */
#workskin .rainbow::before {
  content: "";
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0.5em 0.5em 0 0 #ffbc4f;
  opacity: 0.5;
  position: absolute;
  transform: rotate(10deg);
  margin-left: -245%;
  margin-top: 250%;
  transition: transform 2.5s ease;
}

#workskin .card:hover .rainbow::before {
  transform: rotate(-50deg) scale(1.3, 1.7);
}

Notes:

You can put these stylish links basically anywhere :)

(*also be wary if you click on these :,) my accounts have some NSFL-ish content)

This was my first tutorial :) let me know if you want me to show off how to do any other effects from any of my fics! I had fun making this tutorial and it'd be neat to do another one. Comment or Kudos if you'd be interested in that and I'll be happy to provide ^_^

If anyone ever uses these, don't be shy to let me know! I'd love to check them out and see what people are making :0
Also feel free to let me in the comments know if anything isn't working, I'll be happy to troubleshoot and help figure out what's going on in there :)

Series this work belongs to: