Shop Mobile More Submit  Join Login
×

PE: Cellphone Art + Contests

Sun Aug 11, 2013, 5:33 AM


Make Art with a Cell Phone?!



Sweet Serenity by Sabeelaa
Samsung Galaxy S3

Many people dismiss photos taken with a cellphone as "myspace shots" and don't classify drawings made from smartphones as art. I've compiled this article to (hopefully) change your perspective on that!

Lost Somewhere In Between by oO-Rein-Oo
iPhone 4

With touchscreen smartphones advancing every day, several artists have taken this opportunity to explore their talent while on the go! I've seen so many brilliant photos captured with cellphones and excellent drawings made with smartphones - some of them even made with their fingers and no stylus! It astonishes me that despite the limited size of their environment (ex: 3.5 by 4 inch screens), I have seen artists create absolutely breath-taking masterpieces!

A Beautiful Day by IonShoweR
Samsung Galaxy Note

Below I've featured some of these cellphone photos and digital drawings found on deviantArt

Digital Drawings


Tarantula by DavidBurles Image by johneebee Frozen Moment... by Missrlola SQB Unknown by MayanMuscle
Pretty in Profile by Shinryu76 Beauty lies in the eyes of the beholder by Sabeelaa Slenderman by 4theloveofdrawing 0038898915 by jessy-13
burning ROSE by Missrlola Edgar Allan Poe by IDruDat Santana Lion Faces by MayanMuscle <da:thumb id="385372307"/>

Mobile Photography


Castles And Dreams by oO-Rein-Oo iPhoneography,   Double Pole by arminmersmann2 Halong bay and Smartphone by GraFik1969 Winged Eye (1 of 1) by ScottJWyatt
The Claw by CreativeCamArt Crustacean by FauxHead  Berlin Tower by Chazodude White Souvenir by KizukiTamura
<da:thumb id="370773144"/><da:thumb id="182519961"/>m.fruits by AzankinoKING the blessing rays by rajeevnraman

Groups


I've recently started up 2 Phone app fan groups that have a wonderful artistic community of its own: one is a multi-user social drawing app for Android users called SquibbleBox and the other is the second version of the famous Pictionary app Draw Something for iOS and Android devices called DrawSomething2 Both apps have the awesome re-draw feature that muro has, so that when the drawing is being played we can see exactly how it's being drawn, the colors and brushes being used, and learn from it!

:iconsquibblebox: :icondrawsomething2:

Skull by 4theloveofdrawing
Samsung Galaxy S2 Skyrocket via SquibbleBox

Here are some other groups regarding camera phone photos and digital art drawn with phones. Have a look to see the wonderful art and join any relevant groups :)

:iconphone-camera: :iconmobile-artists: :iconmobileartists: :icongalaxynoteartists: :iconiphoneart: :iconsketchbookmobilepros: :iconiphone-photos: :icondrawsomethingposts: :iconitouchdeviants:

If you know any more groups, leave a comment below with its link!

iPhoneography,   Quagmire by arminmersmann2
iPhone

Cell phone Photography and Digital Art Contests!

Now onto some fun stuff! :eager: I've put together a few contests for you Mobile Artists!
Here are the Judges: Kaz-D im-not-sana Lintu47
Please note, prizes may increase, so keep checking back!
If you'd like to donate to any please leave a comment below :aww:

Mobile Photography Challenge


Eligibility: All cell phone photographs are welcome! Whether you're a photographer or not :)
Theme: Nature (Animals, Plants, Landscapes & Scenery)
Prize:

Deadline: 1st September, 2013
Rules:
  • Take a NEW photo (from Aug 11th) relevant to the theme and submit to deviantArt
  • Only slight editing allowed (brightness, contrast, curves, sharpness, crop)
  • Do NOT remove the EXIF data! (So we can be sure it's actually taken from a cellphone)
  • Note im-not-sana with "Mobile Photography Challenge entry" and include your thumb
  • I'll collect them to my favorites here: im-not-sana.deviantart.com/fav…
  • Maximum entries: 3 photos

m.sunset by AzankinoKING
iPhone 4s

DrawSomething2 Challenge


Eligibility: All iOS and Android devices
Theme: Inspired by marziiporn
Prize: Winner gets a 4x6 photo print from the artist fav.me/p3703650
Deadline: 25th August, 2013 (2 weeks)
Rules:
  • Download the Draw Something 2 app from iTunes or the Play Store
  • In the Daily Draw, draw a picture inspired by marziiporn
  • Try to use her style to create your own art instead of just copying hers exactly and then credit her when you submit it do DS2
  • Upload to the group DrawSomething2 in the Group Folder
  • Make sure your address is saved under Shop > Wishlist > Change Address and add your desired print to your wishlist
  • Maximum entries: 2 drawings

<da:bigthumb id="74173268"/>

SquibbleBox Challenge


Eligibility: All Android devices
Theme: Victor
Prize: Winner gets 396 :points:, a 1 month Premium Membership OR a print of your choice in equivalent amount, US $4.95
Deadline: September 1st, 2013 (3 weeks)
Rules:
  • Download the SquibbleBox app from the Google Play Store
  • Draw whatever you like related to the theme (ex: the name, a winner, victory of a conqueror etc.)
  • Upload to deviantArt and the Group Folder
  • Make sure your address is saved under Shop > Wishlist > Change Address and add your desired print to your wishlist
  • Maximum entries: 2 drawings

Until Death Do Us Part by krisz486

Conclusion


Thanks for reading this article all the way through, hopefully it's inspired someone somewhere because these artists have certainly motivated me to try to become a better digital artist and continue with my photography even if my camera broke :)

Unfortunately not all artists have ventured into dA with their wonderful art, so here's a small feature below of some outside of deviantArt that might motivate them to share their art here if you all could leave a few encouraging comments in this article for them to read!


Digital Art By brendahana with HTC Amaze via SquibbleBox

2013-08-11 16.28.42 by im-not-sana
Digital Art by Dani with iPhone 5 via DrawSomething2


Photo taken by Abdulla Mohammad with iPhone via Instagram

2013-08-11 16.21.38 by im-not-sana
Digital Art by Mehl with Android device via DrawSomething2


Photo taken by Ray Ray Sparrow with iPhone 4s via Instagram


Digital Art By Missrlola with Samsung Galaxy S3 via SquibbleBox


Photo taken by Carry Congrejo with iPhone 4s via Instagram


Digital Art By maryjayne530 with Samsung Galaxy S3 via SquibbleBox


Photo taken by Alec Potier with iPhone via Instagram

I'd just like to conclude this article with some words of encouragement, don't be put down if you don't have a fancy expensive tablet, stylus or an SLR camera, take advantage of your light-weight handy cell phone to take photos at all times - good for street photography! And with a little bit of patience and practice, you can even use your phone to create brilliant digital drawings! If you already have some or are going to make some, link me in the article below! I'll try to make a bi-monthly feature of Mobile Artists! :la:




SquibbleBox Feature I

Thu Jun 27, 2013, 10:12 AM by im-not-sana:iconim-not-sana:


:iconcjami:

Do you like to doodle on your Android phone or tablet? With your finger or stylus? Well, SquibbleBox is the place for you! It's a free app for Android devices with a drawing network that allows users to collaboratively draw with each other in real-time! In this feature, I'll be showcasing some of the wonderful art made from smartphones and tablets through the members of SquibbleBox!
:iconsquibblebox:

SquibbleBox Challenge


:iconionshower:

You have one week to complete this challenge! We'll give you keywords and you can challenge yourself to draw the theme in SquibbleBox however you want. Then we'll feature these on deviantArt. Because of the recent heatwaves, this week's theme is "Cool"



On deviantArt


Frozen Moment... by Missrlola
Cool..... by TimmerfyKeepin' it Cool by maryjayne530
One Cool Cat by 4theloveofdrawingCoolness Preserved by im-not-sana
Too Cool 4 Summer School by MayanMuscle

Exclusively On SquibbleBox





:iconim-not-sana:

For the next challenge, I'll be introducing a prize (Premium Membership or a Print) to one random participant on deviantArt! So stay tuned! :eager:


Member Feature - MissRLola


:iconmissrlola:

I use Samsung Galaxy S3 to draw without a stylus

Roses by MissrlolaDandelion by Missrlola
burning ROSE by Missrlolapeacock by Missrlola
eYe by Missrloladancing shadows by Missrlola

Check out the rest of her Squibbles here!


Collaborative Drawings


I am not complete by krisz486Until Death Do Us Part by krisz486Creepy Doll by 4theloveofdrawingSkull by 4theloveofdrawingHappy Tree Friends Assemblage by 4theloveofdrawing


Latest Squibbles


:iconim-not-sana:

Check out the latest Squibbles from different users here!








Lucky for you guys, this will be my last article for this week's CSS3 101 series! No more spam of unintelligible code from me...

:dance: :boogie: :iconlawooplz: :party: :happybounce:

... for now ;)



For those that were keeping up with the series, thanks so much for reading and providing feedback! I know I might have left out some info here and there, but you have to understand CSS3 is quite an extensive topic to break down and explain at beginner level, so really thanks to those that also reminded me about the few things I might've missed out. It's even more difficult to explain since I don't have CSS3 privs available to show live examples of cooler animations, but hope you were all able to understand and follow along anyway :)

Unfortunately, had to cut the series short due to time constraint ^^; I initially had more topics in mind for this series, namely Transform, Animation, Attribute selectors and more Pseudo-classes, but had some personal issues to deal with so couldn't finish writing them up :saddummy: But hopefully, next Community Week, I'll have those ready! :la: I will however, update the existing articles with more tips and tricks such as adding more Pseudo-classes and transition effects, and most importantly showing you how you can integrate them into your journal skins and e-portfolios! I mean there's no point in explaining what they do if you don't know what to do with it right? ;) So keep checking back because I'll keep revising these articles, adding more ideas, tricks and tips!

I've compiled all the links to the articles and topics right here:

CSS3 101 Topics




Now onto more interesting stuff! :eager:

CSS3 Trivia



I'll be asking different trivia questions, and the first deviants to answer one correctly by commenting here in this article will win 10 :points: You can only answer ONE question, so choose wisely which one you answer! Check to see if someone else has already said the answer, if they have then answer another question! Here are the questions:


1. What are the Vendor prefixes?

Congrats James--Steele "The vendor prefixes are -webkit-, -moz-, and -o- (also -ms- for IE)."

2. What does :nth-child(2n+2) mean?

Congrats Icesis "It means every even element!"

3. What's the difference in syntax between Pseudo-classes and Pseduo-elements?

Congrats SavageFrog "Pseudo-Classes have one colon & Pseudo-Elements have two colons"

4. What is the equivalent of ease-in-out in cubic-bezier() format?

Congrats neurosource "cubic-bezier(0.42, 0, 0.58, 1)"

5. What are the two different syntax to create a diagonal gradient going from bottom right to top left?

Congrats PizzaPotatoNBacon "315deg" and "to top left"

6. What year was CSS first launced?

Congrats Astrikos "December 1996"

7. What are the two ways to define timing functions?

Congrats Kittylyn-Donut "a stepping function or a cubic Bézier curve"

8. Which is the only Pseudo-element that does not work with one colon?

Congrats iAmoret "::selection"

9. How can you create a fractal type effect with gradients?

Congrats Yixeirt "Adding and specyfing some sizes to repeating-radial-gradient"

10. What does this line of CSS blockquote::before{content: open-quote;} do?

Congrats Chivi-chivik "To add quotation marks (") before the text within the blockquote tag automatically"

CSS3 Mini Contest



For 100 :points:, create a fancy Transition menu that I mentioned in the previous article on CSSDesk and link it here. I'll choose the winner based on creativity and bonus points for using elements of other articles such as Gradients ;)



Deadline: June 7th



Winner by Default: James--Steele with cssdesk.com/SQK79 ! :clap:

CSS3 Mini Challenges



I've mentioned three challenges in the previous articles with templates. Complete only one of them in the CSS Sandbox and link it here! First ones to complete a challenge properly wins! 

3D Button - Winner 50 :points:


Congrats iAmoret with cssdesk.com/UyxUt! :clap:


Create a face - Winner 20 :points:


Congrats PizzaPotatoNBacon with cssdesk.com/YUVT8 :clap:


Blockquote with Triangle & Icon - Winner 20 :points:




Test out your CSS3 snippets with an instant Live Preview in this CSS Sandbox:


Please FAV :+fav: this Article if you're going to participate!



GOOD LUCK! :eager:







PE: CSS3 101 - Transition Animations

Fri May 31, 2013, 9:19 PM
PE 2010 stamp by projecteducate





Table of Contents


This article has four main topics:



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 Sword Tard by jahw  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!
Fig. 1 - Hover over the emote

Now on to the technical definition :B Basically transition allows the coder to change CSS properties smoothly from one value to another over a given duration. Whereas without CSS3, this is how the emote would change distance on hover:
Sword Tard by jahw
Fig. 2 - Hover over the emote

As you can see the change looks very abrupt and unrealistic. But thanks to CSS3's transition property, we can make our webpages attractively interactive by animating CSS properties from its old state to the new state over a period time.

Now that's what I'm talking about!



Transition-property



This specifies the name of the CSS property to which the transition is applied. For the example in Fig. 1, the CSS property I used to change was the padding-left. I could also have used left or magin-left to achieve similar results.

Fig. 1 - transition-property: padding-left;

CSS
img{
padding-left: 0;
transition-property: padding-left;

/* Webkit Browsers */
-webkit-transition-property: padding-left;
 
/* Firefox */
-moz-transition-property: padding-left;

/* Opera */
-o-transition-property: padding-left;
}

img:hover{
padding-left: 100px;
transition-property: padding-left;

/* Webkit Browsers */
-webkit-transition-property: padding-left;
 
/* Firefox */
-moz-transition-property: padding-left;

/* Opera */
-o-transition-property: padding-left;
}


Note: Adding just this will not give the smooth effect yet, go to the next section to know how.

Example of CSS properties that can be animated:


position of elements top bottom left right in length by px or percentage%
size of elements width or height in px or %
margins of element with either margin affecting all margins
or margin-top margin-bottom margin-left margin-right in px
padding of element with either padding affecting all padding
or padding-top padding-bottom padding-left padding-right in px
opacity of an element in a number
color value in #HEX or rgba() for text
font-size for text in px
text-shadow for text in shadow-list format: color, x, y, blur;
background-color with color values
border of element with either border affecting all borders
or border-edge-color and border-top-width where edge can be changed to top bottom left right


Transition-duration



This property defines the length of time that a transition takes - how long from the old value to the new value? If you do not add this property, the value will be "0s" by default which means that the transition is immediate and not smooth. By adding a value like 1s, you can see the animation go smoother like in Fig. 1. You can change the duration as you like, if you want it to go slower, it could take 3s instead.

Fig. 1 - Click Here for Live Preview

CSS
img{
padding-left: 0;

/* All Browsers */
transition-property: padding-left;
transition-duration: 1s;
 
/* Webkit Browsers */
-webkit-transition-property: padding-left;
-webkit-transition-duration: 1s;
 
/* Firefox */
-moz-transition-property: padding-left;
-moz-transition-duration: 1s;

/* Opera */
-o-transition-property: padding-left;
-o-transition-duration: 1s;
}

img:hover{
padding-left: 100px;

/* All Browsers */
transition-property: padding-left;
transition-duration: 1s;
 
/* Webkit Browsers */
-webkit-transition-property: padding-left;
-webkit-transition-duration: 1s;
 
/* Firefox */
-moz-transition-property: padding-left;
-moz-transition-duration: 1s;

/* Opera */
-o-transition-property: padding-left;
-o-transition-duration: 1s;
}


As you can see, there should be a transition-duration specified for when the animation takes on hover and when it's off hover. So that it goes smoothly when you point your mouse over it and after you take the mouse off. The time doesn't have to be the same for both. You can make it go slower when it's returning back to its original value.

Go ahead and play around with the duration property here to see it happen in action :)

Transition-timing-function



This property describes how the values used during a transition will be calculated. It allows for a transition to change speed over its duration. For example, if I want an animation to look like it's running from one location to the other, it can start really fast at first like a sprinter in real life does, then go at a slower constant speed, then pick up speed again towards the end. These effects are commonly called easing functions and a mathematical function that provides a smooth curve is used. There's two ways to define the timing functions: a stepping function or a cubic Bézier curve.

A stepping function is easy to understand. It just divides the number of steps into equally sized intervals. The function also specifies whether the change in output percentage happens at the start or end of the interval (in other words, if 0% on the input percentage is the point of initial change). ex: steps(2, start)


Fig. 3 - Stepping Function

A cubic Bézier curve is defined by four control points, P0 through P3 (see Fig. 4). P0 and P3 are always set to (0,0) and (1,1). The transition-timing-function property is used to specify the values for points P1 and P2.

These can be set to preset values using the keywords like ease-in or can be set to specific values using the cubic-bezier function ex: cubic-bezier(0, 0, 1, 1)


Fig. 4 - Bézier curve

Keywords with its equivalent in the cubic-bezier


ease = cubic-bezier(0.25, 0.1, 0.25, 1)
linear = cubic-bezier(0, 0, 1, 1)
ease-in = cubic-bezier(0.42, 0, 1, 1)
ease-out = cubic-bezier(0, 0, 0.58, 1)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)
step-start = steps(1, start)
step-end = steps(1, end)

Fancy Menu Using ease-in



Fig. 5 - Click here to see Template!

In the template I made here I have the code and the html where you can see that the menu class has the transition property in which it eases in when hovered on and hover off.

Transition-delay



This property defines when the transition will start. It allows a transition to start executing after some time when an action is applied. For example, an animation can start 5 seconds after I hover over the element. It is 0s by default which means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

transition-delay: 3s;

Fig. 6 - Hover until the image changes

As you can see in the example above, the image doesn't change until after 3 seconds have passed, so the animation doesn't occur until after a certain time that the coder has defined. You can find the template here!

Transition


This basically groups all the four previously mentioned properties together in one property in the following order:

transition: transition-property, transition-duration, transition-timing-function, and transition-delay;

Here's how we could use all the properties for one animation:

Fig. 7 - Hover to see effect

I've changed two CSS properties for the example above: width of the image and the background-color so this is how the syntax would look:

transition: width 1s ease-in, background-color 1s ease-in;

What if I have too many transition properties with the same timing functions?


Well, quite easily, instead of name ALL the properties and separating them out by commas, you can simply just add all to your code. (Thanks to jonarific for pointing it out!) So the new syntax would now look like this:

transition: all 1s ease-in;

That's about all there really is to it! :la: If you wanna test your knowledge and challenge your skills, check out the small contest below!

Mini-Contest


For 100 :points:, create a snazzy drop-down menu using the template provided with transitions and bonus points for whoever makes it look appealing using gradients or any other properties mentioned in previous articles! :eager:

Save your work on
and link your snippet in the comments below!
Ends on June 7th :)

Good luck! :la:



TL;DR - Documentation



transition-property: property;

transition-duration: time;

steps(integer, start)
steps(integer, end)

cubic-bezier(number, number, number, number)
cubic-bezier(x1, y1, x2, y2) curve where both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range.

transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: linear; = transition-timing-function: cubic-bezier(0, 0, 1, 1);
transition-timing-function: ease-in; = transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: ease-out; = transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
transition-timing-function: ease-in-out; = transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: step-start; = transition-timing-function: steps(1, start);
transition-timing-function: step-end; = transition-timing-function: steps(1, end);

transition-delay: time;

transition: transition-property, transition-duration, transition-timing-function, and transition-delay;
All four properties grouped together


Useful Links



CSS3 Animated Journal Skin by DEVlANT




For Non-Alpha Members, if you'd like to try having CSS3 effects look at this great tutorial by Fli-c




If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:
Create your own Journal Skin by miontre
Prefix CSS Generator

Test out CSS3 snippets with an instant Live Preview in this CSS Sandbox:











Table of Contents


This article has two major topics:


1. Pseudo-Elements



2. Pseudo-Classes





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 source document ex: ::before

Pseudo-Classes are a way to select certain parts of HTML markup and its elements or on characteristics like name, attributes or contents. Some pseudo-classes are dynamic where they're applied as a result of user interaction with the document  ex: a:hover where a is the element and :hover is the state that occurs when the user hovers over it. It also includes virtual components of the document tree ex: :nth-child(N)



Don't worry, you'll understand more as I go along with examples. All you really need to know for now is that with the introduction of CSS3, the major difference between the two can be seen with the colon :
Pseudo-Classes have one colon :
ex: p:first-letter{}
Pseudo-Elements have two colons ::
ex p::before{}
And I have colon greater than :>

Anyway, browsers still support the CSS2.1 specifications of using one colon : for older pseudo-elements
ex: p:before{}
So it won't matter if you use one or two colons for the older ones but for the ones introduced in CSS3 they can only be used with two colons to emphasize the difference between elements and classes.

Note: Since most of these pseudo-elements are from CSS2.1, I won't go too in-depth but perhaps show interesting tricks instead. And because there's far too many pseudo-classes to cover, for now I'll just explain the few important ones and will add the others in later when I have more time. So keep checking back for updates!

Pseudo-Elements



The sub-topics I'll be covering consist of ::first-letter, ::first-line and ::selection as well as ::before and ::after with generated content:" ";

::first-letter


Quite simply, this changes the style of the first letter of your text. You can specify exactly what you want to change about that text. In the following example I just changed the size and font of the first letter to imitate the beginning of a chapter in a novel.

CSS
p {color:black;}
p::first-letter {
font-size: 28px;
font-family: 'Lobster', cursive;
}

HTML
<p>Add your text here.</p>

OUTPUT


Once upon a time, it was the end.
Fig. 1

::first-line


This affects the first line in a sentence or paragraph. You can add different text styles. In the following example, I just used it to make the first line of the paragraph in small caps.

CSS
p {color:black;}
p::first-line {
font-variant:small-caps;
}

OUTPUT


Doesn't it sound like I'm shouting when you read the first line in your mind?
Fig. 2

::selection


This affects the text that you want to highlight. How do you highlight? You simply hold left click with the mouse and drag across the text. Usually used when copying part of some text. There's two different syntax that you must include for full browser compatibility.
::selection{} for all Browsers
::-moz-selection{} for Firefox

Note: This is the only pseudo-element that won't work with one colon ex: :selection{} since it was just introduced in CSS3

In the following example, I'm only going to change the highlighted color of text in italic so you can see the difference.

CSS
i::selection {
color: red;
background: yellow;
}

i::-moz-selection{
color: red;
background: yellow;
}

HTML
The highlighted text <i>goes in here!</i>

OUTPUT


This is some text that you should highlight!
Fig. 3

::before and ::after


Pseudo-elements also provide coders a way to refer to content that does not exist in the source document which give access to generated content. As the name says, it either generates some content before the element or after the element. You can either use it to insert textual content (string), an image, a counter, attributes, or quotation marks. In the following example, I'll be adding auto-generated quotes around the text.

CSS
blockquote::before {
content: open-quote;
font-size: 28px;
font-family: 'Lobster', cursive;
}

blockquote::after{
content: close-quote;
font-size: 28px;
font-family: 'Lobster', cursive;
}

HTML
<blockquote>Add Text Here</blockquote>

OUTPUT


To Quote
or
Not To Quote!

Fig. 4

Use ALL the Pseudo-elements! :iconallthethingsplz:


Now we can style a blockquote using all the elements we've learned so far!

What a fancy looking blockquote if I do say so myself, ye ol' Chap!

Fig. 5

I'm sure you'll be able to get more creative than that ^ But you can see that I've included a linear-gradient from the previous article as the background color, changed the first letter's font and size, the first line is capitalized, the color changes when selected, and added quote marks around the paragraph text.

Note: Using ::first-letter and ::before with generated content on the same element will affect the first letter of the content in ::before ex:
blockquote::before {content: open-quote}
blockquote::first-letter {font-size: 28px}

This will render the opening quote mark " with the large font size instead of the first letter of the sentence.

To solve this, it's better to separate the two with different tags but one class as you can see the structure of the HTML below where I created one blockquote class called .fancy{}, in which the ::before and ::after affect, that embodies a .fancy p{} class, in which the ::first-line and ::first-letter affect

HTML
<blockquote class="fancy"><p>Add Text Here</p></blockquote>

CSS
.fancy{
width: 200px;
padding: 20px;
background: linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1) 100%);
}

.fancy p::first-letter {
font-size: 28px;
font-family: 'Lobster', cursive;
}

.fancy p::first-line {
font-variant:small-caps;
}

.fancy::before {
content: open-quote;
float: left;
font-size: 30px;
}

.fancy::after{
content: close-quote;
float: right;
font-size: 30px;
}

.fancy p::selection {
color: white;
background:black;
}

.fancy p::-moz-selection{
color: white;
background: black;
}


Challenge!


Try to create a fancy blockquote with a triangle and icon using Pseudo-Elements!

:iconisayplz:

What a fancier looking blockquote if I do say so myself!
Fig. 6 - Click here for template

Hint: You can use ::before for this but leave content:""; empty and use it to make the triangle borders. Make use of negative margin to position the elements.

Try to think of other creative ways to make use of ::before and ::after



Pseudo-Classes



CSS3 has many pseudo-classes but I'll only be discussing a few in which one is the most powerful pseudo-class that allows the CSS designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first as it involves a bit of math, but it's easy once you get the hang of it.

Dynamic Pseudo-Classes


This is pretty simple, with these available pseudo-classes you can style how an element like links look according to user input, such as when the user hovers or clicks. It's easy to create buttons this way.

a:link{} is an unvisited link. How users use just a{} to style un-visited link, using :link allows better flexibility.

a:visited{} are links that have already been visited.

a:hover{} is the state when a user hovers over the link with their mouse

a:active{} is the state when a user clicks on the link with their mouse. Good for giving the effect of a button being pressed down. I've added the button from the previous article.

Fig. 7 - Click to see template

a:focus{} The :focus selector, similar to :hover, is allowed on elements that accept keyboard events or other user inputs. You can combine them as well with a:focus:hover{}


Fig. 8 - Click here for template

:nth-child(N)


:nth-child(N), where N is the argument that you specify, will give you the opportunity to select specific parts of elements. For example, if you want to style only the border on odd number of images in your thumbs, N = odd

ex: img:nth-child(odd){border: 5px solid black;}

Fig. 9 - Click Here to see Live Preview

N can be a keyword like odd or even, a number like 1 or 5 or a number expression in an+b format where a and b are integers ex: 2n+1

p:nth-child(1){} is equivalent to p:first-child{} that was released in CSS2.1

:nth-child(an+b)
an+b is called a number expression where a and b are replaced with numbers. Number b represents the ordinal position of the first element that we want to match, and the number a represents the ordinal number of every element we want to match after that.

For example:
The expression 2n+1 = every odd element
The expression 2n+2 = every even element
The expression 3n+1 will match the first element, then every third element after that.
So: 1 2 3 4 5 6 7 8 9 10 11 etc.
The expression 3n+2 will match the second element, and every third element after that.
So: 1 2 3 4 5 6 7 8 9 10 11 etc.

All starting to make sense now?



:last-child


This is very simple really. It affects only the last sub-element in an array of elements. It's the opposite of :first-child

For example, if you want to style only the border on the last image in your gallery:
img:last-child{border: 5px solid white;}


Fig. 10 - Click Here to see Live Preview

Add ALL the Pseudo-Classes :iconallthethingsplz:


The following example shows you how you can use all the Pseudo-Classes I've mentioned in this article in a list to style a link on hover, when clicked on, the even items in a list, and the last child in a list.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
Fig. 11 - Hover over items and click

As you can see in the example above, I've made all normal items in a list black, but the even child is blue. All the items on hover should be yellow and green when clicked on but the :nth-child(even) and :last-child overrides that. Have a look at the code below and see if you can come up with something more interesting :)

HTML
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li></ul>

CSS
li{
display: inline-block;
list-style-type:none;
margin: 5px;
color: black;
}

li:hover{
color: yellow;
}

li:active{
color: green;
}

li:nth-child(even) {
color: blue;
}

li:last-child{
color: red;
}

Unfortunately, that's all I've got to explain for today. Like I mentioned before, I'll update this article when I get more time with more pseudo-classes that work in deviantART, step-by-step on how they work and how you can use them on your web pages. See ya next article!



TL;DR - Documentation



::first-letter{}

::first-line{}

::selection{}
::-moz-selection{}


::before{content:"";}
Empty: ""
Text: "String Text"
Opening Quotation Marks: open-quote
Closing Quotation Marks: close-quote
URI: url(image-link)
Attribute: attr(X)

::after{content:"";}
Empty: ""
Text: "String Text"
Opening Quotation Marks: open-quote
Closing Quotation Marks: close-quote
URI: url(image-link)
Attribute: attr(X)

a:link{} /* unvisited links */
a:visited{} /* visited links */
a:hover{} /* user hovers */
a:active{} /* active links */
a:focus:hover{}


:nth-child(N){}
N keyword: odd or even
N number: 1
N number expression: an+b

:last-child{}


Useful Links

If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:
Create your own Journal Skin by miontre
CSS3 Attribute Selectors by electricjonny
Advanced Typography by LabLayers for CSS-DYK

Test out CSS3 snippets with an instant Live Preview in this CSS Sandbox:


Journal Skins Examples


Stop SOPA Blackout Skin by GillianIvy
::selection{}
Default Blue by im-not-sana
blockquote w/ triangle and icon using :before{}

If you have created any Free Skins with Pseudo-Elements or Classes, leave a comment with a link to your deviation and specify which you have used so I can add here




PE: CSS3 101 - Color Gradients

Tue May 28, 2013, 3:40 PM
PE 2010 stamp by projecteducate





Table of Contents:


This article contains two major topics of Gradients:


1. Linear-Gradient :dalogo:



2. 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 computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a different color at different positions produces smooth color transitions in between the different ranges.

A linear color gradient is specified by different points with a color at each point. Colors along the path through those points are calculated and then extended across to fill the region.


Fig. 1 - Linear Gradient
A radial color gradient is specified as a circle that has one color in the center and another at the corners. Colors are calculated based on the distance from the center.


Fig. 2 - Radial Gradient
However with CSS3, instead of uploading gradient images to your webpage as you can see in Figures 1 & 2, you can just code the gradient right in. Since I'm more of a Visual Learner myself, I'm just going to go right ahead and start teaching as I go along with examples.

Linear-Gradients



The first topic of CSS3 I'd like to cover is one that's already available to *PremiumMembers in Journal Skins. By the way, there's a BlackBerry promotion going on, so Non Premium Members can use Journal skins from this page me.deviantart.com/journal/?edi… and test these features out as well :)

Vertical Gradients


This type refers to the gradient changing from top to bottom. This is the default gradient we'll see when entering the basic syntax:
linear-gradient(color, color);

CSS
/* W3C Standard that works in dA */
.box {
width: 200px;
height: 200px;
background: linear-gradient(#000000, #ffffff);
}

HTML
/* The same HTML class I'll be using throughout Linear Gradients */
<div class="box"></div>

OUTPUT


Fig. 3

Note: To use Linear-Gradients on webpages other than dA, it's preferred to add the following syntax for full Browser Compatibility

.box {
background: #000000;
background: linear-gradient(#000000, #ffffff);
/* Firefox 3.6+ */  
background: -moz-linear-gradient(#000000, #ffffff);
/* Safari 5.1+, Chrome 10+ */  
background: -webkit-linear-gradient(#000000, #ffffff);
/* Opera 11.10 */
background: -o-linear-gradient(#000000, #ffffff);
}

Note: To be as backward compatible as possible on browsers, it's best to first specify a default background color
background: #000000;


What if we want to add more colors vertically?


Well then go ahead and add as many as you want and it will evenly distribute the positions of these colors!
linear-gradient(color, color, color, etc.);

.box {
background: linear-gradient(maroon, red, orange, yellow, green, blue, purple, pink, #FFFFFF);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 4

Note: For some reason, dA won't allow you to use ALL color names (ex: red, blue) in linear-gradients so I had to insert a hex value of white (ex: #FFFFFF = white) at the end. I'm only using names here so that beginners can follow easily, but it's better to use hex values or rgba (ex: rgba(255, 255, 255, 1) = white) If you DO want to use the names make sure you enter at least one hex value wherever.

Well that was easy enough! :dummy: Don't you think?
Good, 'cause now this is where things get a little complicated :noes:



What if I want to control the position of where the colors stop?


For that the syntax will change a bit.
linear-gradient(color position, color position, etc.);
Where the position is calculated in percentages. The position is usually considered as the color stop because that's where it will stop and the new gradient will start.

.box {
background: linear-gradient(#FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 5
In Fig. 5 you can see that white is opaque until 30% of the box and that's where it stops and starts to change its gradient from gray until it reaches black at 100% which is at the bottom of the box.

What if I want to control the direction of the vertical gradient?


Again, you'll need to add a bit more to the syntax:
linear-gradient(to direction, color stop, color stop, etc.);
The direction can either be starting from top or bottom depending on you!

Note: The syntax for linear-gradients has changed for the direction, where "to direction" used to just be to "direction" ex: to bottom used to be bottom. This only works in old browsers with prefixes and dA will change the syntax for you, but it's better to use the new syntax. Thanks to pikadudeno1 for pointing it out!

.box {
background: linear-gradient(to bottom, #FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 6

Challenge!


Now we can take what we've learned and apply it to create a 3D looking button!



Hover here and hold Click!
Fig. 7

As you can see, the gradients change when hovered on, and clicked on. In the snippet below, you can see that the gradient becomes lighter in opacity when hovered on, and changes from top to bottom when clicked on. This, along with some other attributes such as box-shadow, creates a nice 3D effect.

HTML
<a href="" class="button">3D Button!</a>

CSS
.button {
background: #B73E62;
background: linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}
.button:hover {
background: linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5));
}
.button:active {
background: linear-gradient(to bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}

Try it out yourself here!

Horizontal Gradients


This type of gradient refers to the colors changing from left to right or vice versa.
linear-gradient(to direction, color, color, etc.);
Where direction is either left or right
Of course, you can always add the position in percentages to better suit your needs.

.box {
background: linear-gradient(to left, #FFFFFF 0%, black 20%, white 40%, black 60%, white 80%, black 100%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 8

Diagonal Gradients


You can achieve this in two ways, with angles or direction:
linear-gradient(to direction direction, color stop, color stop, etc);
linear-gradient(angle, color stop, color stop, etc.);

The angle starts at 0deg same as to bottom  ↑
Then goes clockwise to 45deg starting from bottom left to top right  ↗ same as to top right
At 135deg it starts from top left to bottom right  ↘ same as to bottom right
At 225deg it starts from top right to bottom left  ↙ same as to bottom left
At 315deg it starts from bottom right to top left  ↖ same as to top left

.box {
background: linear-gradient(45deg, yellow, orange, pink, #ffffff);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 9

Angled Gradients


Of course, you can get creative with the different degrees of angles and positions and do your own style of gradient.

.box {
background: linear-gradient(20deg, magenta 20%, red 60%, #ffffff 80%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 10

Still awake?



Well sadly, this is where Color Gradients ends in regards to deviantART.
But read on, if you're still interested to use them on your own webpages! :#1:

Repeating-Linear-Gradient


This does exactly what the title says, repeats the gradients so you can create a sort of pattern. Imagine the endless possibilities! You can completely replace background images with this.

div {
background: repeating-linear-gradient(black, black 20px, white 20px, white 40px);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 11 - Click to see Live Preview

Note: You can test the rest of these gradient attributes in the Image Links provided. Copy the code, press Reset and start from there.

Radial-Gradient



This is a gradient created in circles, automatically starting from the center to the edges
radial-gradient(color, color);

div {
background: radial-gradient(black, white);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 12 - Click to see Live Preview

What if I want to add more colors at different positions?


As with linear gradients, you can add more colors and change position of the radial gradients as well with the following syntax
radial-gradient(color stop, color stop, etc.);

I just created a simple flag of Japan for the example below, but you can get creative with this!

div {
background: radial-gradient(red, red 40%, white 40%, white 80%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 13 - Click to see Live Preview

Note: The first color will automatically be positioned at 0% which is the center of the circle. But you can also change where you want it to start by specifying a percentage

What if I want a specific size?


If you want a circular size the syntax will be like this:
radial-gradient(sizepx, color stop, color stop);
If you want an oval shape the syntax will be like this:
radial-gradient(widthpx heightpx, color stop, color stop);

In the following example, I made an oval shape that looks like a face with a blue background. With this CSS3 feature, you can easily create shapes and images using radial and linear gradients!

div {
background: radial-gradient(100px 150px, pink, pink 50%, cyan 50%, cyan 100%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 14 - Click to see Live Preview

Challenge!


Try to create this face using extra div classes with use of positioning and sizes.

Fig. 15 - Click to work on Template

Repeating-Radial-Gradient


This creates a repeated pattern of radial gradients with the same syntax
repeating-radial-gradient(color stop, color stop);

div {
background: repeating-radial-gradient(black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 16 - Click to see Live Preview

Cool Effects by Specifying a Size!


You can also add sizes to this as well to create some cool fractal type effects with the syntax
repeating-radial-gradient(size, color stop, color stop);

div {
background: repeating-radial-gradient(10px, black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 17 - Click to see Live Preview

And that's all there is to it! Link me to any interesting gradient styles you come up with through this tutorial on cssdesk.com and leave a comment if you have anymore inquiries! Thanks for reading and hope you found this useful and easy to follow! :heart:



TL;DR - Documentation



linear-gradient(to direction, color stop, color stop);
linear-gradient(angle, color stop, color stop);
direction: top bottom left right
angle: 45deg ↗ 135deg ↘ 225deg ↙ 315deg ↖
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

repeating-linear-gradient(size, color stop, color stop);
size: 10px or 10px 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

radial-gradient(width height, color stop, color stop);
width: 10px etc.
height: 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

repeating-radial-gradient(size, color stop, color stop);
size: 10px or 10px 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

Vendor Prefixes


You should take note to use the following prefixes in front of each CSS style property for full Browser Compatibility on non-dA webpages:
Android: -webkit-
Chrome: -webkit-
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-

Example:

If you want to add a Linear Gradient:
linear-gradient(black, white);

You should add these:
background: black; /* Default color for really old devices */
background: linear-gradient(black, white); /* W3C Standard */
background: -webkit-linear-gradient(black, white); /* Chrome, Android, iOs, Safari */
background: -moz-linear-gradient(black, white); /* Firefox */
background: -ms-linear-gradient(black, white); /* Internet Explorer */
background: -o-linear-gradient(black, white); /* Opera */


Useful Links

If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:
Create your own Journal Skin by miontre
Ultimate CSS Gradient Generator
Linear-Gradients by jonarific
Learn more about rgba() and Alternate Color Models by jonarific

Examples of Journal Skins using Linear Gradients

Default Blue by im-not-sana Dark Space by im-not-sana
If you have one as well, let me know and I'll add it here




PE: CSS3 101 - Introduction

Mon May 27, 2013, 3:14 PM





Hey there Devious CSSkinners! :wave:


First off, hover over the Title and Stamp to see some snazzy effects. That's the kind of stuff that CSS3 allows users to play around with. As I had been an Alpha Tester on devBUG, we had a few CSS3 privileges to test in Journal Skins in which several deviants had asked me "How did you do that?" and "Please share the code so we can learn" so I've been meaning to give a few lessons on CSS3 since forever and projecteducate has given me the opportunity to do so :meow:

These are the Topics that will be covered this week:



I'll try to be as simple as possible with these topics and not get too technical so that it's easy for beginners to understand. However, as we go along I advise you to try and follow each article in order to avoid any confusions since the newer ones will contain information only explained in previous articles.

What is CSS3?



So first of all, what in the world is CSS? :confused: Counter Strike Source? :slow:
Nope, It stands for Cascading Style Sheets! :dummy:



That basically means it's a computer language used to style how your webpages look.

CSS was first introduced to the World Wide Web Consortium (W3C) in the mid 1990's because of the need to style electronically published documents. For example, if a News Agency wanted to publish their news online, there was no way to have their page in a newspaper format. Finally the CSS syntax was launched in December 1996. Since then, browsers have been modified and developed to meet its standards and CSS was revised again and again and variations were introduced such as CSS1, CSS2.1, CSS3.

One of the advantages was that it would increase the speed of accessing a website that would use CSS as opposed to accessing a website that purely uses images to style their webpage. There were many visual features that could be controlled. Another advantage was that it produced better and more flexible markup between browsers that was easy to maintain and extend in the future.

With the advancement of technology such as HTML5, JavaScript and CSS3, there was no longer any need to animate web pages using Flash and other such tools that would kill the speed as well as not being compatible on all browsers. The major advantage about this new technology is the cross-browser compatibility as well as on Mobile web browsers for Smartphones. So basically thanks to CSS, we can decide how we want to showcase ourselves to appeal others on the internet.

Still following?



Good. Cause now I've got some CSSecksy samples for you to drool over! :#1:

CSS3 Images




These iOS icons were made only with CSS3


The iPhone was created purely in CSS3, no images used at all. However, the animations were done in JavaScript.


This whale was designed completely in CSS3, down to the last curve! And then also animated using CSS3 as well. The animation only supports webkit browsers however.

CSS3 Animations




Google Doodles have the best CSS3 Animations ever! Click on the play button and enjoy the show!


Pull the lever to see the CSS3 magic happen! Works best on Chrome.


With the help of some Javascript to calculate the beats, the CSS3 used in these interactive music albums is amazing!

Now that you've seen those lovely examples, I'll be instructing you on what it all means and how they work in the following articles - Same time, Same place! So stay tuned folks! No, really.. I'll even give you free cookies!


Useful Links



If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:

If you'd like to learn how to create your own Journal Skin, here's a good tutorial by miontre
:thumb354675797:




Conceptography II

Sun May 5, 2013, 5:46 AM by im-not-sana:iconim-not-sana:

Conceptography


noun [kuhn-sep-tog-ruh-fee]

1. The science or study of Conceptual Art and the techniques involved in the procedures, processes, methods, of making and developing a conceptual piece through any form of medium

2. In conceptography the idea or concept is the most important aspect of the work. When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand to express the meaning being portrayed.

Not to be confused with "Concept Art" which is an illustration that conveys a visual representation of a design or idea for use in films, video games, animation, or comic books before it is put into the final product.

The Black Sheep by decomposerdoll

"The Black Sheep" by decomposerdoll portrays how the black sheep is the odd one out because it doesn't follow its herd. Instead of conforming, be yourself!




Announcement


These Monthly Articles will be based on my previous group #TheConceptBox (which I had to close down because of my year long hiatus) I'm ever so thankful to everyone for their support with that group but what's done is done and now I've decided I'll compile all the blogs myself into a single article and publish it once a month. As previously, I'll be including a Conceptual Artist Interview with some serious questions and some fun ones, Deviation of the Month, Themed Contests with prizes and all the entries being featured, Donor features since all my points will be used for these series, and Personality questions where you can learn more about yourself and others! For this article, I used some of the features from my old group since all those got deleted :( If you'd like to contribute to my article series by suggesting some Conceptual Art or in any other way, send me a note to discuss! I'll credit you in my next article :) If you enjoy reading these articles, please :+fav:! Thank you! :heart:



Interview with BlackJack0919


1. Could you take us through your creative process when starting a new piece?

How did you come to know about deviantART?
It was just a boring day in 2006 when I accidentally dropped into DeviantART and then never left =P
What Left Remains .. by BlackJack0919

:iconblackjack0919:

I'm use to visualize things just to remember them easier . The idea comes is rather random, Whenever my ideas come, I write it down as little notes or a simple drawing that will helps me remember them easier. And in the weekends, here is when things happened. I practice photography mostly by weekends. I list down things that needs to buy and prepare. Then I make the photos. It should take around 2, 3 hours top to finish a photography project.
During weekdays, if you have free time, go online and search for arts that relate to your ideas. That way, it can help you become more creative.
And in the weekends, here is when things happened. I list down things that needs to buy and prepare. Then I make the photos. It should take around 2, 3 hours top to finish a photography project. Even if you don't finish your work after 3 hours, you should stop anyway and try to re-doing them next week. By that time, I think that your mind will create something even better :XD: At least, that's what I used to and still doing :XD:

2. What is the greatest challenge you face when creating a conceptual photograph? And how do you overcome it?

What does your username signify?
BlackJack is the name of the very famous manga character created by Tezuka Osamu, my favorite artist of all time and 0919 is a number that have special meaning to my life or at least the most mysterious
Balance by BlackJack0919

:iconblackjack0919:

Well, my concepts are really simple, so there's not much of a challenge when creating them, there is only one picture that actually made my heart beat fast is :
My Immortal by BlackJack0919
I actually have to jump to the roof of a building to shoot. Well , how do I overcome it, just breathe deep and seek for every possible solutions then proceed ^^ We have to face our problems sooner and later, so why not the present!!

3. Tell us the story behind one of your favorite conceptual pieces from your gallery.

Inspirational artists?
The One, The Only: JeanFan, gilad, foureyes
Love Game by BlackJack0919

:iconblackjack0919:

Well, I always tell the story behind my pictures in the Artist's comment, and they sometimes too long to read =P If I can choose, I would love to choose:
The Touch Of Love by BlackJack0919
It's my favorite because I don't even know that I can write like that ;) =P

4. What is one Conceptual piece from dA that really speaks to you and why?

What's the equipment you use for your art?
Well, I used to use the compact Olympus SP700, DSLR-Like Canon SX10 IS and now, Nikon D70 with 18-55mm VR Nikkor and 50mm f/1.8D. I use the camera just like every other artists, and sometimes I believe, I even clumsier than other photographer when it comes to camera. I'm not that great with machines in general =P But I believe that any camera can take a picture just find, it's the idea behind the picture that counts.
Apple iPod by BlackJack0919

:iconblackjack0919:

Freedom by tyt2000
"Why something so simple could suddenly seemed so COMPLICATED???" was the question on deck !!! Then , Suddenly I realized , I've been dramatized my life all over in the past and now I just make it become more simple. At least that's what I tried to do, but even today , I still can't manage for things to stay simple. Not that I'm pretend to make it complicated , but life just throw things to me I guess =P But fortunately , all was not lost !!! Just because I can't be simple in real life doesn't mean my ARTs have to stay that way !!! ---> I stay TRUE with myself in ART !!! Yay :D

5. Finally, do you have any advice for the aspiring conceptual artists out there?

Besides Conceptual Photography, which genre of art do you admire most?
Well, Drawing of course. I used to create art through drawing but they just taken so much time so I stop drawing and turn to photography. But from time to time, drawing is a very powerful tool to help me memorise my ideas. A lot of my concept ideas are in "Drawing-format" :giggle: in that way I can remember them clearer and it help to see how the Reality different from virtual imaginations :giggle:
True Love ... by BlackJack0919

:iconblackjack0919:

Like I always say, never stops looking for inspiration, it's not something that you can take for granted, you have to seek for it, hunt it down and rip it open to see what it can give you. You can read ( again , read ;) ) everything I can say here :
Light Up Your Inspirations by BlackJack0919
And again, goodluck you guys and just don't stop believe in something you choose. Yearning to it , "rape" it until you get it :XD:

Thank you litecrush & Quolia for putting this interview together :heart:




All Media Contest


Theme: Nightmares & Phobias


Deadline: 29th Wednesday May 2013


Rules:


Express a nightmare or phobia in the most creative way possible
New deviation submitted to dA after May 5th 2013
You can enter upto 3 deviations as long as it fits the theme
Please include a small description in your Artists Comments about your concept
Media: All media from Photography, Literature, Digital to Traditional is accepted
How to Enter: Send me a note titled "Nightmare & Phobia Contest entry" and include the :thumb00000: of your deviation in the note and I'll collect it here

Prizes:


First Place

140 :points: by im-not-sana
Featured by im-not-sana omgitsacat Astrikos AJ333 phoenixleo

Second Place

100 :points: by im-not-sana
Featured by im-not-sana omgitsacat Astrikos AJ333 phoenixleo

Third Place

80 :points: by im-not-sana
Featured by im-not-sana omgitsacat Astrikos AJ333 phoenixleo
:note: This prize list will keep getting updated. If you would like to donate, please send me a note!

Good Luck! :la:







Which position do you usually sleep in?


I posted a poll asking this and here's the meaning behind your answers



The Foetus (41%)

Those who curl up in the foetus position are described as tough on the outside but sensitive at heart. They may be shy when they first meet somebody, but soon relax.

Log (15%)

Lying on your side with both arms down by your side. These sleepers are easy going, social people who like being part of the in-crowd, and who are trusting of strangers. However, they may be gullible.

The Yearner (13%)

People who sleep on their side with both arms out in front are said to have an open nature, but can be suspicious, cynical. They are slow to make up their minds, but once they have taken a decision, they are unlikely ever to change it.

Soldier (8%)

Lying on your back with both arms pinned to your sides. People who sleep in this position are generally quiet and reserved. They don't like a fuss, but set themselves and others high standards.

Freefall (7%)

Lying on your front with your hands around the pillow, and your head turned to one side. Often gregarious and brash people, but can be nervy and thin-skinned underneath, and don't like criticism, or extreme situations.

Starfish (5%)

Lying on your back with both arms up around the pillow. These sleepers make good friends because they are always ready to listen to others, and offer help when needed. They generally don't like to be the centre of attention.




Donor Feature


Enclosure by Arichy Halloweenie! by Arichy Daydreaming Lounge by Arichy Chef in Heaven by Arichy Murloc - collab with web5ter by Arichy dAmnMobile 2 by Pickley dA Messages by Pickley Stash - The Beautiful Sta.sh Client by Pickley :thumb355676430: :clockhang: by IceXDragon Emote Story Project: The Test... by IceXDragon ComposureI don't know.
I just don't know anymore.
Who I am,
What I want.
Where I've been,
What I've done.
What I was,
And what I'll become.
My mind is blurry,
Thoughts all muddled,
Mixed in a broth of pain and sorrow.
My apologies are sour,
Worthless little lies.
Even though I mean them,
They do nothing to satisfy.
They can't staunch the pain,
Nor the tears can they hide.
My body shakes with tension,
My jaw twitches in apprehension.
Soon I'll lose control,
Of the demons raging inside.
The murderous, ravenous beasts they are...
If my guard should fall,
I fear I may hurt them all,
All those who are kind to me.
Thus I cannot be,
The one that is truly me.
Cat's CradleShe looks at the world,
And sees only black and white.
Cries tears of blood,
But cannot die.
Porcelain skin,
Raven hair,
Eyes deep brown,
Lips of lightest pink,
Razored nails,
And hidden arms.
She hides her pain,
But fixes those in need.
She's not someone,
Or a normal one.
She's a special one,
A First one.
She always gets what she wants,
But not always when she needs it.
The silence kills her,
And in turn kills me.
She is my Kitten,
But also my Queen.
She doesn't believe me,
When I tell her my love.
She says she hates me,
I say I love her.
I'm stupid and weird,
And she likes it in me.
We're both off our rockers,
But better to be off with her,
Than to not be off with no-one.
She hurts ore than anyone I know,
And I hurt because I know.
She asks for help,
But I know not how too...
I fail her everyday,
Yet with me she stays.
She fixes me,
And asks for nothing in return,
Expects nothing.
I want to show her,
That she can rely upon me,
That she can rust me.
But how can I,
When I don't trust m


:note: If you'd like to be featured here, go ahead and donate some :points: in my donation pool! :heart: Even if it's as small as 1 :points: I'll feature one piece from your gallery. The more you donate, the more deviations I'll feature! You can tell me in a note which deviations of yours you'd like me to feature too :aww:



Conceptography Feature I

Mon Mar 25, 2013, 9:22 PM by im-not-sana:iconim-not-sana:


:iconim-not-sana:

Apparently, I still have a thing for Conceptual pieces :B and here's a few I've fallen in love with lately :heart:

The Black Sheep by decomposerdoll
A New Addition to the Family by decomposerdoll
Behind Your Damage by waterhealing
Raining Rocks and Pebbles by stalker777
Time Is Running Out by Amarelle07
Mind Control by sant2
Dimensional love by sant2
:bigthumb341338431:
Jack Frost . Edge of Submersion by phoenixleo

Please show these artists some love! :love:


IT'S ALIIIIVE! D:

Journal Entry: Thu Mar 21, 2013, 6:02 PM
Guess who's back from the dead to haunt you all? :dummy: I've missed you all so much! I'm surprised many of you still remembered me, watch me, left a comment and noted me :heart: Thanks ever so much! :happycry:
Well, personal life has gotten much better :) But the fact that my camera broke just put me off from coming back here...however, lately I've been doing some digital painting on my Galaxy Note and finally got the motivation to come back here! :la: I don't know if I'll ever be as active as I used to be, but I'll still try to promote some art every now and then... and speaking of which, please go show krisz486 some luff! :heart:

Spotlight by krisz486

Recreation With Adam by krisz486