Actions

  • Entire Work
  • Hide Creator's Style

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 1 of CSS in Testing
Stats:
Published:
2020-07-10
Completed:
2022-04-18
Words:
17,765
Chapters:
16/16
Comments:
323
Kudos:
1,235
Bookmarks:
893
Hits:
38,031

CSS in Testing

Summary:

This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)

(Pics are mine though)

Chapter 5 is probably what you're looking for ;)

I'm not going to say I take requests, but I'm always looking for inspiration.

It seems I've broken Ao3 yet again. I can no longer add more code to my work skin so we're moving on to part two!

Notes:

(See the end of the work for notes and other works inspired by this one.)

Chapter 1: Changing the Basic Appearance of Text

Chapter Text

This is a heading

Chapter 1

YEAR 30,000

ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST

THIRD MONTH OF AUTUMN

-

YEAR 30,000

ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST

THIRD MONTH OF AUTUMN

ROAN

YEAR 10,302

FIRST YEAR UNDER THE REIGN OF QUEEN ZELDA THE LIBERATOR

THIRD MONTH OF SPRING

WOLF

YEAR 11,669

SEVENTEENTH YEAR UNDER THE REIGN OF QUEEN ZELDA THE RESURGENT

SECOND MONTH OF SPRING

ADLER

YEAR 10,572

432ND YEAR IN THE AGE OF PIRACY

SECOND MONTH OF SUMMER

LUCIEL

HTML Coding (In Text)

<p class="goldtitle" align="center"><strong>Chapter 1</strong></p>

<p class="blueheader" align="right"><strong>YEAR 30,000</strong></p>
<p class="blueheader" align="right"><strong>ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST</strong></p>
<p class="blueheader" align="right"><strong>THIRD MONTH OF AUTUMN</strong></p>

<p class="blueheader5" align="right"><strong>YEAR 30,000</strong></p>
<p class="blueheader5" align="right"><strong>ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST</strong></p>
<p class="blueheader5" align="right"><strong>THIRD MONTH OF AUTUMN</strong></p>

CSS Coding (Workskin)

 

#workskin .blueheader {
  text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
  color: #489ab8;
  font-size: 1.1em;
  font-family: Georgia,Times,Times New Roman,serif;
  border-radius: 2px;
  border-right: 10px solid #fad384;
  padding-right: 15px;
  padding: 11px;
  transform: skewY(-.3deg);
  margin: 0px auto;
}
#workskin .blueheader5 {
  text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
  color: #489ab8;
  font-size: 1.1em;
  font-family: Georgia,Times,Times New Roman,serif;
  border-radius: 2px;
  border-right: 10px solid #fad384;
  padding-right: 15px;
  padding: 10px;
  background: linear-gradient(90deg, #1d718200 98%, rgba(242,190,84,1) 100%);
  transform: skewY(-.3deg);
  margin: 0px auto;
}




#workskin .goldtitle {
  color: #f2be54;
  font-weight: bold;
  font-size: 30px;
  font-family: Georgia,Times,Times New Roman,serif;
  text-align: center;
  text-shadow: -1px 1px 3px #191a1d, 1px -1px 3px #191a1d;
  transform: skewY(-.3deg);
}