Use shorthand CSS notation
Category: CSS Tips | 1,629 views | Add a Comment |
- Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:
#000 is the same as #000000, #369 is the same as #336699 - Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.”
- a:link { color: blue; }
- a:visited { color: purple; }
- a:hover { color: purple; }
- a:active { color: red; } Read more…
CSS Customized Underlines
Category: CSS, CSS Tips | 872 views | Add a Comment |
CSS Customized Underlines apply a border to the bottom of the link, which gives you control over the color of the underline (whereas text-decoration will only apply an underline in the same color as the text of the link itself) and also the pattern of the border:
a {
text-decoration: none;
border-bottom: 2px dotted #0c0;
}
Another way to apply more interesting underlines to links is to use small background images aligned to the bottom of the link that repeat horizontally: Read more…
css Images opacity
Category: CSS Tips | 953 views | Add a Comment |
You Can Make Images Transparent Too
Set the opacity on the image itself and it will fade into the background. This is really useful for background images.
<img src=”http:///csshook.com/images/one.png” alt=”Shasta” style=”opacity:0.5;filter: alpha(opacity=50) ;” />
And if you add in an anchor tag you can create hover effects just by changing the opacity of the image.
#imghover a:hover img { filter: alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: .5;opacity:0.5; }
Affects this HTML:
<div id=”imghover”>
<a href=”#”><img src=”http:///csshook.com/images/one.png” alt=”next” style=”width:24px;height:24px;border:none;” /></a>
</div>