Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
October 26, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
8,684 (1 today)
Favourites
175 (who?)
Comments
41
×

CSS Did You Know? - October 26th, 2012

Journal Entry: Fri Oct 26, 2012, 8:05 PM
:iconjonarific:
linear-gradient

Wondering what all this fuss about the addition of CSS gradients is about? Well, look no further, as the following article will try to provide you with an answer!

Before all the action starts, here's some general info though: The added CSS gradients (or, specifically speaking, CSS linear gradients) are an addition of CSS values, meaning that you can use them in properties you already knew before. In this case, those properties are background and background-image, so where you used to put colors or image URLs, you now have the possibility to insert gradients as well! How those gradients work in detail will be described in the following…


Basic (two-color) syntax


First off, CSS gradients are quite an extensive feature and offer many customization options. In 99% of the cases, you won't need all of those though, which is why I've created a basic explanation to get started. If you want to know everything, you'll find the advanced description below.

linear-gradient(<direction>, <start-color>, <end-color>);
  • <direction> — The direction the gradient originates from (it will then move towards the opposite direction). Use top, bottom, left or right.
  • <start-color> — The color the gradient starts with.
  • <end-color> — The color the gradient ends with.
Here's an example of the above syntax in action. We'll be creating a box with a gradient running from top to bottom with the colors yellow to red:

.simplebox
{
height: 200px;
width: 200px;
background: linear-gradient(top, #ffff00, #ff0000);
}




Advanced syntax


linear-gradient(<direction|angle>, <color> <percentage>, <color> <percentage>, [...], <color> <percentage>);
  • <direction|angle> — Pretty similar to the <direction> property in the simple version, except that you can also use specific angles such as 45deg, 10deg or -60deg.
  • <color> <percentage> — This pair of properties is a so-called stop, which describes a certain point and color within the gradient.
    • <color> — The color of the current stop.
    • <percentage> — The position of the current stop within the gradient in percent (%). If you leave percentages out (which you can), the colors will be evenly distributed across the gradient.
  • [...] — You can add as many stops to the gradient as you like.
Looks confusing? Here's another example to clear things up. This time, we'll be creating a box with a gradient starting at -45 degrees and containing multiple colors placed at 0%, 40%, 60%, 80% and 100%:

.advancedbox
{
height: 200px;
width: 200px;
background: linear-gradient(-45deg, #0000ff 0%, #00ffff 40%, #ff00ff 60%, #ffff00 80%, #ff0000 100%);
}




Hands-on examples


Although the above examples may have been helpful to understand the code's syntax, they're admittedly not very good examples of how CSS gradients can be used in real designs. I mean, there's no way someone will use such an extremely obtrusive red-yellow-pink-turquoise-blue box in a Journal skin. Therefore, here are two hands-on examples of how gradients can be effectively utilized to polish your designs.

Stylizing (text) boxes

We'll start with this box:

.plaintextbox
{
padding: 16px 20px;
background: #fdfdfd;
border: 1px solid rgba(0,0,0,0.5);
}


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia purus ac purus pharetra tempus. Nunc porttitor, nulla nec vehicula malesuada, diam est vestibulum mi, vitae egestas sem turpis vitae neque. Nunc nec lorem et nunc dapibus interdum. Nunc rhoncus neque posuere lorem pellentesque laoreet.

Pretty simple, right? Now let's use CSS gradients to make the whole thing look a little more interesting:

.gradtextbox
{
padding: 16px 20px;
background: linear-gradient(top, #dadada, #fdfdfd);
border: 1px solid rgba(0,0,0,0.5);
}


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia purus ac purus pharetra tempus. Nunc porttitor, nulla nec vehicula malesuada, diam est vestibulum mi, vitae egestas sem turpis vitae neque. Nunc nec lorem et nunc dapibus interdum. Nunc rhoncus neque posuere lorem pellentesque laoreet.

This is a great example of one of the main advantages CSS gradients offer. Theoretically, you could also implement that background gradient by using an image, but that image wouldn't stretch between the top and bottom of the element. So unless you exactly knew the height of it (which is highly unlikely as it can vary depending on browser, font and screen size), the image could easily be too short or be cut off at the bottom. CSS gradients, however, always stretch between the boundaries of an element, so you won't ever have that problem!

Anyway, let's add a few more minor properties like shadows and rounded corners to finish up our text box:

.fancytextbox
{
padding: 16px 20px;
background: linear-gradient(top, #dadada, #fdfdfd);
border: 1px solid rgba(0,0,0,0.5);
border-radius: 3px;
text-shadow: 0 1px rgba(255,255,255,0.7);
box-shadow: 0 1px rgba(255,255,255,0.5) inset, 0 1px 2px rgba(0,0,0,0.25);

}


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia purus ac purus pharetra tempus. Nunc porttitor, nulla nec vehicula malesuada, diam est vestibulum mi, vitae egestas sem turpis vitae neque. Nunc nec lorem et nunc dapibus interdum. Nunc rhoncus neque posuere lorem pellentesque laoreet.


Addding some "pop" to buttons

Once again, we'll start off with a really simple object, a plain button:

.plainbutton
{
display: inline-block;
padding: 8px 22px;
background: #4980f0;
color: #ffffff;
text-decoration: none;
border-radius: 2px;
}


I'm a button!

Guess what: it's gradient time!

.gradbutton
{
display: inline-block;
padding: 8px 22px;
background: linear-gradient(top, #6aa8ea, #437aeb);
color: #ffffff;
text-decoration: none;
border-radius: 2px;
}


I'm a button!

We'll give some finishing touches to this as well by adding borders and shadows:

.fancybutton
{
display: inline-block;
padding: 8px 22px;
background: linear-gradient(top, #6aa8ea, #437aeb);
color: #ffffff;
text-decoration: none;
border-radius: 2px;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 1px rgba(255,255,255,0.25) inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 2px rgba(0,0,0,0.15);
text-shadow: 0 1px rgba(0,0,0,0.25);

}


I'm a button!


Want to start of smaller? ColorZilla's Gradient Editor is a great way to practice and see how CSS gradients work. A big thank you to electricjonny for sharing.



Conclusion


I hope to have given you an insight on how the new CSS gradients work and that you'll be able to make use of them in your own designs. If you have any further questions, feel free to ask! If you'd like to know about some of the possibly a little obscure stuff I did in the third steps of the above examples, let me know and I'll consider writing another tutorial! :)



:iconujz:
How to: Styling

This is a tutorial on styling the basic properties of HTML such as the Headings, Bold text, Italic text, Links and some others. The basis of this tutorial is intended for beginners but to make it suitable and interesting for others I have taken things one step further to style each element with CSS in an advanced manner! So lets jump right into the CSS :pepsi:.

In each of the topics discussed below, I have first introduced the topic, then previewed an example and then showed the CSS code. I haven't shown the HTML code because its obvious. :peace: :)


Headings

You can use the following CSS properties to style each of the standard HTML headings: h1, h2, h3, h4, h5 and h6, I will show a CSS example with the h1 & h2 property and you can try your own styles for the other or simple use my same style for the others. Here you will see that I have combined about two CSS styles into one property: such as in the text-shadow, this simply allows me to have multiple text shadows.

H1 Preview
H2 Preview



h1{
color: #ff1bff;
font-size: 400%;
text-shadow: 0 1px 0 #b500b5, 0 2px 0 #ce00ce, 0 3px 0 #b500b5, 0 4px 0 #b500b5, 0 5px 0 #8546fa, 0 3px 5px #888;
letter-spacing: 5px;
}

or

h2{
color: #fff;
font-size: 400%;
text-shadow: 2px 0px 5px #b300b3, -2px 0px 5px #5900b3 ;
letter-spacing: 5px;
}


If you don't understand some of the CSS styles you can refer to the previous tutorial; where all these CSS styles have been explained.


Links


Styling links only require you to use the CSS property a, a:hover and a:active. So the code will go as follow and you can style it in any way you want. In this example I have styled it as a small box. :)




a {
color: #ce00ce;
padding: 2px;
background: linear-gradient(top, #fff, #e2e2e2);
border: 1px solid #888;
border-radius: 3px;
box-shadow: 0px 1px 0 #888, 1px 1px 0 #777, 1px 2px 0 #666;
}

a:hover {
color: #fff;
background: linear-gradient(top, #ff00ff, #5900b3 );
border: 1px solid #5900b3;
position:relative;
top:1px;
left:1px;
box-shadow: 0px 0px 0 #888, 0px 0px 0 #777, 0px 0px 0 #666;
}

a:active {
color: #cdac00;
background: #ffd700;
border: 1px solid #ffd700;
box-shadow: 1px 1px 0 #e6c200;
}


Bold text


This is styled by using the CSS property b. The standard CSS styling would apply if you don't make any changes to those CSS properties, for example the font-weight would automatically be set to "bold" if you state otherwise. The style I have used may not suit for bold text at all; the style I have done is just to show you another CSS style which can be achieved by multiple text-shadows.

Some bold text



b {
color: #fff;
text-shadow: 0px 0px 1px #4500ce, 0px 0px 2px #ff02ff, 0px 1px 0px #ffda1b, -1px 0px 0px red, 0px -1px 0px blue, 0px 0px 5px yellow, 0px 0px 5px #fff;
letter-spacing: 3px;
}


Italic Text


This is styled by using the CSS property i.


Some italic text



i {
color: #5900b3;
text-shadow: 1px 1px 0px #3e00b3;
}


Hope all beginners of CSS found this tutorial useful and the other CSS learners got something out of the new styling I have used which includes the newly allowed CSS3 gradients; which I will not take time to explain as it's already done on another tutorial. :) If you have any questions feel free to ask as comments here or send me ( UJz ) a note. :ahoy:

:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes linear-gradient usage and styling basic HTML properties.
Add a Comment:
 
:iconserafina-rose:
serafina-rose Featured By Owner Mar 27, 2013  Hobbyist Digital Artist
I'm always learning and very grateful for these tutorials. Thanks so much
:iconredsparklesplz::iconredroseplz::iconredsparklesplz:
Reply
:iconnishithv:
NishithV Featured By Owner Feb 4, 2013
Can a gradient be applied to the text color?
Reply
:iconbradleysays:
bradleysays Featured By Owner Feb 4, 2013
No, I don't think so. :)
Reply
:iconnishithv:
NishithV Featured By Owner Feb 2, 2013
Wow! Thank you so much for this tutorial, I Wasn't active on dA when you uploaded this, no wonder why I missed it. :)
Reply
:iconsingingflames:
SingingFlames Featured By Owner Nov 13, 2012  Hobbyist Writer
Thanks for this! :happybounce:
Reply
:icondediggefedde:
Dediggefedde Featured By Owner Oct 31, 2012
Nice!
One of the finest invenions in CSS3 in my opinion and nicely described!
However, linear-gradient is especially "new", even the former FF-version doesn't support it fully. All xp-users are using a former version of IE and in chrome it is also not supported since very long. IE doesn't support linear-gradiend at all in the current version by the way. The next version will support it, but will also only available to winVista and win7.

So, using linear gradient, I would strongly recommend to use background-color as an alternative display and to use the -moz, -webkit and -o-variants of linear gradient as they are supported since much longer.
For IE there is the filte method:

/* Für Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff);
zoom: 1;
/* Für Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff)";
}
Reply
:iconairukan:
Airukan Featured By Owner Oct 28, 2012  Student General Artist
I really should try to make my own css whenever I have free time :giggle: I've been always a dumb for coding and that :XD:
Reply
:iconletrainfalldown:
letrainfalldown Featured By Owner Oct 28, 2012  Student General Artist
Has dA added gradients to allowable CSS yet?
I really like doing gradients, especially on webkit scrollbars, and when I tried to add that to a journal a couple of weeks ago, it wasn't allowed.

If it hasn't been allowed yet, I'd love for it to be added. :)
Reply
:iconbradleysays:
bradleysays Featured By Owner Oct 28, 2012
Yes, but they've only made linear-gradients available. :)
Reply
:icontifa22:
Tifa22 Featured By Owner Oct 28, 2012  Hobbyist Digital Artist
Awesome, thanks again! :w00t:
Reply
Add a Comment: