Continue to your download.
Start Interactive Ad Now
Thanks for watching.
CSS Tricks: Responsive dA?If you are at least slightly into web design and/or using mobile devices to browse, you should have come across the term "Responsive Webdesign". Basically it means that a website is set up in a way so it gives the best browsing experience no matter on what device you are viewing it.One term that is often mentioned along with it are "Fluid Designs". This usually refers to web sites that use % instead of px values to define sizes inside the layout.This necessary trend in web design made me think about the deviantART.com layout. Because it is a design that has been working responsive for several years! You can test this by going to any place on dA and changing your browser window. You will notice how the ratio of all elements in width remains the same no matter how wide the browser window.Now that we know that dA is responsive, we will soon find out that there is a responsive element inside dA, which reacts in first instance to the page on dA you are and in second instance to the brows
CSS/HTML Tricks: Article LayoutHello!Another tutorial for news articles and journals on dA!This one is meant to help you add structure to your news articles (and personal journals) and thus enhance the reading experience for your audience.I have already written a tutorial on the topic of HTML Literature, but only showcased what is possible there. It is almost the same as :faq104:This tutorial will try to explain why you should use additional HTML in your articles and how it helps improve their quality.Also it turned out to be quite long, so skip to your liking.For further reading please refer to CSS Tricks: Limiting .text width, which explains the necessity of limiting your text width.Why is structure important?Nobody likes reading a wall of text. If you look at an article and all you see is a grey blur,
Project Educate: User Friendly Journal SkinningThis article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes. This is not a beginner's tutorial.User Friendly Journal Skin CodingI've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people. I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something. But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty. And really, who wants to type in a lot of extra HTML when they go to write a journal? It is easy enough to access the artist's comments.But even then, copy & paste, memorize that.... It can be a lot to deal with if you do not know CSS and HTML. Which is the reason most people get someone else's skin design in the firs
PE: CSS3 101 - Transition AnimationsTable of ContentsThis article has four main topics:Transition-property |Transition-duration |Transition-timing-function |Transition-delay |Legend: - Works in dA for All Members - Doesn't work in dA for Premium Members- Works in dA for Alpha Testers at devBUGWhat is a Transition?This time, I'll explain with an example. Let's take this awesome emote by jahw.When I see that emote, I'm imagining it saying "CHAAAARGE!" and running forward! So I want to make the emote do that, but instead of opening it up in Photoshop to animate (which I'm not allowed to do anyway since it's not my work), I'm just going to add a simple code that will do the animation for me! Hover over the emote below to see this magic in action!:thumb2
Let's code! Background PropertiesIntroductionCustom shapes and images are an integral part of any journal skin. They can include buttons, icons, header backgrounds, dividers, textures - sometimes the whole design is one big, sliced image artwork with a text area so one can rightly call it a journal skin. Other times the custom image usage is low or non-existent, and you wouldn't believe how coders make their skins rock anyway (or because). In this Let's code! I'm going to address the different background properties and their values.Index1. The Background Property: Structure 1.1 background-color 1.2 background-image 1.3 background-repeat 1.4 background-position + a nifty tip 1.5 background-attachment 1.6 Shorthand Form1. The Background Property: Structure
CSS Tricks: Journal break-downThis has been done before by many others I don't want to step on anyone's toes, I just wanted to give this a go myself If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those Well, here comes help with those hacks (I gotta give ginkgografix credit for some of it, go hug her! That's an order )At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the journal deviation, from which it is made up of, the basic HTML, without any content.Beforehand explanationNow, I know you will say: but that is not the default skin! That is not how journals without CSS look like! And you are right. But. There is always a but. But the default journal skin for coders is not the same as an unsk