Shop Mobile More Submit  Join Login
:iconfella:

fella

Being devious is srs bsns

Fella's ArtFest: May 2015 Winners!

Fri May 29, 2015, 3:58 PM


Welcome to Fella's ArtFest!


Fella's ArtFest is a monthly contest in which the DeviantArt community can display its love and appreciation for art and all its forms.
Each month's ArtFest has a particular theme! To participate, create an original piece of art (all media are accepted) and submit it to DeviantArt as a deviation! From there, simply submit your deviation to fella's very own gallery into this month's ArtFest gallery folder.




:fella: Entries

The theme for May's ArtFest was flowers.
The entries are below! :la:
Reflections of Infinity by barananduen Flowers 9 by WrittenPhotographs Flower 7 by WrittenPhotographs Flower 2 by WrittenPhotographs Flower 1 by WrittenPhotographs Flame Tree [AF: May15] by AlexanderPaupoff Flower [AF: May15] by AlexanderPaupoff Dancing in Sunlight by mayuralover Your Remembrance by mayuralover Pastel Colors by barananduen Showing of Great FondnessShowing of Great Fondness
10-5-15
Many greet you and many mourn you,
But so few are spared over your existence
That they might as well not exist at all.
Those lucky enough to receive tell tales of wonder;
Of smells perfume enough to hide the greatest stink of humanity,
Of colours bright enough to hide the dullest mind.
Those who don’t receive mourn silently…
‘Why not me’ they wonder in bitterness and internal argumentativeness.
‘Why not me’ they proclaim to their inner soul’s mate.
Many greet you and many mourn your passing,
But to receive during life is the best blessing of all
And a showing of great fondness.
No RosesNo Roses
10-5-15
Today we bought her flowers for mother’s day and I remembered you;
Flowers I will never receive,
A persona non grata because you died inside me
And never got to see the light in my eyes;
Never got to light up my life with your flowering smile.
Today we bought her flowers for mother’s day and I thought ‘why’ and ‘why not’.
Why did you have to go so soon,
Before my time with you had filled me completely
With that joy they say only children can bring?
Why not? Why not leave when this world is a cruel, cold place
Filled with angst and violence and prejudice?
Today we bought her flowers for mother’s day and I mourned you again;
Remembered you because you got a single rose
Whose petals I still keep,
Dusty on a shelf that will never be dusted for fear of disturbing those petals
And the memories they contain.
You got a rose that day,
Today I got no roses but I still thought of you.
Pinklady by George-B-Art Creeping Phlox in Violet by WDWParksGal Facing the Sun as a Group by WDWParksGal Facing the Sun by WDWParksGal Reaching for the Sun in a Clear Blue Sky by WDWParksGal Beautiful Daffodils by WDWParksGal


:fella: Winners


Pastel Colors by barananduen Flower [AF: May15] by AlexanderPaupoff Dancing in Sunlight by mayuralover
:star: First Place goes to barananduen who will receive a 6-Month Premium Membership to DeviantArt!
:star: Second Place goes to AlexanderPaupoff who will receive a 3-Month Premium Membership to DeviantArt!
:star: Third Place goes to mayuralover who will receive a 1-Month Premium Membership to DeviantArt!
* Prizes are courtesy of DeviantArt.


:fella: See you all for next month's ArtFest! :wave:



Hello! :wave: rvmp Welcome to the sixth edition of 'Teach Me, Senpai!' here at fella. If you're unfamiliar with what this is, it's essentially a monthly feature of tutorials, made by deviants, explaining individual tasks, which then come together into one whole project. This month, we'll be making a journal skin! La la la la

The Basics

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 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
DA journals CSS tutorial by barninga CSS Tricks: Journal break-downThis has been done before by many others :dummy: 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 :XD:
Well, here comes help with those hacks :la: (I gotta give ginkgografix credit for some of it, go hug her! That's an order :evileye:)
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 explanation
Now, 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
PE: CSS3 101 - Pseudo Elements/Classes

Table of Contents
This article has two major topics:
1. Pseudo-Elements
::first-letter :dalogo:
::first-line :dalogo:
::selection :dalogo:
::before and ::after :dalogo:
2. Pseudo-Classes
Dynamic pseudo-classes :dalogo:
:nth-child(N) :dalogo:
:last-child :dalogo:
What's the difference between Pseudo-Elements and Pseudo-Classes?
Pseudo-Elements are used to address sub-parts of elements. They should come after any class or ID names found in the selector ex: p::first-letter where p is the element and ::first-letter is the sub-element. Pseudo-elements are usually static and can be used for common typographic effects such as caps and fonts. They can also address generated content that is not in the sour
Journal CSS for Beginners by smokin9mirrorsABC of dA CSS - Part 1 by ginkgografixJournal Skins for Dummies Part 1 by SimplySilent

Backgrounds

CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.
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
dA CSS - image height+width by kuschelirmel-stockSeamless Patterns and How to Use Them With CSS by fantasy-alive Let's code! Background PropertiesIntroduction
Custom 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.
Index
1. 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 Form
1. The Background Property: Structure


Templates/'Snippets'

Skeleton Journal With Comments/*--------------------------------------------------------------------
Blank Journal (gets rid of all tiny images and preset backgrounds, borders, margins & paddings)
----------------------------------------------------------------------*/
* {background: transparent; border: none; margin: 0; padding: 0;}
.gr-top img, .gr1, .gr2, .gr3, .tri {display: none;}
a {font-weight:normal;}
a.external {text-decoration:none!important;}
a.external:after{display: none!important;}
/*--------------------------------------------------------------------
Journal Design overall (you can put font, background colour, border etc for the whole journal in gr-box -- the other tags are optional to style, but as they work with the sta.sh menu it makes sense to include them)
----------------------------------------------------------------------*/
.gr-box {}
a {}
a:hover {}
blockquote {}
h1 {}
h2 {}
h3 {}
h4 {}
ul {}
ul li {}
ol {}
ol li {}
/*--------------------------------------------------------------------
Mini Thumb Gallery Code Snippet by SimplySilentCode Basics: Hover Menu by ginkgografixCode Basics: Sidebar- Floating by ginkgografixCircular Lit and Visual Thumb Snippet by im-not-sanaColumns Snippet: Equal Height and Width by im-not-sanaBasic CSS Journal Template by quinnypin

Fonts

!CSS Fonts: NormalAll Browsers
The following fonts would display in all browsers you use. (Title Font: 28px, Normal Text: 12px)
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Impact;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Stencil Std;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Verdana;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Trebuchet MS;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Arial;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Arial Black;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:<
CSS Tricks: Fonts and Text BasicsToday I want to talk about fonts in journal skins :XD: You probably saw this one coming :giggle: And maybe you also saw coming that this will be a rather long tutorial :faint: There is just a lot to say about this! Actually this will only be the first one about fonts and text. This one will cover the basics of working with fonts.
I will start by talking a bit about web-safe fonts and the concept behind a fallback hierarchy. Further down you'll find a selection of properties that can be styled with examples and explanations.
So, let's go! :eager:
The standard web safe fonts
A font is defined as web safe when it is installen on a great number of user's computers. They are also called system fonts, and can vary depending on your PC. Fonts on a Mac OS are not necessarily the same as fonts on a Windows OS.
Here's is a little example: on the left side is an image, an image created in PS on the right side. If both sides look the same, or at least very similar, it means they a
dA Font Formatting Guide
To READ this with a Fancy Layout WITH source code, see http://viclou.deviantart.com/journal/DeviantART-lt-font-gt-Formatting-Guide-261232088
Introduction
Did YOU Know that you can use the < font > tag in boxes, journals, descriptions, and in litterature?
Well, yes you can! No Premium Membership REQUIRED!
To prove my point, :eyes: below!
Test.Test.Test.Test.Test.LOL!
The Tag
Did you enjoy the awesome presentation of the "Test." text above? Well, here's the source code:
<font face="Droid Sans" size="9">Test.</font><font face="Arial" size="3">Test.</font><font face="Tahoma" size="1">Test.</font><font face="Oswald, Droid Sans, Lucida Sans Unicode, Arial" size="5">Test.</font><font face="Brainly, Nunito, Testt, Times New Roman" size="4">Test.</font><font face="Helskini, Klavika, FF Me


Fancy Bits

TUT: Using CSS Scroll Boxes by TaleiEdit 'Skin Header' and 'Skin Footer' by ginkgografix CSS: Element PositioningI'll warn you in advance, this is not a reference for every available position value in existence, it's about
position: relative;
position: absolute;

Why do you want to assign any position value to an element? Because you don't have much of a choice in the matter. See, position has a set default for when you do not specify the property, so it's specified whether you like it or not. The default is static, which means that every element follows the document flow if not otherwise stated. You can try and move an element by using the top, bottom, left, or right property, whichever - your static element won't budge an inch. That's when you'll want to use absolute and/or relative positioning. By giving position either of these values, you'll be able to move an element and position it.
The main difference between the two is that absolute disregards every other element in your document. It is disconnected from the document flow, so to speak, which comes in handy when you have an element
Let's code! Pushable ButtonsIntroduction
Buttons.
You all know buttons, because buttons are everywhere. We mostly take them for granted. They are there to direct us to somewhere else and God protect a button that doesn't do exactly that. We rarely give them a second thought, despite the fact that the appearance of a button is as much a design choice as any other element; a button can make or break a design.
Small advice: Simple (or rather: easy to navigate) is the new black. We established that buttons are part of that equation. It is my experience that buttons in journal designs aren't that highly sought after. People want them for their function, and even then rarely use them. Myself, I love to make buttons for one simple reason: It's a tonnage of fun.
What we'll be doing
The button base
Hover and active states


1. What we'll be doing
This CSS button.
Kidding. We'll make a spiff one. I'll elaborate. We will mak
PE: CSS3 101 - Transition Animations

Table of Contents
This article has four main topics:
Transition-property :dalogo: |
Transition-duration :dalogo: |
Transition-timing-function :dalogo: |
Transition-delay :dalogo: |
Legend:
:dalogo: - Works in dA for All Members
:dalogo: - Doesn't work in dA for Premium Members
- Works in dA for Alpha Testers at devBUG
What 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
PE: CSS3 101 - Color Gradients

Table of Contents:
This article contains two major topics of Gradients:
1. Linear-Gradient :dalogo:
Vertical :dalogo:
Horizontal :dalogo:
Diagonal :dalogo:
Angled :dalogo:
Repeating-Linear-Gradient :dalogo:
2. Radial-Gradient :dalogo:
Repeating-Radial-Gradient :dalogo:
Supported by:
:iconfirefoxplz:
Firefox 16+
:icongooglechrome:
Chrome 26+
:iconsafariplz:
Safari 5.1+
:iconinternetexplorerplz:
Internet Explorer 10+
:iconoperaplz:
Opera 12.1+
What are Gradients?
A color gradient, in terms of comput
CSS: CursorsAll Browsers
Top
cursor:default;
cursor:pointer;
cursor:text;
cursor:vertical-text;
cursor:wait;
cursor:progress;
cursor:help;
cursor:move;
cursor:s-resize;
cursor:nw-resize;
cursor:w-resize;
cursor:sw-resize;
cursor:col-resize;
cursor:row-resize;
cursor:not-allowed;
cursor:crosshair;
Internet Explorer (Only)
Top
cursor:hand;
cursor:all-scroll;
cursor:no-drop;
Firefox | Flock | Safari | Opera
Top
Hidden cursor for Firefox only!
cursor:none;
cursor:-moz-grab;
cursor:-moz-grabbing;
cursor:-moz-zoo
CSS Snippets: Wrapped Header:iconikue:
CSS { Snippets : Wrapped Header }
Welcome to the first installment of my CSS Snippets journals. I've had a lot of questions over the years about how I create/achieve some of the elements in my journal skins so I thought I'd try my hand at a tutorial of sorts for the different elements I find fascinating and some of the work arounds needed to make them function properly when limited by deviantART's  journaling system. Although, "limited" doesn't feel like the correct word. To me it's more of a challenge and to persevere through it really gives me a thrill I just can't explain. It's not really a limitation as it forces one to think outside the box and hopefully when you get it just right, you'll get that same thrill.
I had originally planned to start these journal tuts after the new Journal/News system and Sta.sh Writer had been launched. I think showing you live what happens when C


As always, suggestions for future projects are appreciated, and I'd love to see your results! :la:



This fortnight's media: MANGA & ANIME!



fairy by dead-robot Lazy Lady by SilentHome
. I fell in love in April . by Nanahii Music of Sakura by Kenneos Rain (Comm) by KinanFuntom23nyan
Ami by Kotikomori Night Hail by luien
Creperie Toutatis Delices - Mytho Fanart by giz-art 6619120472352184776 by CuoZ
.:. Shine Like the Stars .:. by StephanieRosario | U n e x p e c t e d F l o w e r | by Emy-san Magic by Naussi
[SM] Sleep by tshuki imperial sol by Seo-Yeong-Hee
Winter Butterfly by Eranthe Commission: Koro and Major by Lovepeace-S Ducking by Na0h
El Necio by AlixR Generator No.90 by harousel Alice in the Wonderland by TiRaPuW


More Journal Entries

Recent Journal Entries

Deviants

Comments


Add a Comment:
 
:iconroguemudblood:
RogueMudblood Featured By Owner Apr 30, 2015   Writer
Cheers fella white-wine (party) fella's Gobbler (Party) Happy fourteenth, Fella! Blower fella (Party) fella Gift (Party) You've come a long way!
Reply
:icongreenxboy:
greenxboy Featured By Owner Mar 2, 2015
Thank you very very much for the feature  :D (Big Grin) Headbang! 
Reply
:iconxxxkatrina-starxxx:
XxXKatrina-StarXxX Featured By Owner Jan 27, 2015  Student Traditional Artist
New DA Logo (Badges) New DA Logo (Badges) New DA Logo (Badges) New DA Logo (Badges) New DA Logo (Badges) 
Reply
:iconprettywitchdoremi:
PrettyWitchDoremi Featured By Owner Dec 13, 2014  Hobbyist Digital Artist
Are you guys ever going to bring the Fella plushies back?? I srsly want one~  CURSE YOU! I can't believe that I missed out on such a thing!
Reply
:iconwintercool612:
wintercool612 Featured By Owner Feb 16, 2015  Hobbyist General Artist
You could always try eBay or something like that?
Reply
:iconmiloticscale:
MiloticScale Featured By Owner Dec 14, 2014  Hobbyist Digital Artist
They are no longer available; the deviantGEAR and deviantWEAR stores have closed permanently.
Reply
:iconprettywitchdoremi:
PrettyWitchDoremi Featured By Owner Dec 14, 2014  Hobbyist Digital Artist
Aww. Alrighty.


But am I allowed to ask why it closed down?? O-o
Reply
:icon1soulless1:
1Soulless1 Featured By Owner May 14, 2015  New Deviant Student General Artist
Reply
(1 Reply)
:iconcinyu:
cinyu Featured By Owner Dec 15, 2014  Hobbyist Digital Artist
Unfortunately, I see no reasons announced. :(

Here is their last journal:
Fond Memories: The deviantART Gear Store is Closed
Reply
:iconmiloticscale:
MiloticScale Featured By Owner Dec 14, 2014  Hobbyist Digital Artist
I don't believe that DA staff ever announced the reason(s). :o
Reply
:icondarkacguy:
DarkACGuy Featured By Owner Dec 6, 2014
I guess DA is gonna drop Fella ever since their new switch. They probably think that they're so pretentious and don't have time for something as trivial as a mascot.
Reply
:iconkuletxcore:
KuletXCore Featured By Owner Dec 8, 2014
read the article again.

they said that they will NEVER change fella.
Reply
:iconmiloticscale:
MiloticScale Featured By Owner Dec 6, 2014  Hobbyist Digital Artist
Nah.
Reply
Add a Comment: