CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.CSS Tricks: Background Images1 year ago in Journal and Gallery Tutorials More Like This
There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.
Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an image
I cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.
Problems with using images:
Despite being big an images turns out to be too small for a journalAn image does not repeat seamlesslyText becomes non-re
CSS Did You Know? - October 3rd, 2012CSS Did You Know? - October 3rd, 20122 years ago in Deviant Events More Like This
CSS Tricks: Limiting .text widthHello!CSS Tricks: Limiting .text width2 years ago in Journal and Gallery Tutorials More Like This
Today I wanted to share a little CSS Trick with you Many other people have done this before, awesome people like Ikue, thespook or ginkgografix, and now it's me too
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long
All about improving Readability!
When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may even get a
CSS Tricks: Before and After!No, this is not about a tv show in which I take a CSS and make it prettierCSS Tricks: Before and After!2 months ago in HTML & CSS & Scripting More Like This
It is about the pseudo-elements ::before and ::after.
They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.
::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.
Let's get right going!
So in the first simple example we are going to add guillemets, also known as French quotation marks, to direct speech in our text. The usefulness of this may stand to debate, you could easily just type it out, but it is a nice and easy way to get started with explaining ::before and ::after.
We will take advantage of the i HTML class fo
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.Project Educate: User Friendly Journal Skinning1 year ago in Art Features More Like This
User Friendly Journal Skin Coding
I'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