This topic is part of our CSS Tutorials and Add-ons section. ----------------------------------------------------------------------------------------------------------------------------------------------------- This guide is aimed at beginners, who has little to no knowledge about web design and CSS whatsoever. If you ever wanted to create your own unique design for your anime list, but you didn't know where to start, you are in the right place. I have every intention of creating a complete guide that will cover all topics and answer every question you might have. I N T R O D U C T I O N ----------------------------------------------------------------------------------------------------------------------------------------------------- Feel free to comment, ask questions and give me as many ideas as you can. I will do my best to answer every question, address every issue, and I will try to incorporate those answers to the main guide as well. Considering the size of this guide I will be releasing it in a series of smaller tutorials. The whole thing is going to be divided into three parts: Design Theory, were I will be explaining some basic things like esthetics, basic CSS, tools and programs you can use; Photoshop Tutorials, which will cover everything from creating the background, working with renders, and making a basic design; and finally, the more tutorial... -ish part, where I will walk you through the whole process of making a list design, and break every single line of code in this project down for you. ----------------------------------------------------------------------------------------------------------------------------------------------------- I N D E X -----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------- C H A N G E L O G -----------------------------------------------------------------------------------------------------------------------------------------------------
|
Shishio-kunDec 23, 2014 1:21 PM
----------------------------------------------------------------------------------------------------------------------------------------------------- As I said before, this part of the guide is all about theory... Which means that I will be talking a lot about obvious and – sometimes – unnecessary things. Feel free to skip this part, if you feel strong about your basic knowledge of CSS and web design. If you, however, are new to styling lists on MyAnimeList, I would recommend reading at least those parts of this chapter in which I am covering MAL specific CSS. CHAPTER ONE: Design Theory ----------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------- Tools and Programs -----------------------------[list=1][*]Photoshop or other graphic editor – There are two schools out there: one teaches that you should always start your projects in Photoshop to know exactly what you are doing, the other says that all you need is a draft in your head and you can make the rest up as you go. I, personally, prefer to start in Photoshop, and then move everything to CSS. Even if you don't wanna sketch your design in Photoshop, you still need an image editor of some description to handle all the images. I recommend using programs like Adobe Photoshop, or GIMP [*]Text editor for programmers – If you are a total beginner you are probably using a standard MS Notepad. I can't even begin to describe how horrible this idea is. Just... Just don't. You need something that can highlight the syntax. Something that will give you a visual cue that you made a mistake. I played around with most of the mainstream editors and I, though it is a personal preference, did not liked Notepad++, Adobe Dreamweaver, nor did I liked Netbeans or ConTEXT. The one I liked the most is Sublime Text 3, this one, however, is quite expensive so I would recommend using freeware programs like Atom or Adobe Brackets. [*]Web browser – with all the love that I have for Google Chrome I find it rather unusable in web development. Firefox, on the other hand, is a perfect tool for web developers. As for extensions, I do not recommend using Firebug – though it is a personal preference... I find it a bit awkward, and the standard developer tools that come with Firefox are more then enough – I do, however, recommend grabbing an extension called Web Developer – this one proved to be useful on many ocasions. [*]Lunascape – This is a Japanese triple engine browser. It runs on Gecko, Trident, and WebKit, which basically means that you can check how your design renders in Firefox, IE, Safari and Google Chrome without actually having to install those browsers. Why would you need that? Let's say that different browsers have different engines, and different engines handle stuff in different way, not to mention that different versions of the same engine will also render differently. This adds up a total disaster, and a pain the neck of every web developer, because a layout that looks perfectly in Firefox may be completely messed up on Chrome or Safari, and although IE7 would render the website perfectly, half of the cool stuff would be missing because those things are not supported – Be a web developer, they said; it is going to be fun, they said. Hahahaha. No. [*]Dropbox or other hosting service – seriously, don't host anything on MAL, this website is so broken it will drive you insane. I will be talking about it in details later on, but a hosting service of some description is a must have. |
seavenDec 4, 2014 3:55 PM
| ----------------------------- How to learn CSS ----------------------------- There are hundreds of tutorials on the internet that you can read and watch. But what all of those tutorials have in common is that they miss the general purpose of teaching. Those tutorials do not show you how to think like a web developer, how to solve problems like a web developer. They teach the syntax and then they expect you to somehow figure out the rest on your own. It's like teaching someone the alphabet and then expecting him to write The Lord of the Rings. Sorry, it doesn't work this way. Knowing the alphabet doesn't make you a writer, it makes you a reader. I don't want you to learn the syntax, I want you to understand the language. Knowing the syntax makes you look at someone else's code and say “Why didn't I think of that?”. I don't want you to be that person. I don't want you to be yet another lemming, who knows nothing like Jon Snow. I want you to be able to think on your own, and to work on your own. I want you to be able to put that pretty head of yours to a good use and not only came up with some awesome idea for a design, but also to be able to make this design reality. Someone once told me that everything is possible: If you can design it in Photoshop, you can make it with CSS. And that is true. I am not going to argue with that. However, with MAL... things are getting a bit tricky. We have to work with whatever markup MAL developers gave us, and sadly, it is not much. We are limited. Seriously limited. More than a half of the markup has no ID's and no classes. We have to find a way around to target the elements we want to style. This is a real challenge. This is where we shine as designers. It is easy to add another class to your HTML to target an element, or to put new div just to have a container for another image. Doing it without access to HTML, finding a way around to target an object that is seemingly impossible to target... that's something. This is why you need to understand CSS. Feel it. To do so, you have realize that everything on the web page is a lie. Quoting the Matrix: “Do not try and bend the spoon. That's impossible. Instead only try to realize the truth. There is no spoon”. There is no spoon. And my anime list isn't in a nice semi-transparent container with a slick border that casts shadow on a fancy background. We are dealing with lines code. This is all it is. Lines of code. And we are the ones who tell the browser how to interpret that code. It renders that fancy wallpaper, and creates that semi-transparent container with a border because I told it to do so, not because it decided that on it's own. It's not some kind of black magic. We are not wizards. It's all about three things: Location, location, location. If you can target an element, you can manipulate it. Targeting can be tricky though. Pointing to an element is one thing. Doing it uniquely... that's different. You see, MAL creators weren’t that generous when they were adding classes to their markup. Which means, that sometimes you will target something along the way because providing a unique path to that specific element is impossible. It is easy to change text color of every single row in your list. All you have to do is to style two classes: .td1 and .td2. It is as simple as: .td1, .td2 { color: red; } Sure, easy. But, say... you wanna style only the section of the list where ID is. How do you do that? Now, that's the tricky part I was talking about: td[class^='td']:first-child { color: red; } Not exactly what you were expecting, right? That's what I am talking about. I dare you to find me a tutorial that shows you that. Sure, you will find many tutorials on how to target HTML elements by using the attributes they poses. You will also have no trouble finding tutorials on how to target HTML elements by using pseudo-classes. I don't doubt that. But in order to actually put this knowledge to practice you have to learn how to think like a web designer. You have to take a deep dive into HTML and find your way to that element. To do that, you have stop bending spoons and start to see websites for what they really are: Lines of code. Only then will you realize that there is no difference between element and element. Sure, one is an inline element and the other is a block element. But, what really stops you from converting links to blocks? Nothing. Websites use default settings so you don't have to bother with defining them. But there is nothing stopping you from redefining those defaults, if you so desire. So, as a conclusion: Don't bend spoons. We are not magicians, we are not pulling rabbits out of our hats to amaze people. We are designers. We understand the code, and that understanding is all we need to create our designs. That's our fuel. That's what makes us confident that we can realize whatever crazy design we have in our minds. So don't be a lemming who knows how to read a code; become one of us, become a designer how can understand and use CSS to his or hers advantage. |
| ----------------------------- Principles of Art ----------------------------- I've been using MyAnimeList since 2008, and through all of these years I've seen countless list designs, some of which left me speechless, others... not so much. I have also been making my own designs for nearly as long as I am registered, and with that many years of experience I have managed to develop a certain style that has not failed me as of yet. In this part of the guide I'd like to introduce you to this style. Please note that I am not claiming that this is the only way of making list designs nor am I claiming that my way is the best way. This is merely something that I came up with after years and years of designing lists for myself and for my friends. It works for me, I see no reason why it shouldn't work for you as well. To me, designing a list is a form of art. Yeah, I am a crazy person. That's one cat out of the bag. As you will see in the future chapters, I am mad as a hatter. But, I don't wanna spoil the surprise so let's focus on here and now. To me, designing a list is a form of art. Which means I follow the same rules that a painter would. And there is no greater rule then The Rule of Thirds. If you ever played a little with a modern camera you are probably familiar with this:  So... what was that again? Oh, right. Two vertical lines, and Two horizontal lines divide the picture into three even columns with three even rows... The rule of thirds. Basically the rule of thirds says that subject of your painting or photograph should be aligned with either of those vertical lines, and the eye line (or the horizon if you paint/photograph landscapes) should be aligned with the top horizontal line. Let's see a real life example of that. This is the exact design we are making in this guide:  Keep in mind that I am eyeballing it. I am not literally using those guides while designing. Anyway, see how the center of her body is aligned with the guide line? How her eye line is more or less aligned with the top guide line? How the logo is within the top right rectangle? This is more or less what we are after. This is how it looks in a theory: The list is pushed to the far right, and the rest of the space my “canvas” on which I am “painting” my design. I'd like to point out, that my render – in this case, Takanashi Rikka from Chuunibyou – is the main subject of this design. I am focusing all the attention on her. In order to do that, I am using darker, more rich colors on the background and at the same time I am toning down the list by using lighter, more bleached out colors. By doing so, I am making the background the center piece of this design. It's more pronounced... Looks more important, so people subconsciously want to look at it. But what if I'd like to have my list as a focus point of the design? Well... The rule of thirds goes out the window, and we reverse the logic: Now the list is the center piece (literally in the center) and is more pronounced, “painted” with richer colors. The background, on the other hand, is bleached out and made less important – although you could use renders in the side sections just to entertain the viewer. Going back to the original composition with Rikka. Do you know why she is positioned on the left side while the list is pushed to the right? This is called Lead Room also known as Nose Room. This rule says that we should always leave space in the direction that the subject is moving, or in front of the stationary subject. In our case the subject is stationary, and she is looking at the viewer. But, she is not standing straight. She is turned to the her left side just a tiny little bit, which means that she should have a Lead Room on our right hand side. Another very important thing you may wanna keep in mind is movement. And by movement I don't mean the actual movement. Don't make .gif backgrounds. When I say movement, I mean eye movement, okay? You want to guide viewer's eyes. You want him to move around the image. Why? Because it's more pleasant experience. If there is nothing to look at, the picture is boring. It's that simple. Look at Rikka one more time (version without the guidelines) and try to notice what your eyes are doing. If I were to guess, you would first look straight into her left eye, then you take a quick look at the eye patch (or the other way around, you would start with the eye patch then the eye) and then you move would to her right hand. The next stop would be her neckerchief (yeah, that's the name of that scarf-ish thing on her neck) from this point, I guess, you would go down her body and then you would look at her left hand which which would lead you out of the picture and to the list. I am also almost sure that you would have ignored the left side of those white light flares, but you would looked at that fat one on the right side right before you would look at the left hand. This is why I chose this render. It is dynamic. You have things to look at. Your eyes are moving all the time. It's not boring. It's has movement. There are few other things you can say about this composition, like the fact that it is fairly simplistic. I do not overwhelm you with details in the background. I do, however, use a pattern to break that general dullness of a monotone gradient that I used. This is a perfect balance. I don't wanna make you feel tired of watching a complex image, but I also don't wanna bore you to death with an empty composition. Another thing you may notice is that the symmetry is broken with Rikka being tilted to the left. Unless you are Death the Kid, symmetry is bad. Our faces aren't symmetrical, the word around us is not symmetrical. Our eyes love asymmetry. This actually leads me to the final rule: Rule of Odds. Always. Use. Odd. Numbers. Subconsciously we love odd numbers as much as asymmetry. 3 apples in a picture? Fine. 4 apples? Nah, it feels crowded. 5? Fine again. 6? Crowded... There's too many apples! Do something! 7? Oh.. Wait.. No... fine again. Why is this happening? Well... When there is a group of similar objects, our eyes stop on the one in the center. But with even numbers, there is no center. There are always two objects in the middle fighting for our attention. Our eyes can't decide which one to look at so they rest on the negative space between those two objects, which pisses off our brains. |
seavenDec 4, 2014 6:29 PM
| ---------------------------------------------------------- Why you shouldn't use wallpapers as backgrounds ---------------------------------------------------------- It is very important to realize that different people have different devices and different screen resolutions. Just because something works for you, doesn't really mean it will work for everybody else. As I mentioned before, one thing every web developer has to worry about is browser compatibility. But, there is one other thing you should always keep in mind: the screen resolutions. If you were a professional web designer, you would have to make sure that your websites works on computers, TV screens, tablets, smart phones, smart watches and potato powered toasters with LED displays. But, let's be honest, MAL is not that demanding. It's nice if your design works on every computer, it's good if it works on tablets and smart phones... but that's about it. But, how do we that? There is a very powerful tool in CSS that is called Media Query. This is basically an if statement which tells the browser to execute some parts of your code only if a certain conditions are met. This allows you to control what and where is displayed in user's browser: you can shrink down an image if it is too big, you can decide to display different menu bar for smart phones, you can move logo to a different position if there is no space to display it. Every element can be altered or removed. But what about backgrounds? Most people use wallpapers... But, wallpapers exist as one picture. There isn't much you can do. Let's say that you want to use this wallpaper, and let's say that you managed to remove the logo so it is more usable as a background for your list. It looks nice, isn't it?  But see what happens when someone resizes the window:  Not so cool anymore, huh? When it's smaller, the list covers the picture. When it's bigger, the black bars appear (well... I am lying, by default they should be white, but I made the bars black so it has some contrast with MAL's white background). There is one fix you can apply to make it work: body { This scales the image to always cover the entire screen. It works quite nicely, but there are two problems with this method. One: It keep the proportions, which means that it crops the wallpaper on one end to keep the image from looking stretched so in case of scaling down, you can still end up with your list covering the image. Two: If you have a small wallpaper like 800x600 scaled to something big like 1920x1080 the image will look terribly pixelated.background-size: cover; } So what is the answer for this problem? Making your own backgrounds, of course. CSS has layers the same way that Photoshop does. If your background has 5 different images in 5 different layers, you can scale and rearrange everything to fit every screen resolution. And if you don't know how to do it, don't worry. The entire chapter two of this guide is dedicated to just that. So without further ado, let's start some real work! |
seavenDec 6, 2014 2:56 PM
----------------------------------------------------------------------------------------------------------------------------------------------------- The following tutorials are made with use of Photoshop CC 2014. Most of the features are available in older versions of Photoshop, as well as in other graphic editing programs.CHAPTER TWO: Photoshop Tutorials ----------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------- Wallpaper backgrounds ----------------------------- Even though I said that you shouldn't use wallpapers, it doesn't mean you can't. There are few things you can do in photoshop to solve some of the problems: [back to index] Blending in: Some wallpapers make it quite easy for us, other require some work. This Bleach wallpaper is a good example of an easy to work wallpaper:  The whole background of this wallpaper is white. White is represented in hex values as #ffffff. To solve our problem we can use this code: body { background-color: #fff; } This changes the default background color, which is the color that will 'leak' outside the wallpaper if the wallpaper is smaller then the window. Which means that if we position our wallpaper relatively to the bottom right corner of the screen, on bigger resolutions it will look like this:  But what if the wallpaper we want to blend in doesn't have a simple one color background? It's tricky, but not impossible. Let's take a look at this Highschool of the Dead wallpaper:  For the most part, the background of this wallpaper is green. But adding a simple green background in CSS won't do the trick: body { background-color: #d4dcc5; }  Thankfully, Photoshop has Layer Masks. Step One: To use Layer Mask select the layer on which you want to apply the mask, and click Layer Mask icon on the Layers panel:  Step Two: Make sure your mask is selected not your layer (click on the layer mask) Step Three: Select Soft Round brush with 0% Hardness  Step Four: Paint on your layer mask with black color to hide unwanted elements. If you make a mistake and remove too much, change your brush color to white and pain it back on – that's the beauty of Layer Masks. Your image should look like this:  Step Five: Save your image as .PNG Now, when you change the background color with CSS you will see this:  Still, not perfect, but much, much better. |
seavenDec 6, 2014 4:26 PM
| [back to index] Painting in: The previous method, Blending in, has one crucial flow: The background must be more or less in one color. You can't use this method if you have to blend few colors at the same time. This method solves this problem to some degree. To ilustrate this method we will use this Chobits wallpaper:  Step One: Apply Layer Mask to your wallpaper.  Step Two: Using Paint Bucket Tool fill the layer mask with black color, so the entire image disappears. Step Three: Paint the image back with white color using big brush with 50% hardness. The image should look like this:  Step Four Save as .PNG Step Five Within your CSS rule use whatever color you feel looks good: body { background-color: #fffdc4; } The end effect looks like this:  Again, not the prettiest thing, but you get the idea. |
seavenDec 7, 2014 6:06 AM
| [back to index] Picture frame: This method is simple and self explanatory. Instead using a wallpaper as a background, we are using simple background with a 'picture frame' of some description that displays the wallpaper to the viewer. You can use various methods the achieve this effect.
I have used this method in my [i]Ghibli Design[i], where I used parts of three different wallpapers to represent three different Ghibli movies.  |
| ----------------------------- Custom backgrounds ----------------------------- Using custom backgrounds is the best way to achieve great effect while maintaining control over the design. Keep in mind, that much like layers in Photoshop, different effects can be stack on top of each other with CSS. Feel free to experiment! [back to index] Gradient: Gradient is an effect that can be achieved in two different ways. You can use pure CSS gradients: body { But, keep in mind that this method may not work for all browsers.background-color: #333366; background-image: -webkit-linear-gradient(left, #333366, #ccccff); background-image: linear-gradient(to right, #333366, #ccccff); } Or, you can use image gradients: body { Just keep in mind that it's better to use color-to-transparent gradients with .PNG file extension. Like this:background-color: #ccccff; background-image: url(image/path/your_image.png); }  To cut on the file size you can use repetition. You make a smaller image:  And repeat it in y-axis with CSS: body { background-color: #ccccff; background-image: url(image/path/your_image.png); background-repeat: repeat-y; } The end result should look like this:  |
seavenDec 13, 2014 10:32 AM
| [back to index] Pattern – offset: As far as graphic design is concerned, pattern has a very wide definition. When we say pattern we mean everything that repeats: Textures, images, symbols... it can be a background image, it can be an overlay. A lot of things fall within this definition. In this tutorial I will show you how to turn two simple images into a seamless pattern background. To do so, we will use an offset filter on this substitute shinigami badge form Bleach:  and this symbol from Urahara's cane:  Step One: Open the Shinigami Badge image. Step Two: Go to Edit > Free Transform (Ctrl + T) and resize the image while holding Shift and Alt until it is 400x334. Note: Holding Shift keeps proportions of the image, while holding Alt keeps it in the center of the document. This is what you should have at this point:  Step Three: Once again go to Edit > Free Transform (Ctrl + T) and rotate the image -10 degrees.  Step Four: Go to Filter > Other > Offset. We need to move our image half to the right and half to the bottom. Our canvas size is 600x500 so our values are +300px right and 250px bottom. Make sure that Wrapped Around box is checked.  This is how it should look at this point:  Step Five: Copy and paste Urahara's symbol. Step Six: Repeat Step Two to resize the symbol. (In my case 150x158)  Step Seven: Go to Layer > Merge Down (Ctrl + E) to merge both layers together. Step Eight: Repeat Step Four to offset the image once again.  Step Nine: Go to Image > Image Size and resize the image to whatever size you want. In my case: 60x50. Step Ten: Save it as .PNG  Step Seven: Use it with repetition: body { background-color: #cccccc; background-image: url(image/path/your_image.png); background-repeat: repeat; }  Note: Before you save the image in step five, you can drop the opacity of the image to 25%. It makes it more usable as a background:  |
seavenDec 14, 2014 3:03 AM
| [back to index] Pattern – noise: This is one of the simplest yet powerful techniques. I can't even begin to count how many times I have used this one. Step One: Open a new document 100x100 pixels. Step Two: Fill it with a background color of your choosing. In my case it is #333366.  Step Three: Go to Filter > Noise > Add Noise. Step Four: Check monochromatic box on. Step Five: Play with values until you get the desired effect. In my case it is 1% with Uniform Distribution.  Step Six: Save file as .JPG  Step Seven: Repeat pattern with CSS. body { background-image: url(image/path/your_image.png); background-repeat: repeat; } The end result should look like this:  |
| [back to index] Pattern – textures/images: Instead of creating your own images, you can use textures that are already there. Websites like subtlepatterns.com have a large variety of textures you could use as your background. All you have to do is to repeat it with CSS. body { background-image: url(image/path/your_image.png); background-repeat: repeat; } |
| [back to index] Pattern – overlay: Another very simple technique that adds that extra touch to the finished product. In its simplest form it is just a line pattern, however feel free to experiment with other designs. Step One: Open new file 8x8 pixels with a transparent background. Step Two: Using Pencil Tool (pencil, not brush) draw a line from top left to the bottom right corner. Like this:  (Keep in mind that this image is enhanced 1800%. The original image is still 8x8 pixels.) Step Three: Save it as .PNG Step Four: Repeat it with CSS. body { background-color: #9999cc; background-image: url(image/path/your_image.png); background-repeat: repeat; } The end result should look like this:  (In this particular case I have lowered the opacity of the pattern to 10% before saving the image) |
seavenDec 14, 2014 2:04 AM
| [back to index] Brushes: Ten years ago, when I was beginning my adventure with Photoshop and computer graphic, brushes were everywhere. Everyone was using them to do basically everything. Nowadays there's a growing opinion that brushes are passé - out of style; Something to be avoided rather then used. However, I believe that you can still achieve great effects with brushes, so keep them in mind. Just because they went out of style, it doesn't mean you can't use them. I hope those two examples prove, that brushes can still be awesome! FLCL:  Touhou:  |
seavenDec 20, 2014 4:56 AM
| ---------------------------------------------------------- How to choose your renders ---------------------------------------------------------- Render is one of the most important elements of your design. It is the focus point of your composition. I cannot stress enough how important it is to choose a correct render and be aware of all of its properties. Call me a perfectionist if you have to, but I do like when the composition is consistent and everything is in perspective. And don't get me wrong, even the so called 'professionals' tend to get things wrong quite often. Don't believe me? Tell me what you see here: It's probably one of the coolest movie posters you've seen, right? No. My eyes bleed when I look at this.. this.. thing. It's beyond terrible. Characters are randomly scaled (for example Cap is behind Black Widow and Nick Fury, and he is bigger than they are); nothing is in perspective (horizon lines are all messed up: some characters where shot from above, some from below, some straight, and their horizon lines do not line up with the background's horizon); every character has a different light source which can't be explained in any logical way, and light sources from the background (like fire next to the car or the exploding windows) have no effect on the characters whatsoever. And that's a tip of an iceberg... I am not gonna do a full breakdown of what's wrong with this poster, because everything is and that's not the point. The point is: Even those muppets from Hollywood make mistakes. But that's not an excuse for you. I promised you that I will teach you how to be a designer not a lemming, so now suffer listen. First thing first: The biggest no-no are renders that are cut from opposite sides: left and right or top and bottom. Why? Because you will end up with something like this:  There are of course ways of dealing with such renders, and those ways are basically the same as the one used to deal with wallpaper backgrounds: Blending in, painting in, or using a frame of some description. Another example of a bad render is a render that has elements of the original image on it. For example:  There are snowflakes on Sanae's umbrella and kimono. They are very subtle, but they are there nevertheless. You can't use this render unless you work those snowflakes into your composition by adding them to the background as well. Another bad choice is a render that has odd light sources, light flares, or other glows, afterglows, glimmers, discolorations etc. like here:  Again, you can work it into composition, but generally it's more work then it's worth it. Last thing is using multiple renders in one composition. You may think that since Sasuke and Naruto are friends/rivals it's a good idea to use them both in one composition:  The problem here is perspective. Basically, the Avengers poster all over again. There are ways of dealing with this issue, and the best way is to ask yourself what would Jesus do. No, not that Jesus... I really recommend watching this video where Jesús Ramirez explains how perspective, horizons and vanishing points work. Armed with this knowledge you should be able to choose good renders, that will complement your composition instead of ruining it. |
----------------------------------------------------------------------------------------------------------------------------------------------------- In this chapter I am going to explain how CSS works on MAL why CSS doesn't work on MAL. I'll do my best to walk you through every single part of the list and try to hint some awesome things you can do to those elements. In the next part of the guide we will put this knowledge into practice and create a design! Let's go!CHAPTER THREE: CSS Tutorials ----------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------- Main Containers ----------------------------- Let's open with the obvious: Main containers. What are those? As I said before, you have to stop perceiving your list as a collection of links, text, colorful tables, borders, and pictures. And you have to accept your list for what it really is: a wall of HTML tags. In this part of the guide I will walk you through every single tag, but for now let's focus on the containers:  We have four elements here:
body tag is the first container. It represents the browser's window – the first layer of what is displayed. On the chart I called it ”background” container, because the main thing that we are styling here is the background. table #mal_control_strip – This container houses the user bar. div #list_surround – This container houses your entire list. In CSS id is represented by the pound symbol (#), and class is represented by a dot (.) so whenever I say #JustIDLeague I mean an element with an id “JustIDLeague” and when I say .theClassengers I mean an element with a class “theClassengers”. A footnote here: id should be unique, and NEVER repeat in the HTML. If you plan to reuse an id you should convert that id into a class. Of course MyAnimeList is special, so some ids repeat in the code. Why? Nobody knows, just nobody knows. |
| ----------------------------- Styling Body ----------------------------- As I said, HTML doesn't interests us at all, so let's zoom in on that body tag for a moment. This our layer one. Everything else that is displayed on the website is within this tag. Our ground zero. In fact, if I were to create a 3D representation of my list, body would be a the bottom. See for yourself: As you probably noticed, my background has layers too. It's because I am insane. But let's not jump ahead. Everything in its own time. So, what can we style in body? Background, font and cursor. background: The way the background of your list looks like. Font: The way the default font looks like. One catch though. Body does not style links. Links are styled within different element. Cursor They way your cursor looks like while hovering over anything other then links. We will get to this much later in the guide. Let's leave this for now. Because I have another chapter dedicated for font, let's do some interesting stuff with the background. Background takes 5 standard properties that compile into so called shorthand background-attachment: scroll, fixed background-color: transparent, hex, named, rgba(), hsla() background-image: none, url() background-position: top, left, bottom, right, values background-repeat: repeat, no-repeat, repeat-x, repeat-y background-attachment: background-color: background-image: background-position: background-repeat: What is the shorthand that combines them all? background: transparent url(my_image.png) scroll no-repeat bottom left It's that easy!Your head probably spins by now, but before you go, lend me your ear and I will whisper two hacks that will make your list look awesome! *whispers* Hack 1: There is another property (actually, three but shhh~!) background-size, which can be set to cover or contain (default is auto). Cover scales an image to the biggest possible scale so the entire area is covered with the image. However, some areas of the image may not be visible. Contain, on the other hand, scales the image so the entire image is visible, and at least one axis is covered with the image *lowers voice even more* you could also use values like pixel or percentages to manipulate the image! Hack 2: My favorite one! You can stack images in layers. You can't use shorthands, but aside from that it is easy! body { In this case, first image (which is at the top of the stack) is positioned to the top left, second one (the middle one) is positioned to the top right and the third one (the one that is at the bottom) is positioned to the top right corner. every image has fixed attachment and by default every image repeats.background-url: url(image1.jpg), url(image2.jpg),url(image3.jpg); background-position: top left, top right, top right; background-attatchment: fixed; } |
seavenDec 30, 2014 9:09 PM
| ----------------------------- Styling Text – Part 1 ----------------------------- As mentioned before, body is also a container where we style our default font. However, it is not the only place where we'll be doing this. Let me explain: body { Do you know what CSS stands for? Counter Strike: Source, of course. No, it's not. It stands for Cascading Style Sheets. You know what 'style sheet' is, now what's up with that 'cascading' part... Cascading means, that the website reads your style sheet from the top to the bottom and if it finds rules that overlap each other, it uses the last one it finds.color: red; font-size: 15px; } #list_surround { color: green; font-size: 12px; } a {color: gray;} a:hover {color:white;} In this case: body { Tells the website that I want all text on my website to be red and I want the size to be 15px.color: red; font-size: 15px; } But then, the browser encounters this part: #list_surround { and it says, 'remember how I told you that I want all my text to be red? Now I want you to change every color from red to green and change font-size from 15px to 12px, but I want you to do this only in #list_surround, everywhere else we are still red and 15px'.color: green; font-size: 12px; } If you save your CSS file right now, you will notice, that every text inside #list_surround is green, and every text outside is red. However, you will also notice, that all the links on the website are still blue (which is default color for links). This is because, links are not text. Links are links. Ever links is inside a element ('a' stands for 'anchor'), which means we have to style a' elements accordingly: a {color: gray;} And this tells browser that every 'a' element, which is a link, should be gray, but when you hover over that link, it should turn white.a:hover {color:white;} Now, here's a one million dollar question for you: How do I select a elements inside #list_surround? Anyone? No? Okay, here's a trick: #list_surround a {color: yellow;} This says that this rule should be applied only to those a elements that are inside #list_surround element. Achtung! Browser read CSS from right to left, not left to right. In your head #list_surround a means 'Find #list_surround and apply this rule to every a element inside. The browser however reads it as: 'apply this rule to every a element on the website, and then restrict it to those a elements inside #list_surround'. Why is this important? Loading time. If you have very complicated rules with chains of unnecessary selectors, you are slowing down your list. There are more selectors, and we will talk about them in the next chapter. For now, let's focus on text. Text properties are divided into font properties, text properties, and some loose properties like color. Font properties form a shorthand, other don't. Font properties: font-stretch: ultra-condensed , extra-condensed , condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded font-style: normal, italic, oblique font-variant: normal, small-caps font-weight: normal, bold, bolder, lighter, value font-size: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, value line-height: normal, number, value font-family: family-name, generic-family Shorthand: font: normal small-caps 10px Arial font-stretch: font-style: font-variant: font-weight: font-size: line-height: font-family: [/color] |
seavenJan 7, 2015 6:50 AM
| Hi Seaven~ I just have to tell you that you are a genius! LOVED the guide! And it helped me a lot.. To design a layout on Photoshop is a great idea.. I'll try it ^^ So all that left now is to design my idea and make it to reality XP Of course it won't just happened, and I will need to learn different codes and ways to make the layout.. but at least now I have a direction for a start ^^ Thanks a lot for everything~ I hope I'll manage to do it :D p.s. for some reason it feels wrong that I'm the only one that commenting here.. am I? |
 |
More topics from this board
Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templatesShishio-kun - Feb 16, 2023 |
32 |
by dextr__
»»
7 minutes ago |
|
» ❓ 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 |