Animated Mizore Shirayuki List layout with falling snow overlay!

Jan 24, 2012 7:13 AM

Offline

Feb 2010

12692

This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
http://myanimelist.net/forum/?topicid=419405

The design works for both anime and manga lists. For more layouts check the full list of Premade Layouts:
http://myanimelist.net/forum/?topicid=318587[/b]

This is a GIF preview. The snow in the actual layout is smoother and less choppy.

Here's a list layout I designed with the animated snow (a secondary background) in front of the main background! It features Mizore from Rosario+Vampire. The code has notes if you want to change the backgrounds or swap the falling snow with another image (like falling blossoms or rain, faster snow, or another background image!). Its easy to Google for these kind of images. Here's another speed of the same snow you can download and use: http://i44.tinypic.com/2akcj7m.jpg

How to put the overlay in front!
Find the code #inlineContent (under SECONDARY BACKGROUND) and increase the z-index to 2 or more. The overlay should appear in front of the list now. It won't block the list as long as you have pointer-events: none; in the code too. You can swap the snow with another image to get a background in front of your entire list! See below on making that background more see-through.

Make the overlay translucent (see-through)
In case you move your overlay in front of your list with the above instructions, you should also make it somewhat see-through to see your list. Change the opacity code number to something between 0 and 1; it will make the image more and more see through the closer to 0. For example, opacity: .5; makes the image half see-through.

Code:

/*
MAIN BACKGROUND
This is the main background, at the very back of the layout.
To change it change the image link in the parenthesis after "background: url"
To change the position change right/top with other positions, like bottom or left.
To make the background scroll instead of staying in place change the background-attachment from "fixed" to "scroll".
*/
body {
background-image: url(http://i.imgur.com/qT1mBGV.jpg);
background-position: right top;
background-attachment: fixed;}

/*
SECONDARY BACKGROUND
This is the image in front of the main background but behind the list.
To change the background, change the link in parenthesis after "background: url"
*/
#inlineContent {
background: url(http://i43.tinypic.com/2efozgp.jpg) repeat fixed transparent !important;
display: inline-block !important;
height: 100% !important;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100% !important;
z-index: -1 !important;
pointer-events: none !important;
opacity: .8;}

/*LIST SETTINGS
You can change the list width here.
To change the position of the list see my tutorial here:
http://myanimelist.net/forum/?topicid=393437&show=0#post1
*/
#list_surround {
position: absolute !important;
left: 10px !important;}

#list_surround {
width: 650px;
}

/*ALTERNATING ROWS, LIST COLORS
You can alter the list colors here, see where it says blue, purple, etc.
The colors here correspond to what colors you see on the list.
Change them here. For example changing black to green here and saving will change the
black colors on the list to green.
Opacity is the degree of how transparent (see-through) the list is. .01 is almost completely clear. .99 is barely see-through.
*/
.status_selected, .header_title, .td1, #grand_totals{
background-color: blue;
background-image: url("none") !important;
color: white;
opacity: 0.8;
}
.status_not_selected, .table_header, .category_totals, .td2, #copyright {
background-color: purple;
background-image: url("none") !important;
color: white;
opacity: 0.8;}

/*ALTERNATING ROWS, LIST COLORS ON CURSOR HOVER
This is the same as above, except its the colors you see on the list when you point your cursor on them.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover {
background-color: violet;
background-image: url("none") !important;
opacity: 0.8;
}
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover {
background-color: violet;
background-image: url("none") !important;
opacity: 0.8;
-moz-transition: .2s linear;
-webkit-transition: .2s linear;
-o-transition: .2s linear;
}

/*PADDING
The space around the words in your list.
*/
.status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover,
.status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals,
.status_not_selected, .table_header, .category_totals, .td2, #copyright{
padding: 2px;
}

/*ANIME/MANGA TITLE FONT SETTINGS
*/
.animetitle, .animetitle:visited {
color: white;
font-family: times New Roman;
font-size: 20px;}

/*OTHER FONT SETTINGS
*/
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: cyan;
font-family: Lucida Grande;}

/*BORDERS
*/
.status_selected, #grand_totals,
.status_not_selected, .header_title, #copyright {
border-color: white;
border-style: solid;
border-width: 1px;
}

.td1, .td2, .table_header {
border-color: white;
border-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-top-width: 0 !important;
}

.category_totals{
border-color: white;
border-style: solid;
border-width: 0 1px 1px;
}

/*OTHER CODES
*/

body {
background-color: white;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover, a:visited:hover {
color: black;
text-decoration: underline;
}
.thickbox {
color: cyan;
font-family: fantasy;
font-size: 12px;
}
.header_title {
height: 52px;
}
.category_totals {
height: 30px;
}
#copyright:after {
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info.";
}
#copyright, #grand_totals {
margin: 0 auto;
text-align: center;
}

Shishio-kunJun 27, 2014 11:08 PM

Jun 27, 2014 11:06 PM

Shishio-kun

Offline

Feb 2010

12692

Updated and fixed; the backgrounds been put back since Imageshack deleted it and I've added improvements to the overlay snow and new tips. They show you how to move the overlay in front of your list (it won't block the list) that can have its opacity adjusted and background changed.

See All Discussions

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Apr 15, 2010	7924	by Shishio-kun »» Sep 24, 1:50 AM
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page ) Valerio_Lyndon - Apr 19, 2018	1262	by Shishio-kun »» Sep 22, 4:35 AM
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page ) Shishio-kun - Jul 21, 2017	382	by Shishio-kun »» Sep 22, 4:29 AM
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 ) Shishio-kun - Feb 16, 2023	57	by Shishio-kun »» Sep 22, 4:27 AM
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates Shishio-kun - Feb 16, 2023	31	by Shishio-kun »» Sep 22, 4:14 AM

Animated Mizore Shirayuki List layout with falling snow overlay!

More topics from this board

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters