#text shadow css | Explore Tumblr posts and blogs

raincloud47 · 3 months ago

Text

Raspberry Delight

The css for the buttons is from a skin made by @ao3commentoftheday with the colors changed to make them more pink.

The pink icons were made by @zerafinacss

@zerafinacss also has pink stat icons that look really good with this skin. It would replace the language/words/chapters ect. with some cute pink icons.

If you want this skin, the code is under here!

First, you have to put these codes into the wizard.

After you save that, you just copy and paste this code:

#header .logo {

background-image: url("https://images.squidge.org/images/2024/03/30/AO3_imageset_pink.png");

background-size: 250px 1044px;

padding: 42px 0 0 60px;

width: 0 !important;

height: 0 !important;

background-position: -140px -749.6px;

}

#header ul.primary,

#header h2 {

box-shadow: none;

}

.required-tags .rating-notrated,

.required-tags .rating-general-audience,

.required-tags .rating-explicit,

.required-tags .rating-mature,

.required-tags .rating-teen,

.required-tags .category-femslash,

.required-tags .category-gen,

.required-tags .category-slash,

.required-tags .category-none,

.required-tags .category-het,

.required-tags .category-multi,

.required-tags .category-other,

.required-tags .complete-no,

.required-tags .complete-yes,

.required-tags .warning-yes,

.required-tags .warning-no,

.required-tags .warning-choosenotto,

.required-tags .external-work,

.status .private .text,

.status .public,

.status .hidden,

.status .rec,

.status .count,

.index .skins .icon,

.index .mystery .icon,

.index .tag .icon,

.index .tagset .icon,

.comment .icon .anonymous,

.comment .icon .visitor,

.abbreviated .icon .visitor,

.abbreviated .icon .anonymous,

.skins .primary .icon,

.admin .primary .icon,

.tagset .primary .icon,

.tag .primary .icon,

a.rss span,

p.kudos,

#symbols-key dl img,

#bookmark-symbols-key img,

img[src$="/images/skins/iconsets/default/icon_user.png"],

img[src$="/images/skins/iconsets/default/icon_collection.png"],

img[src$="/images/lockblue.png"] {

background-image: url("https://images.squidge.org/images/2024/03/30/AO3_imageset_pink.png");

background-size: 200px 835px;

}

#symbols-key dl img,

#bookmark-symbols-key img {

width: 0 !important;

height: 0 !important;

padding: 25px 0 0 25px;

}

img[src$="/images/skins/iconsets/default/rating-notrated.png"],

img[src$="/images/skins/iconsets/default/category-none.png"],

img[src$="/images/skins/iconsets/default/warning-no.png"] {

background-position: -150px 0px;

}

img[src$="/images/skins/iconsets/default/rating-general-audience.png"] {

background-position: -50px -25px;

}

img[src$="/images/skins/iconsets/default/rating-teen.png"] {

background-position: 0px -25px;

}

img[src$="/images/skins/iconsets/default/rating-mature.png"] {

background-position: -75px -25px;

}

img[src$="/images/skins/iconsets/default/rating-explicit.png"] {

background-position: -25px -25px;

}

img[src$="/images/skins/iconsets/default/category-femslash.png"] {

background-position: -25px 0px;

}

img[src$="/images/skins/iconsets/default/category-het.png"] {

background-position: -75px 0px;

}

img[src$="/images/skins/iconsets/default/category-gen.png"] {

background-position: -50px 0px;

}

img[src$="/images/skins/iconsets/default/category-multi.png"] {

background-position: -100px 0px;

}

img[src$="/images/skins/iconsets/default/category-other.png"] {

background-position: -125px 0px;

}

img[src$="/images/skins/iconsets/default/warning-choosenotto.png"] {

background-position: -125px -25px;

}

img[src$="/images/skins/iconsets/default/warning-yes.png"] {

background-position: -150px -25px;

}

img[src$="/images/skins/iconsets/default/warning-external-work.png"] {

background-position: -75px -50px;

}

img[src$="/images/skins/iconsets/default/complete-no.png"] {

background-position: -100px -25px;

}

img[src$="/images/skins/iconsets/default/complete-yes.png"] {

background-position: -175px -25px;

}

img[src$="/images/skins/iconsets/default/bookmark-rec.png"] {

background-position: -100px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-public.png"] {

background-position: -125px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-private.png"] {

background-position: -175px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-hidden.png"] {

background-position: -150px -50px;

}

img[src$="/images/skins/iconsets/default/icon_user.png"],

img[src$="/images/skins/iconsets/default/icon_collection.png"],

img[src$="/images/lockblue.png"] {

width: 0 !important;

height: 0 !important;

}

img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 100px 0 0 100px;

background-position: 0px -75px;

}

.index:not(.comment) .abbreviated img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 75px 0 0 75px;

background-position: 0px -375px;

}

.index:not(.comment) img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 55px 0 0 55px;

background-position: 0px -525px;

}

#greeting img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 1.786em 0 0 1.786em;

background-position: 0 -19px;

background-size: 201% !important;

}

img[src$="/images/skins/iconsets/default/icon_collection.png"] {

padding: 100px 0 0 100px;

background-position: -100px -175px;

}

.index img[src$="/images/skins/iconsets/default/icon_collection.png"] {

padding: 55px 0 0 55px;

background-position: -55px -525px;

}

img[src$="/images/lockblue.png"] {

padding: 15px 0 0 15px;

background-position: -155px -305px;

}

button,

.actions a,

.actions a:link,

.action,

legend .action:link,

input[type="submit"],

.actions a:visited,

.actions li label,

a.action.modal-closer {

color: #FCF5ED;

background: #A0153E;

border: 1px solid #A0153E;

box-shadow: none;

}

button:hover,

.actions a:hover,

.action:hover,

input[type="submit"]:hover {

color: #00224D;

background: #ff2071 !important;

border: 1px solid #ff2071;

box-shadow: none;

}

.actions li .current,

.current,

#dashboard .current {

color: #FCF5ED;

background: #ff2071;

border: 1px solid #ff2071;

box-shadow: none;

}

dl.meta {

border: 1px solid #a0153e;

}

.wrapper {

box-shadow: 1px 1px 5px #a0153e;

}

.actions input:focus {

border-top: 1px solid #a0153e;

border-left: 1px solid #a0153e;

box-shadow: none;

}

#dashboard .secondary {

background: #ff2071;

box-shadow: inset 2px 2px 5px #a0153e;

}

.alert .userstuff {

background: #ff91ba;

border-color: #ffd6e6;

color: #8a0035;

}

.qtip-content,

.notice:not(.required),

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.notice a {

color: #fcb6d1;

}

.notice,

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.error,

.comment_error,

.kudos_error,

.alert.flash {

background: #a0153e;

border: 1px solid #ff91ba;

}

.required,

.error,

.alert.flash {

color: #fcc2d8;

}

button:hover,

.actions a:hover,

.action:hover,

input[type="submit"]:hover {

color: #4f001b;

}

.comment img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 55px 0 0 55px !important;

background-position: 0px -525px !important;

}

^ If you only read on desktop, this last bit is unnecessary. It fixes the blank profile pics from being too big on mobile, but in doing so, it does keep the pics small on desktop

EDIT: If you have any problems with the tags on mobile, go to media and select: "max screen and (max-width: 42 em)" and it should fix it!

#ao3 #site skins

2K notes · View notes

codenewbies · 2 years ago

Text

CSS Long Text Shadow Effect

#css text shadow #css text effects #text effects #css tricks #css effects #html css #codenewbies #css #code #html5 css3 #html5 #css long text shadow #frontenddevelopment #frontend

0 notes

numbpill · 3 months ago

Text

========================================================

[tutorial: build your own neocities/nekoweb page]

========================================================

a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.

this ain’t an average wix, squarespace, or tiktok aesthetic.

we’re talking full html/css with soul and attitude.

[ prerequisites ]

------------------

> an idea

> basic text editor (vscode, notepad++, or even notepad)

> account on https://neocities.org or https://nekoweb.org

> some gifs or tiles you love (dig deep or make your own)

> optional: image host or gif repo (or self-host everything)

[ feeling overwhelmed? read this. ]

-----------------------------------

you do *not* need to know everything.

html is not a mountain. it's a garden.

you plant one tag. then another. then a style. then a button.

you can build your site piece by piece.

and every piece is a portal to somewhere personal.

you are allowed to make broken pages.

you are allowed to use templates.

you are allowed to start over as many times as you want.

this is *your* world. you control the weird.

[ step 1: create an account ]

-----------------------------

> neocities: https://neocities.org

> nekoweb: https://nekoweb.org

this is where you upload your files and see your site live.

[ step 2: your first file - index.html ]

----------------------------------------

make a new file: `index.html`

basic starter:

<html>

<head>

<title>my weird little corner</title>

</head>

<body>

<h1>welcome to the void</h1>

<p>this is my page. it’s strange. like me.</p>

</body>

</html>

> upload to the dashboard

> boom. you’re live at

https://yoursite.neocities.org

or https://nekoweb.org/u/yoursite

[ step 3: add a style sheet - style.css ]

-----------------------------------------

create a file called `style.css` and upload it.

here’s some nostalgic magic:

body {

background: url('tile.gif');

color: lime;

font-family: "Courier New", monospace;

text-shadow: 1px 1px 0 black;

}

img {

image-rendering: pixelated;

}

marquee {

font-size: 20px;

color: magenta;

}

link it in your html and the vibes activate.

[ step 4: decorate it like a haunted usb ]

------------------------------------------

> use <marquee> for chaos scrolls

> embed gifs from https://gifcities.org/

> steal buttons from https://cyber.dabamos.de/88x31/

> set up a guestbook at https://www.smartgb.com/

> loop audio with <audio autoplay loop>

> add fake errors, 90s web lore, random link lists

[ step 5: resources, themes, and comfort ]

------------------------------------------

> templates & layouts: https://numbpilled-themes.tumblr.com

> glitchy gifs & buttons: https://glitchcat.neocities.org/resources

> layout builder: https://sadgrl.online/projects/layout-builder/

> free tiled backgrounds: https://backgrounds.neocities.org/

> beginner html intro: https://www.w3schools.com/html/

> pixel fonts & cyber assets: https://fontstruct.com/

remember:

you don't need to know js. you don't need to be a coder.

you just need a mood, a direction, a dream.

the html will follow.

[ bonus concept: shrine pages ]

-------------------------------

> a page just for one character you love

> a room to house digital fragments of your identity

> embed quotes, music, images like altars

> call it shrine.html and link it from your homepage

[ closing mantra ]

------------------

you are not here to be optimized.

you are not a brand.

you are a ghost inside the machine,

carving your initials into the silicon void.

welcome to Your website.

========================================================

435 notes · View notes

ao3commentoftheday · 1 year ago

Text

peachy keen ao3 site skin

If you'd like to add this site skin to your AO3 account, the code is under the cut.

Colours Used: pale peach: #ffeae4 darker peach: #f3c6ba yellow: #ffd7a8 orange: #ff9b75 reddish orange: #f44336 darkest orange: #8E0505

CSS:

#outer { background: linear-gradient(90deg, rgba(255,155,117,.9) 0%, rgba(255,215,168,1) 100%); }

#header .primary { background: #ff9b75; background-repeat: repeat; box-shadow: none; }

#search .button, #header .logo { display: none; }

#header .heading a, #greeting img.icon { visibility: hidden; }

#header #search .text { background: #ffeae4; border: none; box-shadow: none; width: 7em; }

#header h1.heading a::before { content: " 🍑🍑🍑"; visibility: visible; }

.splash .module h3 { border-bottom: none; color: #f44336; }

#header .menu, #small_login { background: #ffeae4; box-shadow: none; width: 20em; }

#greeting .user > li a { color: #8E0505; }

#header .menu li, .splash .news li { border-bottom: none; }

#header .actions a:hover, #header .dropdown:hover a.dropdown-toggle, #header .menu li a { background: none; color: #f44336 !important; }

#footer { background: #ff9b75; }

#main { color: #8E0505; }

#main a { color: #f44336; }

.splash .favorite li:nth-of-type(2n+1) a { background: #ffeae4; border: 1px solid #ffeae4; border-radius: 5px; }

.splash .favorite li:nth-of-type(2n+1) a:hover, .splash .favorite li:nth-of-type(2n+2) a:hover { background: #f44336; border: 1px solid #f44336; border-radius: 5px; color: #fff !important; }

.resp-sharing-button--twitter, a.resp-sharing-button__link { color: #fff !important; }

.listbox, fieldset, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, .dynamic form { background: url("https://image.freepik.com/free-vector/vector-seamless-pattern-with-peaches_1015-1760.jpg"); background-repeat: repeat; border: 4px solid #fff; box-shadow: none; }

form dl { background: #ffeae4; border: 2px solid #fff; box-shadow: none; }

input, textarea { border: 1px solid #f44336; box-shadow: none; }

input:focus, select:focus, textarea:focus { background: #ffeae4; }

form dt { border-bottom: 1px solid #fff; }

form dd.required { color: #8E0505; }

.LV_invalid { background: #ffd7a8; border: 1px solid #fff; color: #f44336; box-shadow: none; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { border: 1px solid #8E0505; }

.autocomplete div.dropdown ul { background: #fff; border: 1px solid #f44336; color: #f44336; box-shadow: none; }

.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected { background: #f44336; color: #fff; }

.required .autocomplete, .autocomplete .notice { color: #f44336; }

.ui-sortable li { background: #ffd7a8; border: 2px solid #fff; box-shadow: none; }

.ui-sortable li:hover { background: #ff9b75; border: 2px solid #fff; box-shadow: none; }

.ui-draggable form { box-shadow: none; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash, muted.notice, form.verbose legend, .verbose form legend, span.question, span.symbol, select { background: #ffeae4; color: #f44336; border: 2px solid #f44336; box-shadow: none !important; }

#modal { background: #ffeae4; border: 4px solid #ff9b75; box-shadow: none; }

#modal .content { border-bottom: none; }

.actions a:visited, .action:visited, .action a:link, .action a:visited { color: #f3c6ba; }

.actions a:hover, .actions input:hover, .actions a:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus { color: #f44336; border-top: none; border-left: none; box-shadow: none; background: #f3c6ba; }

.actions a:active, .current, a.current, a:link.current, .current a:visited { color: #fff; background: #ff9b75; border-color: #fff; box-shadow: none; }

.actions label.disabled { background: #ff9b75; }

.actions .disabled select { color: #fff; border-color: #fff; }

.delete a, span.delete { color: #f44336; box-shadow: none; }

.secondary { background: #fff; border: 2px solid #f44336; box-shadow: none; }

.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed { background: #ffeae4 !important; }

.draft { border: 2px dashed #ff9b75; }

span.unread, .replied, span.claimed, .actions span.defaulted { background: #f3c6ba; color: #f44336; border: 1px solid #fff; border-bottom: none; }

.actions span.defaulted { color: #8E0505; }

.draggable, .droppable, span.requested, .nominations .rejected { color: #8E0505; }

.nominations .approved { background: #ffeae4; }

.nominations .rejected { background: #f3c6ba; }

span.offered.requested { color: #ffeae4; }

.wrapper { box-shadow: none; }

dl.index dd { background: #f3c6ba; }

p.kudos { background: url("https://64.media.tumblr.com/14dd2ee05dbcc111dab41d6206985fe8/b1eb33fb168e0088-4b/s1280x1920/8fabca965895c42bae4d746506ffc96324eb2fd5.png"); background-repeat: no-repeat; }

.statistics .index li:nth-of-type(even) { background: #f3c6ba; }

fieldset fieldset.listbox { background: #ffeae4; border: 2px solid #ff9b75; box-shadow: none; }

.listbox>.heading, .listbox .heading a:visited { color: #f44336; }

.listbox .index { background: #ffeae4; box-shadow: none; }

dl.meta { border: 2px solid #f44336; background: #ffeae4; }

.actions a, .actions a, .action, input[type="submit"], button, .actions label, .actions a, .actions a:link, .action, .action:link, .actions input, input[type=submit], button, .actions label { background: #ffeae4; border: 1px solid #f44336; text-shadow: none; color: #f44336; }

.current, #dashboard .current { background: #f44336; border: 1px solid #fff; text-shadow: none; color: #fff; }

#dashboard.own { border-top: none; border-bottom: none; }

#dashboard a { color: #f44336 !important; }

#dashboard a:hover { background: #ff9b75; }

label { color: #f44336; }

li.blurb, fieldset ul { background: #ffeae4 !important; border: 2px solid #fff; }

#header h2.collections, .reading h4.viewed, dl.index { background: #ffeae4; color: #f44336; }

.comment h4.byline { background: #f3c6ba; border-bottom: 2px solid #fff; }

.comment div.icon { border-bottom: 5px solid #ff9b75; }

li.comment { border: 2px solid #fff; background: #f3c6ba; }

li.comment ul.actions { background: transparent !important; border: none !important; }

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect, #stat_chart svg g:nth-of-type(2) > g rect:last-of-type, #stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type { opacity: 50% !important; }

h5.fandoms.heading a, .fandom .tag, .work .fandom a.tag { font-variant: small-caps; }

.warnings .tag, .work .warning a.tag { background: #8E0505; border: 1px solid #8E0505; border-radius: 5px; color: #fff !important; padding-left: .5em; padding-right: .5em; }

.relationships .tag, .work .relationships a.tag { background: #f44336; border: 1px solid #f44336; border-radius: 5px; color: #fff !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

.characters .tag, .work .characters a.tag { background: #ff9b75; border: 1px solid #ff9b75; border-radius: 5px; color: #fff !important; font-weight: bold; padding-left: .5em; padding-right: .5em; }

.freeforms .tag, .work .freeforms a.tag { color: #f44336 !important; }

.commas li:after { content: none; }

ul.tags { line-height: 190%; }

#ao3 #site skin

1K 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

evenvillain · 6 months ago

Text

dark flat ao3 skin v2.0

1. log in and go HERE

2. click button "Create Site Skin"

3. name it whatever

4. copy/paste code from below in "CSS" field

5. "Submit"

6. make sure you clicked button "Use" HERE in the list of skins

7. change it as you like

CSS:

outer .region,

footer .group,

.post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea,

main .verbose legend,

.verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover,

modal,

.ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form,

ui-datepicker-div,

.ui-datepicker table { color: #eee; border-color: #151619; outline: #111; box-shadow: none; }

form .notice, form ul.notes { box-shadow: none; }

workskin {

font-size: 1.2em; margin: auto; padding: 0 0.25em; max-width: 60em; overflow-x: auto; overflow-y: hidden; position: relative; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label { border-radius: 0; }

header ul.primary,

outer #footer,

.toggled form { background: #1a1b1f; }

header .primary {

background: none; padding: 10px 0; width: 100%; box-shadow: none; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { background: #1a1b1f !important; }

.user.navigation.actions>li { margin-top: 0.3em !important; }

header .menu,

small_login {

border: 1px solid #1f2126; box-shadow: none; padding: 0; }

.tags.group, .more.group { margin-top: 0.6em; }

header .actions a:hover,

header .actions a:focus,

header .dropdown:hover a,

header .open a,

header .menu,

small_login,

.group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index,

dashboard a:hover,

th,

dashboard .secondary,

.secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #151619; }

.userstuff p { text-align: justify; margin: 1.286em auto; padding: 0; line-height: 1.5; }

.tags.commas { margin: 1.5em auto; }

header .dropdown .menu a:hover,

header .dropdown .menu a:focus,

.splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover,

tos_prompt .heading,

tos_prompt [disabled] {

background: #22262a; }

outer,

.javascript, .statistics .index li:nth-of-type(even),

tos_prompt,

.announcement input[type="submit"] { background: #151619; }

.filters .submit input { border: 1px solid #202227; background-color: #202227; height: 110%; margin: 1em 0; min-height: 2.286em; padding-left: 0; padding-right: 0; text-align: center; white-space: normal; }

header ul.primary,

footer,

dashboard ul,

dl.meta, .group.listbox, fieldset fieldset.listbox,

main li.blurb,

form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset,

inner .module .heading,

.bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #1a1b1f; }

.work.navigation.actions { width: 100%; }

dl.meta { border: none; }

.splash .news li { padding: 1em; }

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff { padding: 1em; }

.logged-in .splash>.module { width: 100% !important; }

dl.meta { max-width: 75em; margin: auto; clear: right; padding: 2em 1.75em; position: relative; overflow: hidden; }

.group.listbox, fieldset fieldset.listbox,

main li.blurb,

.wrapper,

dashboard .secondary,

.secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: none; }

dashboard .current,

.actions a:active,

outer .current,

a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #1a1b1f; border-color: #1f2126; }

greeting .menu {

right: 0; border: 1px solid #1f2126; box-shadow: none; }

select { background-color: #202227; color: #fff; border: 1px solid #202227; min-height: 3em; border-radius: 0; padding: 0 0.6em; }

input:focus, select:focus, textarea:focus { background: #202227; }

body, .toggled form, .dynamic form, .secondary, .dropdown { background: #202227; color: #fff; margin: 0; padding: 0; }

footer a:hover,

footer a:focus,

.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #a7a7a7; color: #111; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #a7a7a7; color: #111; }

header #greeting img,

header .heading a,

header .heading a:visited,

header .user a:hover,

header .user a:focus,

header fieldset,

header form,

header p,

dashboard a:hover,

.actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8,

tos_prompt .heading {

color: #a7a7a7; }

header .menu li {

border-bottom: 1px solid #2c2c2c; margin: 0; text-align: left; }

greeting .icon,

dashboard,

dashboard.own,

.error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #151619; }

dashboard.own {

border: none; }

form.filters dl { margin-left: 0; margin-right: 0; }

.filters .expander:focus { outline: none; }

.filters .expander { padding: 0.45em 0 0.45em 14px; }

.filters .group dt.search, .filters .range dt { padding: 1.25em 0 0.4em 0; }

a.tag { border-bottom: 1px dotted !important; }

a, a:link, a.tag,

header a,

header a:visited,

header .primary .open a,

header .primary .dropdown:hover a,

header .primary .dropdown a:focus,

header #search input:focus,

header #search input:hover,

dashboard a,

dashboard span,

dashboard .current,

.heading, .group .heading, .filters dt a:hover { color: #fff; }

header .dropdown .menu a {

padding: .75em .5em .75em; }

header #search .text {

background: #151619 !important; border-radius: 0; margin: 0.2857em 0.429em; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #999; }

a:active, a:focus, button:focus { outline: none; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label,

header .actions a {

background: #23252a; border-color: #23252a; color: #eee; box-shadow: none; text-shadow: none; }

.actions a:hover, .actions input:hover,

dashboard a:hover,

.actions a:focus, .actions input:focus,

dashboard a:focus {

color: #fff; border-color: #101214; box-shadow: none; background-color: #101214; }

.actions a:active, .current, a.current, .current a:visited { color: #fff; background: #101214; border-color: #101214; box-shadow: none; }

.delete a, span.delete { box-shadow: none; }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

outer .group .heading,

header .actions a,

fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #fff; background: none; }

header .actions a,

fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #eee; }

.mce-container input:focus { background: #F3EFEC; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #fff; }

a, a:link, a:visited:hover { color: #fff; text-decoration: none; }

.announcement .userstuff a:visited { color: #666; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #999; }

.event.announcement .userstuff a, .filters .expander { color: #eee; }

form.verbose legend, .verbose form legend { background: #151619; }

.listbox li.blurb { box-shadow: none; background: #1a1b1f; }

li.blurb, fieldset, form dl { border: none; }

li.blurb, .blurb .blurb { display: block; position: relative; clear: left; padding: 1em 1.4em; overflow: visible; background: #1a1b1f; }

dashboard ul {

float: none; display: block; padding: 0.26em 0; text-align: right; position: relative; background: none; }

user-fandoms {

padding: 1.4em 0; background: #1a1b1f; }

.listbox .index { padding: 0.6em 0; }

.bookmark div.user { background-color: #151619; }

.bookmark dl.stats { margin-bottom: 1.5em; margin-top: 1.5em; }

.dashboard .own, .comment span.unreviewed { background: #1a1b1f; opacity: 1.0; }

.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed { background: #1a1b1f; opacity: 0.95; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label { padding: 0.5em 1em; border-radius: 0; }

header {

margin: 0 0 3em; }

.tags.group, .more.group { padding: 0.6em; }

dashboard a,

dashboard span {

line-height: 2.2; padding: 0 0.5em; }

.listbox>.heading, .listbox .heading a:visited { margin-left: .6em; }

.listbox, fieldset fieldset.listbox { border: 1px solid #1a1b1f; margin: 0.5em auto; box-shadow: none; }

.reading .user { margin-top: 1.5em; padding-top: 0.5em; border-top: 1px solid #23252a !important; }

.comment .userstuff { background-color: #1a1b1f !important; }

input, textarea { box-shadow: none; background: #151619; padding: 0.4em; }

.filters .indicator:before { background: #404248; color: #aaa; display: inline-block; border: 1px solid #404248; margin-right: 0.25em; background-image: none; }

.filters [type="checkbox"]+.indicator:before { padding: 0 0.25em; border-radius: 2px; }

.filters [type="checkbox"]:checked+.indicator:before { background: #970000; color: #ffffff; background-image: none; }

.filters input:checked+.indicator:before { border-color: #1a1b1f; }

.filters input:checked+.indicator+span { font-weight: 500; }

.filters .exclude [type="checkbox"]:checked+.indicator:before { background: #970000; color: #ffffff; background-image: none; }

.filters [type="radio"]:checked+.indicator:before { background: #970000; background-image: none; }

ui-datepicker-div,

.ui-datepicker table { background: #1a1b1f; }

.ui-datepicker td { border: 1px solid #23252a; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #2e3138; border: 1px solid #2e3138; margin: 0.6em auto; padding: 1em; box-shadow: none; border-radius: 0; }

.listbox .index { padding: 0.6em; box-shadow: none; }

dl.meta { max-width: 75em; background: #1a1b1f; margin-top: 1em; }

dl.index dd { background: #151619 !important; }

form.search input[type="text"] { border-top-color: #151619; background-color: #202227; padding: 0.45em 0.45em; border-radius: 0; }

modal {

background: #1a1b1f; border: 10px solid #1a1b1f; margin: 3% 0; max-width: 800px; min-width: 200px; padding-bottom: 44px; position: relative; text-align: left; width: 80%; z-index: 501; }

.post .meta dd ul li { display: block; padding-bottom: 0.6em; }

workskin {

font-size: 1.2em; max-width: 52em; }

div.comment, li.comment { padding: 0.6em; background: #1a1b1f !important; }

#ao3 skins #ao3

193 notes · View notes

icannotreadcursive · 1 year ago

Text

My recent foray into CSS for the sake of Ao3 site skins wound up not being as complex as expected—largely because it turns out the complicated thing I wanted to do can't be done on Ao3 at all.

(If I'm wrong about that, and you happen to know how to make text animation work with Ao3's limited CSS guidelines, please let me know.)

But! I did make this!

A work skin allowing for typewriter-style font with or without ominous red and gold shadow and glow. Perfect for dialogue spoken by Alastor from Hazbin Hotel, or any other creepy bitch with a transatlantic accent!

Work skin CSS below the cut:

#workskin .radio { font-family: 'American Typewriter', 'Courier', 'Andale Mono', 'Courier New', monospace; } #workskin .glitch { font-family: 'American Typewriter', 'Courier', 'Andale Mono', 'Courier New', monospace; text-shadow: 2px 2px #FF0000, 0 0 3px #DAA520, 0 0 5px #8B0000; }

#eiiri made this #ao3 workskin #css #hazbin hotel #hazbin alastor

87 notes · View notes

leithillustration · 4 months ago

Text

Well no, it’s Thursday, but I wanted to share some wips anyway- better late than never, right? 😅

Thank you for the tags @fiend-for-culture @thewholelemon 🥰 I had planned on catching up on everyone’s posts last night, but thought to myself “I’ll just doodle for half an hour before bed, as a treat” and when I next looked up it was 4 hours later.

Three WIPs for your viewing pleasure

1. My dang website

I’ve been updating my portfolio for what feels like a century, though my calender insists it’s only been a week. Working on my website is always something I find really hard— not for lack of technical ability but because I am riddled with self doubt when it comes to presenting my work professionally. I’ve still got a bit to tweak since Squarespace has some irritating limitations, so I’m going to have to add some custom CSS code for things like the drop down menu (why is it so squished up?? Let me edit the spacing!!) and the odd choices in default line height for all my headings (ironically this is the spacing I’d like for my drop down menu, but it looks ridiculous with the main text). Wild to me that you can only edit the headings as a whole, and not set individual line height preferences for h1/h2/h3 etc. So I will persist while also hating every second of it.

Wips 2 and 3 under the cut! Also cw for the lack of clothing in my 3rd wip artwork (this is the sketch I lost 4 hours to last night because reading rote is killing me)

2. Heartstone Town Concept Art

I shared the first image of this a few weeks ago, but I’m posting it again so you can compare it to the latest version and see my progress. I haven’t had much time to work on it since the last time I shared it, but I’ve added a few layers of shadow and I’ve mostly figured out the colour palette now, so the houses in the foreground are more or less complete. Having added the ‘Scenes & Settings’ page to my website, I’m pleased to be adding to this part of my portfolio more. I have other settings planned and I’m excited to explore those when this one is done.

3. On my Fitzloved BS

As mentioned, I set about doing an indulgent but brief doodle last night as a reward for working on my website all day. Then I found a great pose reference and I thought ‘what if Fitz and the Fool?!?’ and suddenly it was 4 hours later and this had happened. (Honestly I probably spent like 2 hours purely on Beloved’s feet and nipple placement… and I’m still not sure about it). I’d like to add colour and maybe a background— I’m picturing this being a kind of post Fool’s Fate au where they go back to Fitz’s cabin, vaguely fitting in with @tragediegh’s OCACD fic, but I also love the distinct colouring of Fitz’s white hair streak and the Fool when he’s golden, so I may end up setting it around the Fool’s Errand cabin era instead. Either way, they are cosy on the rug by the fire, not confusing love with plumbing.

I never know whether to add tags when I’m late for a thing.. but just to say hi and I hope you’re having a good week:

@youarenevertooold @iamamythologicalcreature @alexalexinii @cattocavo @that-disabled-princess

@orange-peony @cutestkilla @rimeswithpurple @larkral @best--dress

@scribble-tier @theimpossibledemon @artsyunderstudy @raenestee @thewholelemon

@nightimedreamersworld @itriednottothinkaboutit @you-remind-me-of-the-babe @angelsfalling16

@the-beard-of-edward-teach @monbons @katatsumuli @fiend-for-culture

@aristocratic-otter @snowbazdaily @argumentativeantitheticalg @lovelyladzzzz @nausikaaa

#wip Wednesday #it’s actually Thursday but what even is time anyway #sneaking fan art into my professional portfolio and website #rote spoilers #fools errand #fools fate #but also fool’s date?#love and plumbing #fitzloved #fitzchivalry farseer #lord golden #still not okay about these books

18 notes · View notes

codingquill · 8 months ago

Text

Day 1 - 100 Days CSS Challenge

Welcome to day 1 of the 100 Days CSS Challenge! In this challenge, we'll bring a design to life using only CSS. Our goal is to recreate the image we're provided with on the challenge page using HTML and CSS.

On the challenge page, we see:

A small preview of the design we need to replicate.

A starter HTML template.

A submission form to showcase our work alongside others who have taken on the same challenge.

Let's dive into the process step by step.

Step 1: Screenshot the Image

The first thing I always do is take a screenshot of the target design. Even if the design includes animation, having a static reference helps me focus on the basic structure and colors. Here’s the screenshot of the design we’re aiming for:

Step 2: Extract the Color Palette

Next, I identify the color palette that we'll need. This helps ensure that we maintain consistency with the original design. Here’s the color palette I’ve created:

Step 3: Identify and Create the Image Elements in HTML

Now that we know the colors, I break down the elements in the image:

Background: This is a linear gradient.

The 100 number: This is the main challenge, and it will require some work.

Text: “days css challenge,” which we’ll place to the left of the number.

Here’s the HTML structure for these elements:

<div class="frame"> <div class="center"> <div class="number"> <div class="one-one"></div> <div class="one-two"></div> <div class="zero-one"></div> <div class="zero-two"></div> </div> <p class="sentence1">days</p> <p class="sentence2">css challenge</p> </div> </div>

Now that the elements are in place, CSS will bring them to life.

Step 4: Bringing the Elements to Life with CSS

Linear Gradient

To create the background, we’ll use a linear gradient. Here’s a basic syntax:

background: linear-gradient(to <direction>, <color-stop1>, <color-stop2>, ...);

Parameter 1: Direction/Angle

This defines the starting point of the gradient. You can either specify a direction (e.g., to top, to bottom) or an angle (e.g., 90deg, 180deg).

Direction options:

to top

to bottom

to left

to right

If you want more precision, you can specify angles:

0deg: Gradient starts from the top.

90deg: From the right.

180deg: From the bottom.

270deg: From the left.

You can also combine two directions, specifying both horizontal and vertical movements, like to left top or to right bottom. This means:

The first keyword (left or right) controls the horizontal movement.

The second keyword (top or bottom) controls the vertical movement.

For example:

background: linear-gradient(to left top, red, blue);

This gradient starts at the bottom-right corner and transitions toward the top-left.

Parameter 2: Color Stops

Color stops define how the gradient transitions between colors. Each color stop specifies a point where a color starts or ends. Here's an example:

background: linear-gradient(to right, red 10%, blue 90%);

This means:

The element starts at 0% fully red.

By 10%, the transition from red begins.

Between 10% and 90%, there is a smooth blend from red to blue.

At 90%, the transition to blue is complete, and the remaining part is fully blue.

Once we understand the concept, we can apply the background we need. In our case, the gradient flows from the bottom left to the top right, so the code will look like this:

background: linear-gradient(to right top, #443DA1, #4EC3C9);

Bonus: Stacking Multiple Linear Gradients

You can also apply multiple gradients on top of each other:

background: linear-gradient(180deg, #f00, #0f0), linear-gradient(90deg, #ff0, #f0f);

Step 5: Making the "100" Number

Creating the Zeros

We start with the zeros. These are simply circles created using CSS. To make a full circle, we use border-radius set to 50%.

The white border gives it the appearance of the number zero.

.zero-one, .zero-two { position: absolute; height: 100px; width: 100px; border-radius: 50%; border: 24px solid #fff; box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); }

This gives us a nice circular zero. We adjust their positions using properties like left and top, and manage the z-index to make sure the zeros stack correctly.

.zero-one { z-index: 8; left: 17px; } .zero-two { z-index: 6; left: 100px; }

Now both zeros are positioned, and they overlap in the way we want.

Creating the "1" Number

The number "1" is made of two div elements:

One-One: This part represents the slanted part of the "1".

One-Two: This is the straight vertical part of the "1".

What make the one-one element slightly slanted is

transform: rotate(50deg);)

the one-two is created simply with a little height and width nothing too particular then it is placed directly on top of the slanted part, giving us the full "1". Its z-index tho has to have a higher value than the slanted part of our 1 to ensure it stays above the slanted one.

Step 6: Adding the Text

For the two sentences “days” and “css challenge,” the styling is basic CSS. You can achieve the look with just a few font changes, some padding, and adjustments to font size. It’s as simple as:

.sentence1,.sentence2{ text-transform: uppercase; margin:0; padding:0; } .sentence1{ font-size:82px; font-weight:700; } .sentence2{ font-size:25px; font-weight:700; margin-top:-20px; }

And just like that, we’ve completed day 1 of the 100 Days CSS Challenge! Each part of the design is carefully crafted using CSS, giving us the final result.

Happy coding, and see you tomorrow for Day 2!

16 notes · View notes

memorizingthedigitsofpi · 9 months ago

Note

pi!!! please reupload the full css for your dark and glowy ao3 site skin i beg! i saw it and immediately was like that's the prettiest thing ever :0

code under the cut

#header { background-image: url("https://cdn.pixabay.com/photo/2022/10/19/16/56/fireflies-7533056_1280.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: #152623; }

#header .heading { height: 15em; }

#header .primary { background: #0d1d1f; box-shadow: 0px 0px 15px #f9f6ce; }

#header .logo, #header .heading sup { visibility: hidden; }

#header .heading a { color: #152623; text-shadow: 0px 0px 15px #f9f6ce; }

.event .userstuff { background: #425e50; border: 1px solid #f9f6ce; }

#outer.wrapper { background: #0d1d1f; color: #f9f6ce; }

#main a { color: #8c9b76; }

#greeting a.dropdown-toggle, #header .actions a { color: #f9f6ce !important; text-shadow: 0px 0px 3px #152623; }

#greeting .menu, #header .dropdown .menu, #header .dropdown:hover a { background: #0d1d1f; box-shadow: 0px 0px 15px #f9f6ce; }

span.submit.actions input.button { display: none; }

#greeting img.icon { display: none; }

#header #search .text, .search [role="tooltip"] { background: #0d1d1f; box-shadow: 0px 0px 15px #f9f6ce; color: #f9f6ce !important; border: 1px solid #0d1d1f; }

form.search input[type=text], form.search input[type=submit], .autocomplete div.dropdown ul { background: #0d1d1f !important; border: none; box-shadow: 0px 0px 15px #f9f6ce; color: #f9f6ce; display: block; }

#header #search .text { width: 7em; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce !important; color: #0d1d1f; border: none; }

.notice a, .comment_notice a, .kudos_notice a, ul.notes a, .caution a, .error a, .comment_error a, .kudos_error a, .alert.flash a { color: #506957; font-weight: bold; }

.splash .module h3 { color: #f9f6ce; border-bottom: 2px solid #f9f6ce; }

.splash .favorite li:nth-of-type(2n+1) a { background: #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; color: #0d1d1f; font-weight: bold; font-variant: small-caps; }

.splash .favorite li:nth-of-type(2n+2) a { color: #f9f6ce; font-weight: bold; font-variant: small-caps; font-size: 110%; }

.splash .favorite li:nth-of-type(2n+1) a:hover, .splash .favorite li:nth-of-type(2n+2) a:hover { color: #f9f6ce; font-weight: bold; font-variant: small-caps; background: #425e50; }

#footer { background: #425e50; color: #f9f6ce; border-top: 3px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

#footer a, #footer .heading { color: #f9f6ce; }

.actions a, .actions a:focus, .actions input:focus, .action:focus, .actions li input, .actions li input[type="submit"], input[type="submit"], .actions li label, ul.navigation.actions li a, .action:link, .actions a:link { background: #425e50; border: 1px solid #f9f6ce; color: #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; border-radius: 5px; }

.current, #dashboard .current { background: #f9f6ce !important; color: #0d1d1f !important; box-shadow: 0px 0px 15px #f9f6ce !important; border-radius: 5px; }

#dashboard.own { border-top: 5px solid #f9f6ce; border-bottom: 5px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

#dashboard a:hover { background: #0d1d1f; box-shadow: 0px 0px 15px #f9f6ce; }

#dashboard a { color: #f9f6ce; }

dl.meta { border: 1px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

.listbox .index { background: #0d1d1f; }

.listbox, fieldset fieldset.listbox { background: #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

form dl, fieldset, fieldset fieldset, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, input, select, select:focus, textarea, span.symbol.question, .own { background: #0d1d1f !important; color: #f9f6ce !important; border: 1px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

.autocomplete li.added, .post .meta dd ul li.added, label, label.required { color: #f9f6ce; }

span.delete { background: #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

span.delete a { color: #0d1d1f !important; font-weight: bold; }

.ui-sortable li, .dynamic form, div.dynamic { background: #0d1d1f; border: 1px solid #f9f6ce; }

.dropdown { background: #0d1d1f; }

form.verbose legend, .verbose form legend { background: #f9f6ce; color: #0d1d1f; box-shadow: 0px 0px 15px #f9f6ce; }

li.blurb { border: 1px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

.draft { background: #0d1d1f; color: #f9f6ce; border: 2px dashed #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

.draft .wrapper { background: #0d1d1f; border: 1px solid #f9f6ce; }

#header h2 { background: #f9f6ce !important; color: #0d1d1f; box-shadow: 0px 0px 15px #f9f6ce; }

#stat_chart svg rect:first-of-type { opacity: 60%; }

.statistics .index li:nth-of-type(2n) { background: #0d1d1f; border: 1px solid #f9f6ce; }

.reading h4.viewed, dl.index dd, table, th, dt.child { background: #0d1d1f; }

#modal, span.replied { background: #0d1d1f; color: #f9f6ce; border: 2px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

h4.heading.byline { background: #f9f6ce; color: #0d1d1f; }

li.comment { border: 1px solid #f9f6ce; }

.comment div.icon { border-bottom: 5px solid #f9f6ce; box-shadow: 0px 0px 15px #f9f6ce; }

.thread .even { background: #425e50; }

.unread { background: #0d1d1f; border: 5px dashed #f9f6ce !important; }

span.unread { background: #f9f6ce; color: #0d1d1f; }

span.indicator::before { box-shadow: 0px 0px 15px #f9f6ce; }

.warnings .tag, .work .warning a.tag, dd.warning.tags a { border: 1px solid #f9f6ce; border-radius: 5px; background: #f9f6ce; padding-left: 2px; padding-right: 2px; box-shadow: 0px 0px 10px #f9f6ce; }

.relationships .tag, .work .relationships a.tag, dd.relationship.tags a { background: none; color: #f9f6ce !important; font-weight: bold; text-shadow: 0px 0px 15px #f9f6ce; }

.filters .expander { background: url("https://64.media.tumblr.com/3c89981f933f9f57157d6dcec6fd85a7/94c6737c6db9ad60-e5/s1280x1920/f7557e617a5439c506721bd326580a0cb4c1f8d8.png") left center no-repeat; color: #f9f6ce !important; font-weight: bold; }

.filters .expanded .expander { background: url("https://64.media.tumblr.com/dab095a2fd9387bc1e0c57747ba6b13f/94c6737c6db9ad60-ad/s1280x1920/c1a4e14e0565cdcac5d3e20bebac3ab440f2d607.png") left center no-repeat; }

8 notes · View notes

the-mspfa-200-favourites-project · 7 months ago

Text

Kunuki Does Alternia

There seems to be like, little legacies I’ve found. Like, how there’s a bit of a throughline from Vast Error to Act 8 and Act Omega. Or The Tapestry -> Karkat Goes to a Convention. Or this fanadventure, which I believe is a more convincing argument that there are legacies/spheres of influence on MSPFA, which is the I’m Good I’m Gone -> Old Fiji Water.png -> Kunuki Does Alternia. Perhaps this doesn’t even exist and I’m just jumping at shadows, but that’s what I’m expecting going into this.

Maybe that’s just because there aren’t a lot of explicitly mature webcomics on the site, and thus the people who would be into that kind of stuff kind of…congregate together? I have no idea where I’m going with this, except to note it down and tell you about it.

And hey, look: IT’S STILL UPD8ING TO THIS DAY! Cool. I always love to see that in Fanadventures.

Oh we’ve got Music IN THE ACTUAL PANELS NOW. Interesting. Very interesting. Have we gotten to that Era of CSS? I guess we have, and that’s fantastic. I haven’t talked about it a lot, but I *love* the Music Communities that MSPFAs seem to create. I think it’s a unique essence of MSPFA that there is even a “scene” of musicians collaborating and creating the best songs you have ever heard for a niche webcomic nobody has ever heard of before except for a few devoted fans. I’ve got to say, this is probably one of the best build up sequences I’ve ever seen/heard(?) for an MSPFA.

OH, SHOOT THE SONG SLAPS HOLD UP. OKAY YEAH I’M SOLD THIS IS THE BEST PRE-INTRODUCTION OF ALL TIME ON MSPFA. THIS IS LIKE. WHOA. HANG ON. WAIT. YOU CAN *DO* THIS IN AN MSPFA, IN A WEBCOMIC? And the story’s like, yep. You can totally make this. You can totally do it, and it’s awesome. And honestly? It is. It is awesome.

I love how it just builds up to “Issue 1” (love unique subdivisions in MSPFAs too) and then decides to just drop “oh btw here are the content warnings.” Like, if you don’t want to read forward, you don’t have to, but even if you don’t like what comes afterwards, you *do* get that sick introduction song, and that’s. Just. Wonderful.

Hey little detail that I just noticed: on page 30, there’s like, this poster that’s being examined. And like, there’s this glare on it? Like, that you might see on posters, but that glare isn’t usually rendered in MSPFAs. It’s kind of a cool effect, and shows a level of attention to detail you might not ordinarily find! IDK I just think that’s neat.

The soundtrack on this fanadventure is SOMETHING ELSE. Incorporating it DIRECTLY into the text without any animations is COOL, because it takes what I think is a major aspect in the pacing of MSPFA, that being the ability to linger on panels or go through them very fast. It allows one to have another axis of like, telling a story, I guess? There’s a lot to be said that I don’t think HAS been said about how adding sound to Webcomics VIA MSPFA can change and add a lot of storytelling techniques, but I don’t think I’m properly able to have that discussion yet.

Okay yeah this is cool, this is very seriously very cool. Absolutely check this one out, at *LEAST* check out the beginning up to the content warning, if you peace out after that, that’s okay, just. Check out that opening. Gosh dang. I didn’t even KNOW you could DO that. Wow.

#Kunuki Does Alternia #mspfa #mspfanventures #mspfa 200 #2018

6 notes · View notes