The Coding Express

In the last article, we learned about dropdown menus using CSS. It uses very simple concepts like pseudo-classes, display property in CSS and HTML lists. Today using same concepts, we are going to create tooltips. Tooltips are used for giving user extra information about a hovered item like buttons, links or any other text or images. Let's begin... Create Basic Tooltip Important points to note: Create div containing text to hover inside which another div containing text to be shown after hovering Initially hide the content of second div using visibility property Use :hover pseudo-class on the first div to change visibility property of the second d iv Create tooltip example yourself before looking the code... See the Pen WDS64-1 by blackbird ( @blackbird98 ) on CodePen . Position Tooltips In the previous example, the tooltip was positioned on left, but we can change position as per our choice. We can do this by setting left, right, top and bottom properties on

In the last 3 articles, we learned about various ways to implement navigation bar using CSS and now you can easily implement them in web pages. Moving forward, we are going to learn about dropdowns in CSS. Dropdowns are used when you have to give more information about a particular element but do want to show only if the user is interested. Create Basic Dropdown Important points to note: Create div containing text to hover inside which another div containing text to be shown after hovering Initially hide the content of second div using display property Use :hover pseudo-class on the first div to change display property of the second div Now create dropdown yourself without seeing the code... See the Pen WDS63-1 by blackbird ( @blackbird98 ) on CodePen . Create Dropdown Menu The example is very similar to the previous one except we will add a list of links inside hover content. See the Pen WDS63-2 by blackbird ( @blackbird98 ) on CodePen . Create Dropdowns Inside

In the last two articles, we learned about vertical navigation bar and also created a full-size navigation bar in one example. Although it looks's awesome, most of the websites still use horizontal navigation bar. Let's learn how to make it... Horizontal Navigation Bar All the basic concepts learned while creating vertical navigation bar will remain same. So first create from what we already know... See the Pen WDS62-1 by blackbird ( @blackbird98 ) on CodePen . Right Align Links We usually see that some links in the navigation bar are aligned on the right side so that they become separate from other elements and they represent some important action. Its mostly used with Login and Register buttons. To achieve this, just add float:right to that element. Add Dividers You can add dividers between each element in navigation bar by using border-right property on each list element except last-child of list. li {     border-right: 1px solid white; } li:last

In the last article, we learned about navigation bars in CSS and designed one decent looking vertical navigation bar. Let's continue our learning to design a perfect navigation bar... Help user to know page/ link We can add the active class to current link to let the user know which page or link he/she is on...Let's say on the Home page, you will add the active class to the Home section of the navigation bar. .active {     background-color: #FFC300;     color: white; } Little bit of Styling We can add a border to the navigation bar and also to individual elements. The only thing to note that, while applying a border to elements only use border-bottom on each element. If you use the border, then you will get double borders due to bottom of above and top of the below-placed element. You can also align elements to center to look beautiful. ul {    border: 1x solid black; } li {    text-align: center;    border-bottom: 1px solid black; } li:last-child {    bor

In the last article, we learned about opacity property in CSS and I concluded the article with one example for you to solve. Hope you completed it... Now in this article, we are going to learn to create navigation bar which we frequently see on any web pages nowadays. Although we will learn easy and better way to do this using Bootstrap letter, navigation bars will make your web pages better for sure.  So let's begin... What is Navigation Bars? It's just 'list of links'. We will create a simple unordered list of links in HTML and will change that boring looking menu of lists into something beautiful. Let's create a simple menu just using HTML and apply a little bit of CSS. We have just used CSS to remove bullets, margin , and padding of elements of the list. This will also be our base HTML code to create navigation bars. See the Pen WDS60-1 by blackbird ( @blackbird98 ) on CodePen . Vertical Navigation Bar To make a vertical design bar, we have to styl

In the last article, we completed learning pseudo-elements in CSS and now it's time to move into ' real ' world  😃. In today's article, we are going to learn about making elements transparent using CSS. Let's begin... Make Images Transparent The opacity  property is used to make images transparent. It takes value in range 0.0 to 1.0. A lower value represents a more transparent image. Although this opacity is property works in all browsers, for Internet expolrer(version 8 or earlier), use:  filter: alpha(opacity = x) ,  where takes value in range 0 to 100 with lower value represents more transparent. Here is an example... See the Pen WDS59-1 by blackbird ( @blackbird98 ) on CodePen . Combine Pseudo and Real As we have already learned pseudo-class :hover , we will use it to style our image. We will put a default value of opacity to 0.4 and will change to 1.0 when hover class is active. See the Pen WDS59-2 by blackbird ( @blackbird98 ) on CodePen . T

In the last article, we started learning about pseudo-elements in CSS and we covered two pseudo-elements: ::first-line and ::first-letter which are very helpful in selecting first line and the first letter of text easily. In this article, we are going to learn some more things about pseudo-elements. Let's begin... Combine pseudo-elements with CSS classes We can use CSS classes to select elements more precisely using pseudo-elements. Let's say we have two paragraphs and we want to customize first-letter of the just first paragraph. In this case, we will give some class to first-paragraph and then use it while applying pseudo-elements. If we give specialPara  class name to that particular paragraph: p.specialPara::first-letter {     color: #00FF00;     font-size: 1.5em; } Can we use multiple pseudo-elements? The answer is why not? You can use as many pseudo-elements you want on any given element. Till now we just know ::first-line and ::first-letter . S