Earlier last week, I shared a tutorial with you on how to use custom fonts on your website to get the desired result on your webpages. Regarding that, one of the readers emailed me asking to share a tutorial on how to use Google fonts in your website design. I thought of sharing this tutorial with everyone, and hence this post. Before I get into the steps to follow, let me tell you what are Google fonts. ...
Custom Fonts for a website, or a single webpage are becoming common these days. The reason behind this is that people want to showcase the content on their website in various different fonts, and the natively supported fonts on various computers and browsers is very low. I have **used a lot of different fonts **for different websites that I have worked on, and they have turned out great. Now, the problem with using Custom Fonts is that you are unaware if the user would have that specific font installed or not. So, to overcome this problem, we can take any of the following measures, that I will get to in a minute. ...
Whenever anyone starts learning CSS, they come to a point when they get confused between the **CSS id **and the CSS Class. A lot of people, who build websites don’t even know the exact difference between the two. When I started learning CSS, I was taught about ids and Classes. I was told that the difference between a class and an id is that an element can have multiple classes, but only a single id. Well, I would not say that this is something false, but this is not the only reason. I was curious to know more about the difference between the two similar-sounding names and that’s when I started to search on the internet to find the actual difference. I went through a lot of websites and finally came up with a few differences that were actually good, and worth sharing. ...
At times, you might have seen websites where the selection colour of the text is different than the typical, default blue colour. This thing can be achieved simply by using minimal lines of code in your styling. This tutorial is going to be a very small one, in which I would just tell you the way to change the selection colour and then also change the styling of your text when it is selected. For the demo, I have a sample paragraph just at the end of the tutorial, where you would be able to see everything in action. ...
When I started coding websites for other people, I was really confused with the different positioning options that CSS provides. The options provided actually sound pretty similar and it is normal for anyone to get confused with all that. But then, with time and different experiments, I understood the various positioning options in CSS and here I am to explain them to you in brief. ...
At times, we want to use an image slide show for displaying images in the background of our webpage and this is a difficult task. But with the advancement in the field of web development, it became easy to do so with using some jQuery or JavaScript on the webpage and achieve this goal. But I feel using additional lines of code to implement jQuery or JavaScript is not worth it. We can actually do that by using some of the properties in CSS3. CSS3 introduced a new property, the animation property. We already saw the animation property when I told you how to create a simple animated background for a webpage. If you missed that post, go ahead and read <a title="Animated Background Using CSS" href="http://slashcoding.com/create-an-animated-background-using-css/" target="_blank" rel="nofollow">How to Create animated Background using CSS</a>. In today’s tutorial, I would like to share with you all a way to create an image slide show background for your webpage. This can be useful when you want to display some images to the user, by default on any page as the background! ...
Last week, I discussed with you all how to improve your page loading time by implementing Lazy Loading on your webpage. Well, that’s not the only thing you can do to improve your page loading time. There are various other ways and one of them is to compress your CSS files. Sometimes, compressing of CSS files is called **Minify**, as it decreases the lines of code in the CSS file. In case you missed my earlier article on how to Lazy load images on your webpage, you can go ahead and read it now. ...
Creating an animation is sometimes considered vital for various projects. But loading your website with flash animations can make the load time for your webpage quite high! So, to avoid increasing your page load time and the time you spend in creating that flash animation, you can simply use CSS to implement a simple animation on your web page. There are various advantages of using CSS to implement a simple animation, which include reducing the page load time, reducing your development time and various other things. Keeping all these in mind, I thought of sharing this simple tutorial with everyone on my blog. Well, here is the simple tutorial for you. For this tutorial, I would be using a pretty common cloud image, which suits pretty well for our animation. If you want, you can save this image from below and use it for this tutorial. ...
Developing a menu for your webpage can sometimes be a very hard task. But if you want to create a simple menu, that looks professional, I would suggest you to do that using basic CSS and HTML. It is quick and looks professional. I earlier shared a tutorial on how to make a professional looking CSS menu, but it lacked the feature of a drop-down menu. One of my readers emailed me asking me to write a tutorial on how to create a drop down menu. So, I would continue with the previous tutorial and design a similar looking professional drop down menu. For those of you who do not know what a drop down menu is, it is a special type of menu that displays a sub menu when you hover over a particular menu item. Again, I would use HTML and CSS ( and not HTML5) and my favorite Text Editor, Notepad++. Read more about my previous tutorial for a professional looking CSS menu without a drop down and the reason why I use Notepad++ for writing all my codes here. ...
A menu on a webpage is something that adds functionality to the website. It allows users to browse through your entire site with the ease of a click. Generally a menu is placed on the top of the webpage, below the logo or the name of the company. Designing a menu in Photoshop is pretty easy, but that is a different thing. Today I will tell you how to make a stylish and professional looking menu for your website or blog. This will be a simple menu. ...