Create a Box
his makes sense, as most icons also serve to be links.
Let’s set the somewhat arbitrary dimensions for our icon. We’ll do 40x56px – simply for this demo. In a real world application, you’ll likely want to reduce this! Also, keep in mind that we need to add display: block, since all anchor tags are inline, by default.
Note that, above, we’re setting a positioning context in order to work with pseudo elements shortly. You’ll find that I’ve only used the official CSS3 syntax for the gradient. You’ll likely want to use the various browser prefixes as well. Simply copy the code snippet above, paste it into Prefixr’s textarea, and click enter. It’ll then spit out all of the various prefixized properties, like so:
Next, let’s add some shine using CSS box shadows. I’ve also used the text-indent property to hide the text.
like as...
Rounded Corners
By passing four values, we can specify the top, right, bottom, and left radii, accordingly. This is similar to the way you would apply margins or padding.
like as...
One Curled Corner
First, add content :before our icon. In this case, we don’t require any specific text. Instead, we need to create a 15px box, and apply a background gradient.
n order for our generated content to also receive the top-right rounded edge, we must, again, apply the same radii to align it.
like as...
Adding Lines
Next, we’re going to use the :after psuedo element to add some dashed lines to represent zoomed out text. Apply a width of 60%, and a margin-left and margin-right of 20% (which equals 100%). Next, we specify a height and position it at 0 0.
Creating a set of lines is a bit tricky. If we’re clever, though, we can use CSS gradients to achieve this effect. First, divide the total height by five, and set each block with a solid fill. Refer to the image below for a clearer exemplification of this thinking. Nifty, ay? It’s a nice technique to have in your toolbelt.
Multiple Lines (Stripes) with CSS3 Gradienst
and final...
his makes sense, as most icons also serve to be links.
Let’s set the somewhat arbitrary dimensions for our icon. We’ll do 40x56px – simply for this demo. In a real world application, you’ll likely want to reduce this! Also, keep in mind that we need to add display: block, since all anchor tags are inline, by default.
Note that, above, we’re setting a positioning context in order to work with pseudo elements shortly. You’ll find that I’ve only used the official CSS3 syntax for the gradient. You’ll likely want to use the various browser prefixes as well. Simply copy the code snippet above, paste it into Prefixr’s textarea, and click enter. It’ll then spit out all of the various prefixized properties, like so:
Next, let’s add some shine using CSS box shadows. I’ve also used the text-indent property to hide the text.
like as...
Rounded Corners
By passing four values, we can specify the top, right, bottom, and left radii, accordingly. This is similar to the way you would apply margins or padding.
like as...
One Curled Corner
First, add content :before our icon. In this case, we don’t require any specific text. Instead, we need to create a 15px box, and apply a background gradient.
n order for our generated content to also receive the top-right rounded edge, we must, again, apply the same radii to align it.
like as...
Adding Lines
Next, we’re going to use the :after psuedo element to add some dashed lines to represent zoomed out text. Apply a width of 60%, and a margin-left and margin-right of 20% (which equals 100%). Next, we specify a height and position it at 0 0.
Creating a set of lines is a bit tricky. If we’re clever, though, we can use CSS gradients to achieve this effect. First, divide the total height by five, and set each block with a solid fill. Refer to the image below for a clearer exemplification of this thinking. Nifty, ay? It’s a nice technique to have in your toolbelt.
Multiple Lines (Stripes) with CSS3 Gradienst
and final...
No comments:
Post a Comment