Its pretty easy to make some blurry text with CSS. We can do it by just making the text color transparent and adding some text shadow. Here’s the code for the same:
Blurry Text with CSS
To do it on the normal text we can create a class and use SPAN tag to make the text blurry.
Tabbed content is a great way to handle a lot of information on a page without loosing usability and it provides a great user experience as well. Here’s a real easy way to create tabbed content with jQuery and CSS.
I’ve used the latest version of the Google-hosted jQuery library, however, you can always download the script and host it on your server.
Step 2: Write some HTML code
<div >
<ul >
<li data-tab="tab-1">Tab One</li>
<li data-tab="tab-2">Tab Two</li>
<li data-tab="tab-3">Tab Three</li>
<li data-tab="tab-4">Tab Four</li>
</ul>
<div id="tab-1" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" >
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" >
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" >
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div><!-- container -->
In the above code I’ve created an unordered list which will act as tabs and I’ve used a custom attribute named data-tab and set its value to tab-1, tab-2 and so forth. We will use the data-tab attribute in our jQuery script to toggle the “current” class to hide and display our tabs.
Below the unordered list, there are a few DIV elements with ID attribute same as the data-tab attribute we used in the unordered list. This will do all the magic. Before adding the magic script, lets write some CSS to stylise our HTML Unordered list and content panels.
I’ve added “current” class to the first elements and we will play with the current class to stylise the active tabs and toggle the data content div element.
I’ve used display:none for the .tab-content and display:inherit for the “current” tab. This will hide all DIV elements and show the tab with current class only. We will play with the current class to get our tabbed content work with a small magical jQuery code.
You can always change the CSS to have the look and feel similar to your website, use some image backgrounds to make it nice and smooth.
Step 4: Write the magic jQuery code
Now here’s the magic jQuery code which will actually create the tabbed content work.
When the DOM is ready, if a user clicks on any list element of ul.tabs it will grab the data-tab attribute and assign the same to tab_id variable. Then, we will remove the current class from all list elements and our DIV.tab-content elements with the jQuery removeClass attribute. Then we will add the “current” class to the clicked list element and DIV tab with the grabbed data-tab ID.
That’s it, now we have working tabbed content with jQuery and CSS. Try it, share it and let me know of your thoughts in the comments. If you need to add any additional functionality, feel free to ask in the comments.
In this tutorial, I’ll create a CSS Accordion without using any jQuery or Javascript. As I mentioned in my previous post “An easy way to create Tabbed Content with jQuery & CSS” displaying a lot of information on one page is a bit difficult and we can use tabbed content or accordions to achieve the same without compromising on user experience.
We can always use jQuery to include nice effects on our css accordion. However, we are going to create a pure css accordion that will work on any browser, with or without javascript enabled.
Lets start with writing some HTML Code. We will use UL (unordered list) element to create our pure css accordion.
HTML Code for pure CSS Accordion:
<ul id="accordion">
<li>
<h2>Title One</h2>
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</li>
<li>
<h2>Title Two</h2>
<div >
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</div>
</li>
<li>
<h2>Title Three</h2>
<div >
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
</li>
<li>
<h2>Title Four</h2>
<div >
Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
As you can see, I have a UL element and added a class named “accordion”. Within the LI element, I have H2 and a DIV tag with class “content”. And we will play with the CSS display attribute to create our pure css accordion.
Lets write some CSS code to stylise the same and hide our DIV.content within the LI tags.
As you can see in above code, we have used display: none for the div.content and on li:hover we have used display:inherit . The div.content is within the list element so this trick would work. If our div.content would have been outside this panel, we would have used jQuery to achieve the same.
Very soon, I’ll explain to achieve the same with jQuery and will use some nice animation as well.
Today we will play with jQuery CSS class methods such as addClass, removeClass, hasClass, and toggleClass and learn some basic implementation to modify the HTML styles on the fly.
jQuery CSS Class Methods:
Let’s understand this is a small piece of code. First things first, You must include the jQuery library in the <head>…</head> tag.
Now our page has the jQuery library so let’s add some HTML and CSS to play with the jQuery CSS Class methods.
HTML Code:
<div id="elem">
This is a content panel
</div>
<p>
<a href="#" >addClass</a> /
<a href="#" >removeClass</a> /
<a href="#" >toggleClass</a> /
<a href="#" >hasClass</a>
</p>
Here we have a DIV tag with ID set to element and we will use this ID to play with jQuery CSS class methods. Below that, we have a paragraph element and four links with different class names. Let’s write some CSS code and I will explain the functionality of each link when we add jQuery code.
In the CSS styles, I’ve added some styles to our DIV#elem element and also created a class named hover which will change the background, color, and border of the DIV#elem.
Now let’s add some jQuery code and learn how these jQuery CSS methods work.
$(document).ready(function(){
// Add the class
$('a.add-class').click(function(){
$("#elem").addClass('hover');
$("#elem").html('Class added ".hover"');
return false;
});
// Remove the class
$('a.remove-class').click(function(){
$("#elem").removeClass('hover');
$("#elem").html('Class removed ".hover"');
return false;
});
// Toggle the class and check if the class has been already added or not
$('a.toggle-class').click(function(){
$("#elem").toggleClass('hover');
if($("#elem").hasClass('hover')){
$("#elem").html('Class added ".hover"');
}else{
$("#elem").html('Class removed ".hover"');
}
return false;
});
// Checks if the class has been already added or not
$('a.has-class').click(function(){
if($("#elem").hasClass('hover')){
$("#elem").html('Class found ".hover"');
}else{
$("#elem").html('Class not found ".hover"');
}
return false;
});
});
In the JQuery code, I’ve used the click trigger for all four links we added in the HTML code above. Also, I’ve used return false; so when we click on the link it should not redirect the user to any page or use # in the current page URL. Also, I’ve added another line of code to modify the HTML of the #elem element when we click on these links. Don’t get confused with the .html() method, this is not required, I just added it to explain the functionality.
The first link with class .add-class will add the .hover class to the #elem element. If you want to add multiple classes with one trigger you can specify different class names separated with a space as we normally do in normal HTML code. Once we click on this link, .hover class will be added to the #elem HTML element and the inner HTML will be changed and show us the result. You can click on the address link above and see it in action.
The second link with class .remove-class will remove the .hover class from the #elem element. If the element doesn’t have a .hover class, it won’t do anything so the remove class will be used only to remove any applied class.
The third link with class .toggleClass will toggle the .hove class on #elem element. If the element does not have a .hover class it will add the same otherwise vice versa. In this code, I’ve used the jQuery CSS method hasClass to check if the element has the .hover class or not. and the content of the #elem element is changed accordingly.
The fourth link will only check if the class .hover is applied to the #elem element or not and change the HTML code of the #elem element accordingly.
I hope this will clarify any doubts on using these methods, in case you have any questions or suggestions, please use the comments below to start a conversation on this topic.
Links, Links, Links!! That’s what we have all over the internet. On our website and blog posts, we have a lot of links to point a user to another page. Today I will share a small trick to stylize the links with CSS3 Animation. That’s what I’ve used on this website and you can apply the same as well to change the link color with style on hover.
CSS3 Animation
With CSS3 animation, we can add some effects when changing from one style to another without using any flash or javascript. We will use CSS animation transition to add some cool effects to the anchor tags.
How it works
CSS3 transition effects let an element gradually change from one style to another. To do this we must specify two things:
Specify the CSS property we want to add an effect too. Specify the duration of the effect. Optionally we can specify “transition-timing-function” which is set to “ease” by default however, we can use any of these.
Try this code on a blank HTML page and add the CSS either within ... tags or in your stylesheet. Play around a bit with the CSS to understand the CSS3 Animation transition and create some cool effects for your website links and other block-level elements. Feel free to discuss this further in the comments. You can also contact IOGOOS Solution to build Website Animation Services.
Typography is the key element in the design process. While designing a web page, business card, brochure or newspaper advertisement fonts and text style plays an important role to get user attention. To design stunning elements we need fonts and fortunately, the big daddy provides a lot of them for free. We can use Google Web Fonts in our designs and they are pretty awesome and very easy to use.
How to use Google Web Fonts on a web page
It’s pretty easy to use Google Web Fonts on your website. You can do that in just three simple steps:
Choose single or multiple Google Web Font(s) from Google fonts website: //www.google.com/fonts and add them in your collection.
Hit the use link above the list of your selected fonts and Google will show you different methods to include these fonts on your website. Standard, @import or Javascript
I always use Standard method with a small trick to load the fonts before displaying the web page.
Here’s the code you would need to use Google Web Fonts on your website.
I’ve added Open Sans and Lobster fonts to my collection for this example.
<head>
<link href='//fonts.googleapis.com/css?family=Lobster|Open+Sans' rel='stylesheet' type='text/css'>
<!-- This will prefetch content from google web fonts website -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
</head>
The above code goes within the [htmltag tag=”code”]<head>…</head>[/htmltag] tags and the DNS-prefetch link tag will fetch the contents from Google Web Fonts website. This will help resolve issues like font changes after the page load.
In the above CSS code, I’ve defined the body font as open sans and headings font as lobster. Similarly, you can use different fonts for different elements.
How to Use Google Web Fonts while Designing?
As a designer, we all need to design the mockups of the creative work before we can publish the same. If we need to use Google Web Fonts while designing layouts in Photoshop or Illustrator we will have to download the font and install the same in our Operating System.
Using Google Web Font Download Link
We can always click the Download link to save the fonts on our hard drive and then install the font on our operating system. However, what will happen if that font is updated and new characters are added or there’s a new and improved version available for that font. We need to keep a check and if the new version is available, we need to uninstall the previous version and then install the new version.
What is there’s some tool which can automatically do this task and save us a lot of time and effort?
Fortunately, there are tools available that can make our life easy and keep Google Web Fonts updated all the time.
Using Skyfonts to Download and Sync Google Fonts
Fonts.com has teamed up with Google to offer google web fonts for desktops via Skyfonts software.
We are proud to have teamed up with Google to offer desktop versions of their popular Google Fonts free of charge. Offered for use in print, these fonts are delivered using SkyFont’s patent-pending font delivery technology and can be used anywhere.
Each time a font is updated — such as when new characters are added — SkyFonts will automatically update the font on your device. Syncing Google Fonts with SkyFonts will also improve your web browsing experience, by cutting the time spent downloading fonts. ~ Fonts.com
Skyfonts software is available for both Mac and Windows. You can choose the fonts you want to use while designing and Skyfonts sync these fonts with your operating system fonts and make them available in all applications as normally installed fonts. If a new version of the installed font is available, the Skyfonts application will automatically sync and replace the older one with the new version.
Download Skyfonts Software
There are other methods available to download all Google Web Fonts on your computer, however, I found Skyfonts the easiest and most efficient to keep all the fonts updated.
Custom post types are a great feature introduced in WordPress 3.0 and it extended the functionality and practical usage of this awesome CMS. While re-designing / re-structuring iogoos.com, I have used Custom Post Types for different sections on this website.
Now I want to add all these custom post types to the main WordPress feed so the users get updated content from each section via RSS. There are two ways we can do that. You can add the below code snippets to the functions.php file of your theme.
1. Add all Custom Post Types to Main WordPress RSS Feed
function extend_feed($qv) {
if (isset($qv['feed']))
$qv['post_type'] = get_post_types();
return $qv;
}
add_filter('request', 'extend_feed');
Function get_post_types() will return all registered custom post types. Here you can learn more about get_post_types() function.
2. Add selected Custom Post Types to Main WordPress RSS Feed
I’ve used the woo-commerce plugin for the shop section of this website and this plugin added a few more custom post types that may be not relevant or useful for my readers. So with the code snippet below, we can add a few selected Custom Post Types to the main WordPress RSS Feed.
function extend_feed($qv) {
if (isset($qv['feed']) && !isset($qv['post_type']))
$qv['post_type'] = array('post', 'tutorials', 'tips', 'snippets', 'shop');
return $qv;
}
add_filter('request', 'extend_feed');
If you notice, here instead of using the get_post_types() function, I supplied an array of specific custom post types slugs. This will add content to WordPress’s main RSS feed only from the specified post types.
As a web designer, I always look for design elements for inspiration. So to search for images normally open Google.com, Flickr.com, and other preferred sites, apply different search filters and type keywords and then hit enter to view the results. It’s ok to follow this process if we need to do this two or three times a day. But for a designer, it’s not the case. We look for resources a lot and that wastes a lot of our valuable time.
What if we can automate this task and reduce a few steps? I created javascript bookmarks for different searches and it’s helping me a lot to save time and search for resources with only a click, type keywords, and hit enter.
Let’s create a bookmark to search google with an image size larger than 1024×768 resolution with a license filter labeled for reuse.
Step 1: Create search query
Open Google.com and search for “Abstract Wallpapers”. This will show the result of the web search. Click Images to view image search results.
Step 2: Apply search filters
Now on this page, we can click on search tools and apply a few filters to our search results. You can apply whatever you want, however for this trick, I am setting Size to Larger than 1024×768 and Usage rights to Labeled for reuse.
Step 3: Get the query URL
By this time, the URL in the address bar has changed with specific query parameters we applied in the above steps. Copy the URL in the address bar and save it in a text or any editor you use to write Javascript.
Step 4: Write Javascript Code
The string we copied might be a very long string but we need to look for the keyword we used to search in step 1. In this case, it is the Abstract Wallpapers. The URL will have this value encoded which is something like “abstract+wallpaper”. So if you search for abstract, you will see the query param it issuing. In this case, is q=keyword
function(){
var keyword = prompt("Type keywords:");
var url = '//www.google.com/search?q='+keyword+'&hl=en&authuser=0&source=lnms&tbm=isch&sa=X&ei=q-QNU-LgIoSCrAezzoDIDw&ved=0CAcQ_AUoAQ&biw=1920&bih=1079#authuser=0&hl=en&q=abstract+wallpaper&tbm=isch&tbs=isz:lt,islt:xga,sur:fc';
var win = window.open(url, '_blank');
win.focus();
}
In the above code, line 1, is to start a javascript function, and line 6 is to wrap the function code.
Line 2, we define a Javascript prompt for the keyword to search.
Line 3, we define the URL we copied however, there’s one change we need to do. We need to pass the keyword variable to the query parameter so, remove everything after q= till & and pass the keyword variable instead. For this, we use the Javascript concatenation technique.
'string'+var+'string';
Make sure you use the same quotes for concatenation if your declaration is within single quotes use single otherwise double. If this isn’t right, the function will break.
Line 4, We use the javascript technique to open a tab or new page in the browser and pass the URL parameter with _blank for a new window or tab.
Line 5, We tell the program to focus on the new window.
Step 5: Creating the bookmark
Now our function is ready and we need to create a bookmark. Carefully bring all the code in one line and wrap it between javascript:(FUNCTION_IN_ONE_LINE)();
The end result should be like this:
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.google.com/search?q='+keyword+'&source=lnms&tbm=isch&sa=X&ei=zzsGU5_mIouyrgf9uIDYDA&ved=0CAgQ_AUoAg&biw=1918&bih=1079#q='+keyword+'&tbm=isch&tbs=isz:lt,islt:2mp,sur:fc'; var win = window.open(url, '_blank'); win.focus();})();
Step 6: Test and create a bookmark
To test this, you can simply copy the entire line and paste it into the browser address bar. It should ask for the keyword. Once you type the keyword and hit enter, it should open the Google image search results with applied filters.
Once our test is passed, Right-click anywhere on the bookmark bar and click add new. Type a title and enter the code we created in the URL field. Save it.
Now you have a bookmark to search for images greater than 1024×768 size with a license to reuse.
You can create these bookmarks for any website, just change the URL and the keyword variable where it is required. Here are a few from my collection:
Google Image Search
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.google.com/search?q='+keyword+'&source=lnms&tbm=isch&sa=X&ei=zzsGU5_mIouyrgf9uIDYDA&ved=0CAgQ_AUoAg&biw=1918&bih=1079#q='+keyword+'&tbm=isch&tbs=isz:lt,islt:2mp,sur:fc'; var win= window.open(url, '_blank'); win.focus();})();
Flickr Image Search
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.flickr.com/search/?q='+keyword+'&m=tags&l=deriv&ss=0&ct=5&mt=photos&w=all&adv=1'; var win= window.open(url, '_blank'); win.focus();})();
Icon Search @ Iconfinder.com
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.iconfinder.com/search/?q='+keyword+'&maximum=512&price=free'; var win= window.open(url, '_blank'); win.focus();})();
Dribble Search
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//dribbble.com/search?q='+keyword; var win= window.open(url, '_blank'); win.focus();})();
Go ahead, spend some time to create these quick and easy bookmarks, and save huge time in the future. If you like this trick, please share the link with your friends.
There are a few times when we want our website visitors to search content in just one category and not the whole website. Today I am sharing a simple but effective UI trick to create a category-based search box with CSS and jQuery.
While working on multiple projects I always need to copy the current path of a directory in Terminal. I used to use the command pwd in the terminal that prints the current directory path in the terminal and then I have to select the path with the mouse to copy and paste the same where I needed.
I hate to use the mouse as it wastes a lot of time and to save time and copy the current path without selecting it with the mouse, I found this command and use it all the time.
pwd | pbcopy
This command will copy the current directory path to the clipboard and we can then press CMD+V (CTRL+V for Windows) to paste the path wherever needed.
I hope this will help someone save time and be more productive.+
