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 :)
Jquery and CSS3 has enabled front end developers and even designers to create amazing effects but unless you check the compatibility of the code, never play with such plugins and tools because there are still people who don't use JavaScript in their browsers and your blog will look no less than a mess to them. This effects both your readership and blog pageviews. We are observing a growing trend of Jquery implementation on both Blogger and Wordpress blogs. A Famous known plugin is 
Jquery is indeed the most compressed and efficient library of JavaScript introduced so far that has made a web developer's job more easy. Its built in functions of show(), hide(), AJAX() and my beloved scrollTop() are indeed the most used functions that gives a new life to user interface (UI). 
LinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger to 
The 
Previous will display newer posts
Next will display Older posts
More will display on homepage alone. 
This is part 2 of our series "XHTML to HTML" . We have already learned how to turn blogspot's layout into blank HTML page but we have no yet shared how to remove the dynamic XML tags alone leaving behind the stylesheet, scripts and html design. In today's tutorial I will try to share the basic way of understanding a websites core structure by identifying the important div sections that make up the structure. I hope you have followed part one of the series and have downloaded your blogspot template. I also assume you have Dreamweaver or 
Google Custom Search Engine is another option that Adsense provides to increase your blog revenue. I shared detailed posts on how to create a custom search engine and integrate adsense in it. However the problem with the customization and editing options that Google provides lacks complete control over the margining and padding of the search box. Today we will learn on how to change the look of the search box using our own custom styles and change the size and alignment of the box elements. It is perfectly alright to edit the stylesheet (i.e. CSS Code) of the search engine because it is just a design change and therefore it does not violate any of Adsense terms of service. So lets get going!
