. . .

Category: CSS

How To Create a Pill Button

<h2>Pill Buttons</h2> <button class=”button”>Pill Button 1</button> <button class=”button”>Pill Button 2</button>   .button { background-color: #ddd; border: none; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 16px; } .button:hover { background-color: #f1f1f1; }         Pill Buttons Pill Button 1 Pill Button 2

Use of line-height tag in css.

We use this tag to defines the amount of space above and below inline elements. Or it can be say specify the space between lines.   div.a {     line-height: normal; } div.a { line-height: 1.6; }      

How to create mega menu?

Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar. Mega menu is the broad menu which includes all small menus in a webpage. Mega menu is used to gather sub menus in the orderly manner. In mega menu we can also use sliders effect to […]

What is webkit transition effect?

A webkit transition effect is used to zoom any image at mouse hover. These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately, transition speed is controlled by Css properties on mouse hover effect. Let’s discuss how can we create this zoom effect on […]

How to create custom responsive navbar?

Responsive navbar is the menu bar which is automatically responsive in all small screen devices. When we create menus in the unorder list then it might not look mobile friendly, with the help of responsive topnav effect we can make it mobile friendly. When the user taps a button, the content slides in from the left […]

How to create Modal boxes?

A modal window is a graphical control element subordinate to an application’s main window. Modal box is used to show any information in the form of text, image, trigger button etc and habituate to simply clicking “Close”, “Cancel”, or “OK” without reading or understanding the message. Modeless windows don’t block the main window, so the user […]

How to create loader with CSS?

Loader is specially used to define the progress in a graphical way. Loaders specially used in websites to draw some intention of the customers about project portfolios, reports & profile about the organization. Here, we will learn how loaders can be create with the help of CSS. Step1:  Firstly, we have to add a div […]

How to create a responsive web page?

A website should look good on any device! a responsive html page always provides a good felling to use & helps the user to access from top to bottom. A html page should be friendly with mobile view, tab view, laptop view & desktop view. To enable this views we have to go through some […]

How to create an image overlay zoom effect on hover?

A image overlay is a thin layer over image which is used to modify a image within a web page. Image overlay is created to design the image in a different manner. Sometimes, it is used to add text with in a image instead of using hero image effect. It is very popular in websites […]

What is Colorzilla?

Colorzilla is a color picker tool from any website page. We can use colorzilla to pick any color from web sites to use. We can install colorzilla extension in chrome browser. How to install Colorzilla: You have type colorzilla in your browser homepage. go to the http://www.colorzilla.com/ click on the left link which is colorzilla for […]