Shop Forum More Submit  Join Login
×

Tagged Collections

×
×
Star Citizen - Roberts Space Industries Ship UI by z-design Star Citizen - Roberts Space Industries Ship UI :iconz-design:z-design 317 38 GUI - WordPress Theme by detrans GUI - WordPress Theme :icondetrans:detrans 793 141 PORTFOLIO 2013 - WEB DESIGN by JonasIngebretsen PORTFOLIO 2013 - WEB DESIGN :iconjonasingebretsen:JonasIngebretsen 310 30 LinenPress - WordPress Theme by detrans LinenPress - WordPress Theme :icondetrans:detrans 490 162
Journal
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 comp
:iconim-not-sana:im-not-sana
:iconim-not-sana:im-not-sana 117 58
Literature
CSS Tricks: Before and After!
No, this is not about a tv show in which I take a CSS and make it prettier ;)
It is about the pseudo-elements ::before and ::after.
They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.
::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.
Let's get right going!
So in the first simple example we are going to add guillemets, also known as French quotation marks, to direct speech in our text. The usefulness of this may stand to debate, you could easily just type it out, but it is a nice and easy way to get started with explaining ::before and ::after.
We will take advantage of the i HTML class fo
:iconpica-ae:pica-ae
:iconpica-ae:pica-ae 103 45
PH - Landing Page by detrans PH - Landing Page :icondetrans:detrans 359 85 Warrior - WordPress Theme by detrans Warrior - WordPress Theme :icondetrans:detrans 342 94 Dannydiablo Black Edition by dannyknaack Dannydiablo Black Edition :icondannyknaack:dannyknaack 113 29 Teal and Orange - Web Layout by detrans Teal and Orange - Web Layout :icondetrans:detrans 343 63
Journal
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 :devdevbug:
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
:iconim-not-sana:im-not-sana
:iconim-not-sana:im-not-sana 107 23
econ - icon font by spiceofdesign econ - icon font :iconspiceofdesign:spiceofdesign 117 26 Lamborghini Aventador - Web Layout by detrans Lamborghini Aventador - Web Layout :icondetrans:detrans 89 12 Lucido for Growl by OrionTwentyone Lucido for Growl :iconoriontwentyone:OrionTwentyone 97 43 myFolio - Parallax Onepage HTML5 Template by DaJyDesigns myFolio - Parallax Onepage HTML5 Template :icondajydesigns:DaJyDesigns 150 8 Reperio Journal Skin (With Premium CSS3 features) by CypherVisor Reperio Journal Skin (With Premium CSS3 features) :iconcyphervisor:CypherVisor 157 63 Web Portal Design by prkdeviant Web Portal Design :iconprkdeviant:prkdeviant 67 1 HTML5 Quick Reference Guide by purgeru HTML5 Quick Reference Guide :iconpurgeru:purgeru 160 21 Incorn - Portfolio HTML Template by ZERGEV Incorn - Portfolio HTML Template :iconzergev:ZERGEV 127 16 SimpleFlex - Flat Template by sandracz SimpleFlex - Flat Template :iconsandracz:sandracz 167 11 Whisper - Creative Corporate Theme by pixel-industry Whisper - Creative Corporate Theme :iconpixel-industry:pixel-industry 54 2 TrustMe - Responsive Wordpress Blog Theme by ZERGEV TrustMe - Responsive Wordpress Blog Theme :iconzergev:ZERGEV 58 8 NewsTrick - Responsive WordPress Magazine / Blog by ZERGEV NewsTrick - Responsive WordPress Magazine / Blog :iconzergev:ZERGEV 77 15