CSS is a basic part of any webpage, and is what gives the page its distinctive look. CSS can be simple yet complicated at the same time, from a simple typography rule to a complex animation. It can be used to create amazing things. Today, we'll share some CSS styles which you might useful, and may use on your website to spice things up a bit.
1. Blurry text
Blurry text has a certain appeal, and is often used to direct attention towards a specific piece of text. Not to mention it looks cool :) Here's the CSS for making some text blurry. The trick is to fist make the text transparent, then add a drop shadow like so;
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
Here's a sample text that is really blurry.
2. Animated gradient
Sounds cool, right? Well it is. Strictly speaking, you cannot animate a gradient color unlike some of the other CSS properties. You can, however, move the background around to make it look like it's animated.
button {
background-image: linear-gradient(#518712, #124555);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
3. Image Grayscale
Grayscale tones up an image and makes it look classy and cool. You can apply an SVG filter to an image to turn it into grayscale.
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
4. Customizing link types
You can use CSS to customize how different types of links appear based on their file formats. You can set http:// links to appear a certain way, and mailto: and .pdf files to appear another. Here's the CSS;
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* PDFs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
5. Vertical alignment
Vertically aligning something can be a real pain. There's no simple property you can apply to everything. Here is, however, a CSS3 transform style which you can use to vertically align anything.
.verticalcenter {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Got any more cool CSS tricks you want to share with us? Let us know in the comments section below! Cheers :)
