Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconpica-ae: More from pica-ae


More from deviantART



Details

Submitted on
December 13, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
4,698 (53 today)
Favourites
146 (who?)
Comments
28
×

CSS Tricks Hub

Fri Dec 13, 2013, 4:18 AM
Here you will find an overview of my CSS Tricks series tutorials :) I will post it as a journal, as I don't see it fit anywhere else.

List of the tutorials so far




Learn how to limit the width of your text to improve readabilty. It's an easy trick and solves the problem of extremely wide running texts, especially an issue on wide screen monitors.


Theory/Examples Ratio: 70/30
Size: S
Difficulty: low





Due to the many different sizes a journal can have on dA, it is a good practice to think about how wide you want your skins to be. You will find the pros and cons of "fixed width" versus "responsive" skins.


Theory/Examples Ratio: 80/20
Size: M
Difficulty: low





Learn the basics of using images in your CSS files. The technical aspects are covered, as well as best and worst practices. You will also find a big list of resources for working with images for skins.


Theory/Examples Ratio: 60/40
Size: L
Difficulty: medium





A little dive into both CSS and HTML to help you structurize news and articles more user friendly.


Theory/Examples Ratio: 90/10
Size: L
Difficulty: low





Learn about web-safe fonts, the fallback hierarchy and about the most common text-properties to use in CSS. You will find code examples and a colletion of tips for working with text in skins.


Theory/Examples Ratio: 50/50
Size: XL
Difficulty: medium





Basics about how lists work, how they are coded, what they are good for and how to get the best results out of your content with lists.
Second half is a tutorial on how to use a nested list in order to make a drop down navigation menu.


Theory/Examples Ratio: 50/50
Size: XL
Difficulty: medium - advanced




The CSS Tricks are a mix of general CSS (and occasionally HTML) and specially for dA written tutorials. Everything that works on dA, will work everywhere else; but not necessarily vice versa.


Questions and Suggestions


If you have a specific question or an idea for a future article, you are more than welcome to suggest to me! :la: You can leave a comment here or write me a note :) The tricks will be most useful when I know it is a topic people are actually interested in.

For more on CSS and HTML …


Here are some groups that offer tutorials and many other awesome things :eager:
:iconecssited: :iconcss-dyk: :icontutorialsforyou:

Browse the Journal and Gallery Tutorial or Web Design Tutorial galleries on dA.

And as always I strongly suggest you go check out and bookmark the Mozilla Developer Network as it is a wonderful go to site for help and reference!

:heart: :peace:

Hub for my CSS Tricks Tutorials :la: 


Here's a short list of them
Add a Comment:
 
:iconastrikos:
Astrikos Dec 14, 2013   General Artist
:love:
Reply
:iconpica-ae:
pica-ae Dec 15, 2013  Professional Interface Designer
:la: :hug: 
Reply
:iconmiontre:
miontre Dec 13, 2013  Hobbyist Photographer
:thumbsup:
Reply
:iconpica-ae:
pica-ae Dec 14, 2013  Professional Interface Designer
:la:
Reply
:iconzaphyrae:
zaphyrae Dec 13, 2013  Hobbyist General Artist
Wait, does HTML work in journal skins? Cuz I'm more used to that than CSS
Reply
:iconpica-ae:
pica-ae Dec 13, 2013  Professional Interface Designer
Theoretically something like <blockquote> or <b> is already HTML :) It works in journal, comments and forum threads. See FAQ #104: What HTML formatting can we use on deviantART? And what is the format for these codes? 

You can also switch between Rich Text Editing and HTML View in sta.sh writer. If you use Rich Text, sta.sh writer will add the necessary HTML, without you seeing it.

All classes listed in the FAQ can be used and styled via CSS in journal skins, but you can also create custom div-classes. 

And everything `miontre said ;)
Reply
:iconmiontre:
miontre Dec 13, 2013  Hobbyist Photographer
It does, in either the body of the Journal itself or in the Skin Header and Skin Footer sections. :) But I think the intention is that you combine HTML and CSS. HTML does not allow you to style the Journal, only input raw information. You need to use CSS to style it to your liking. :nod: It's really worthwhile (and surprisingly easy) to learn. :D
Reply
:iconzaphyrae:
zaphyrae Dec 17, 2013  Hobbyist General Artist
Okay than, thanks ^^
Reply
:iconiamoret:
iAmoret Dec 13, 2013  Hobbyist General Artist
La love 
Reply
:iconpica-ae:
pica-ae Dec 13, 2013  Professional Interface Designer
:blush: 
Reply
Add a Comment: