With the advancement of tablet and computer technologies these years, digital painting industry has entered its brightest era where every bit of the artist’s idea is possible to be constructed in such a way that it can be improved or modified later, therefore saving up a lot of time and assets that could be dedicated to the better art. In short, digital painting is becoming more advanced, and epic as well.

(Image Source: ImagineFX)

But every journey of seeking epicness comes with the bloods and mastery. With the aim to heighten your digital painting skills in order to achieve more freedom and epicness to your art, today we highlight 26 extremely advanced digital painting tutorials for you to actually learn the advanced ways of creating mind blowing digital artworks, and it’s up to you to absorb these essences into your artistic veins and muscles!

So don’t let the chance created by the professional artists once again slips through your eyes, kick-start some tutorials and bring the renaissance to your artworks today!

Meanwhile, if you prefer to have more inspiration than tutorials, we offer a multitude of posts to enlighten your brain cells!

• 36 Sci-Fi Artworks
• 86 Transformers Artworks
• 43 Photorealistic Paintings
• 35 “End Of The World” Artworks
• 100 “Cities Of The Future” Artworks

And more!

Spanish Girl

The Spanish Girl is a “making-of” tutorial that features the conceptualizing process, brushes and texture selection process, and few detailed explanation on certain art tricks. A great tutorial for you to observe the tricks and thoughts from the professional artist, David Munoz Velazquez.

Lida

Learn to cultivate a detailed art with Chinese feeling with the implementation of digital painting software, and Chinese culture as well.

Painting Perfect Skin

It’s a truth that painting skin is one of the hardest tasks possible to the photorealistic painter, but this tutorial by ImagineFX will aid you to seek the art of achieving perfect skin through painting.

Pandora

Pandora is mythical, but the methods of achieving this artwork are more mythical. Fortunately, this is actually a tutorial that guides you to create this masterpiece.

My World

Forging something that didn’t exist in this world is challenging, and Kuang Hong will bring you through his process of inventing his “My World”.

Kids Love Dentist

Everyone loves dentist, eh? I’m not too sure about that, but I’m sure every artist will love to actually learn something from this expressive masterpiece.

Broken Link

The tutorial is nothing but an awe-inspiring guide that explains to you the thoughts and methods for spawning epic looking monsters in a fantasy environment.

A Heroic Male

My favorite part of this tutorial is probably its deep content, such as “The tricky part is all that ‘in between’ stuff. Trying to capture the correct mood is important, as is making sure the concept comes through the final piece”. A tutorial with wisdomful explanation that you just can’t miss.

Call of Cthulhu

Inspired by the short story Call of Cthulhu, Giorgio Grecu will lay out his thoughts on bringing his imagination of the story scene into reality. A must-learn for every artist who wishes to create a heart-pounding scene!

Challenger

Now a tutorial that artistically challenges you to paint an epic dragon, you should accept the challenge since it provides you tips, and it’s totally worth it!

New Worlds

Besides the painting tutorial, this workshop is also going to be the one that Leong Wan Kok shares some of the techniques that he has picked up in 12 years working as a professional artist, with more focus on texture and color, so don’t miss this precious one!

Night Rider

A simply awesome artworks done by Tervola! Best of all is he’s kind enough to give us a walkthrough of the artwork’s creation process.

Poseidon’s Wrath

Done with an interesting short story, Poseidon’s Wrath will show you the power of the sea with its immense beauty, and the essential tricks to achieve it.

The Abstract Dragon

Dragon is a favorite subject of fantasy-styled digital painting, but creating a fresh and abstract one is always hard. With this tutorial Illustrator JS Rossbach will “show you how a popular fantasy theme can be viewed in an abstract way”.

Wrath of Medusa

“In this workshop, I’ll be designing my own take on the classical look of Medusa, with homage to the familiar past, but also an eye for contemporary pop culture and a new, fresh edge sprinkled in.”

Xing Tain

Get ready to create your own version of the epic Xing Tain, the brave mythical creature that fights against enemy even his head is cut.

Mech Dragon Battle

Dragon Battle! An epic scene that you should learn to paint since it is needed in most epic fantasy games, and this tutorial is very special: it starts with an emulated splatter graphic!

Death Blow

Watch as the artist, Alon Chou demonstrates his skills to create a classic and dramatic Transformers scene filled with intense tension!

Unicron

Discover this ultimately detailed tutorial on forging ultimately powerful Unicron with the use of 2D and 3D production tools, and you will be one step closer to creating your own terrific boss character!

King Kittan The Great

This masterpiece is not done in an easy way, but Teoh Wei Liat will uncover the how and why of doing it.

The Two Mighty Kings

Two Mighty Kings is produced with the aggressive use of 3D tools, which also makes this tutorial an insightful article that discusses mainly the modelling, and application of shaders.

Macross

A short yet thoughtful article that walks you through the process of creating this very cool looking take-off scene.

The Day We Left Earth

Get to illustrate this classic sci-fi scene with expressive feeling with the tutorial by Grzegorz Rutkowski. An awesome entry for exploring the standard sci-fi art.

Aeternus Quiescere

It’s called Matte Painting, and Der-Reiko will explain to you the essential techniques and composition to create this grand scene.

Futuristic City

Often Matte Painting is required for the game environment concept art, especially the futuristic game. But you don’t create it from scratch, and this inspiring tutorial will get you know the secrets behind the magic!

Post-Apocalyptic Matte Painting

Extremely detailed tutorial on using the real-life image and turn them into post-apocalyptic painting.

Reflection

In the end, one simply has to fail again and again in order to achieve the mastery that unlocks more freedom and possibilities to his art. But thanks to these aspiring artists, they make the way to mastery less bloody and essentially easier. Embrace their tutorials, and next time you might be one who creates these solid tutorials!

I hope you’ve found your future artistic direction in these tutorials, but if you’ve found it in tutorials that are not included in this compilation, be sure to let us know! Thank you!

Related posts:

1. Showcase of Dazzling Light Painting Artworks
2. How to Create a Painting Effect – Photoshop Tutorial
3. Film Noir: 30 Dark And Cold Digital Artworks
4. Case Study: Futurism & New Age Digital Artwork

Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document is redundant or not possible, there is actually a feature in CSS that allows us to add extra markup without disrupting the actual document, namely the pseudo-elements.

You have heard of this term, especially when you have been following some of our tutorials.

There are actually a few CSS family members that are classified as pseudo-elements such as the :first-line, :first-letter, ::selection, :before and :after. But, for this article, we will limit our coverage to only the :before and :after, “pseudo-elements” here will specifically refer to both of them. We will look into this particular subject from basics.

The Syntax and Browser Support

The pseudo-elements have actually been around since CSS1, but the :before and :after that we are discussing here were released in CSS2.1. At the beginning, the pseudo-elements use single-colon for the syntax, then as the web evolved, in CSS3 the pseudo-elements were revised to use double-colon – becoming ::before & ::after – to distinguish it with pseudo-classes (i.e. :hover, :active, and so on).

However, whether you use the single-colon or the double-colon format, the browsers will still recognize either. And since Internet Explorer 8 only supports the single-colon format it is safer to use the single-colon if you want wider browser compatibility.

What does it do?

In short, the pseudo-elements will insert an extra element before or after the content’s element, so when we add them both, they are technically equal, with the following markup.

  <p>  <span>:before</span>  	This the main content.  <span>:after</span>  </p>  

But those elements are not actually generated on the document. They are still visible on the surface but you will not find them on the document source, so practically speaking they are fake elements.

Using pseudo-elements

Using pseudo-elements is relatively easy; the following syntax selector:before will add an element before the content’s selector while this syntax selector:after will add after it, and to add a content inside them we can use the content property.

For example, the snippet below will add a quotation mark before and after the blockquote.

  blockquote:before {  	content: open-quote;  }  blockquote:after {  	content: close-quote;  }  

Styling pseudo-elements

Despite being a fake element, the pseudo-elements actually act like a “real” element; we are able to add any styles declaration upon them, such as changing the color, adding background, adjusting the font size, aligning the text inside it and so forth.

  blockquote:before {  	content: open-quote;  	font-size: 24pt;  	text-align: center;  	line-height: 42px;  	color: #fff;  	background: #ddd;  	float: left;  	position: relative;  	top: 30px;    }  blockquote:after {  	content: close-quote;  	font-size: 24pt;  	text-align: center;  	line-height: 42px;  	color: #fff;  	background: #ddd;  	float: right;  	position: relative;  	bottom: 40px;  }  

Specifying the dimension

The generated elements are by default an inline-level element, so when we are about to specify the height and the width, we have to first define it as a block element using the display: block declaration.

  blockquote:before {  	content: open-quote;  	font-size: 24pt;  	text-align: center;  	line-height: 42px;  	color: #fff;  	background: #ddd;  	float: left;  	position: relative;  	top: 30px;  	border-radius: 25px;    	/** define it as a block element **/  	display: block;  	height: 25px;  	width: 25px;  }  blockquote:after {  	content: close-quote;  	font-size: 24pt;  	text-align: center;  	line-height: 42px;  	color: #fff;  	background: #ddd;  	float: right;  	position: relative;  	bottom: 40px;  	border-radius: 25px;    	/** define it as a block element **/  	display: block;  	height: 25px;  	width: 25px;  }  

Attach background image

We can also replace the content with an image rather than only plain text. Although the content property provides a url() string to insert an image, but in most cases I much prefer using the background property for more control over the image attached.

  blockquote:before {  	content: " ";  	font-size: 24pt;  	text-align: center;  	line-height: 42px;  	color: #fff;  	float: left;  	position: relative;  	top: 30px;  	border-radius: 25px;    	background: url(images/quotationmark.png) -3px -3px #ddd;    	display: block;  	height: 25px;  	width: 25px;  }  blockquote:after {  	content: " ";  	font-size: 24pt;  	text-align: center;  	line-height: 42px;  	color: #fff;  	float: right;  	position: relative;  	bottom: 40px;  	border-radius: 25px;    	background: url(images/quotationmark.png) -1px -32px #ddd;    	display: block;  	height: 25px;  	width: 25px;  }  

However, as you can see from the snippet above, we are still declaring the content property and this time with an empty string. The content property is a requirement and should always be applied; otherwise the pseudo-element will not work whatsoever.

Combining with pseudo-classes

Although they are a different kind of pseudo, we can use the pseudo-classes along with pseudo-elements together in one CSS rule, for instance, if we want to turn the quotation mark background a bit darker when we hover over the blockquote.

  blockquote:hover:after, blockquote:hover:before {  	background-color: #555;  }  

Adding Transition Effect

And we can even apply the transition property upon them to create a graceful color transition effect.

  transition: all 350ms;  -o-transition: all 350ms;  -moz-transition: all 350ms;  -webkit-transition: all 350ms;  

Unfortunately though, the transition effect seems to only work in the latest version of Firefox. Hopefully more browsers will catch up to allow the transition property to be applied in pseudo-elements in the future.

• Demo
• Download Source

More Inspiration

To inspire you, we have selected three cool examples that can give you ideas for your web design.

Fascinating Shadows

In this tutorial Paul Underwood explained how to create a more realistic and fascinating shadow effect using :before and :after pseudo-elements. Both of them are positioned absolutely and placed at the very rear with negative z-index value.

3D Button

This is a very clever implementation of pseudo-elements combined with css3 box-shadow to draw a stunning beveled 3D button only with CSS and a single anchor tag. The :before pseudo-element is used to add number “1″ at the left side of the button.

Stacked Image Effect

Using the pseudo-elements for creating a messy stacked image effect only with a single image on the markup is also possible. The pseudo-elements is used to create an illusion of the stacked images at the rear of the actual image using negative z-index.

Conclusion

Pseudo-elements is simply “cool” and ultimately usable, basically we have two bonus elements for every element we add without interfering with the actual HTML structure at all, and then turning them to almost everything we can ever imagine.

There are actually some improvement for pseudo-elements that is currently being worked on, such as nesting pseudo-elements div::before::before { content: ''; } and multiple pseudo-elements div::before(3) { content: ''; } which obviously will open much more possibilities in web design practice in the future. While they are being implemented in current browsers, let’s wait patiently for now.

Related posts:

1. Creating A Stacked-paper Effect Login Form
2. Reviewing CSS Style Priority Level
3. Creating a Volume Controller with jQuery UI Slider
4. HTML5 Tutorial: How to Build a Single Product Page

Typing on iOS device is an almost flawless experience – until the autocorrect function spoils everything, sometimes making a joke out of something when it wasn’t your intention in the first place.

Speed typing in iOS is almost impossible when you need to type words that are not in the dictionary used on the iOS, and often times an autocorrect popup will appear suddenly, interrupting the delivery of your message.

In this article, you will find a short and simple trick on how to avoid annoying autocorrects on your iOS devices.

Recommended Reading: iOS 5: 10 More Things You May Not Know

Avoid Autocorrect on IOS

1. Type a word that is not found in the dictionary, to make the autocorrect appear. In this example, we use the word ‘maggi‘.

   

2. Don’t hit space just yet, but continue typing an extra letter at the end of the word.

   

3. Now delete that extra letter, and notice that the autocorrect has disappeared.

   

4. Hit space and continue completing your sentence.

   

That’s it! It takes some getting used to but after awhile, it will come naturally to you. Type faster than before without being annoyed by silly autocorrect popups ever again!

Related posts:

1. How to Reveal iPad’s Hidden Keyboard Buttons [Quicktip]
2. How to Transfer iOS Screenshots To Your Mac Easily [Quicktip]
3. How to Fix Home Button Delays on iOS Devices [Quicktip]
4. How to View Website Source Codes on iPad / iPhone [Quicktip]