2800 Views
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: revert;
transform-style: unset;
}
.flip-box:hover ...
Anamika Gupta
Sep 16, 2022
3008 Views
Image Overlapping
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
p {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #a97839;
}
h1 {text-align: center;
}
.container {
padding: 100px 30px;
width: 100%;
...
Anamika Gupta
Sep 15, 2022
2854 Views
Fading image on mouse over
<html>
<head>
<title>Mouse over effects</title>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
.overlay {
position: ...
Anamika Gupta
Sep 15, 2022
3057 Views
Everyone needs to be there website load quickly. For this we need to reduce assets used in the website. If your website usages one image with multiple variables like Black Image or White Image or Greyscale Image then no need to use multiple images for this. You can convert a ...
Sheetal Kumar
Oct 17, 2020
2584 Views
What is SASS?
Sass (Syntactically Awsome Stylesheet)
It is a Pre-processor and it was designed by Hampton catlin and developed by Natalie weizenbaum in 2006
It helps to reduce redundancy with CSS
It is used to style a document in a proper structure.
Use of SASS
It is a pre-processing ...
Anamika Gupta
May 15, 2019
2362 Views
Font Awsome Icon in Circle
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.circle {
height:200px;
width:200px;
background-color:#92ad2a;
...
Anamika Gupta
Oct 17, 2018
2411 Views
In some HTML design, you need a footer that is fixed in the page bottom. We are explaining the best way to add sticky footer using HTML and CSS.
* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
...
Sheetal Kumar
Oct 17, 2018
2467 Views
For creating the same height of blocks in HTML you can use either table property of CSS or Flex property.
1. To use the table you need to create a container as Table and block as Table Cell.
.ht-container {
display: table;
}
.ht-block {
float: none;
display: table-cell;
...
Sheetal Kumar
Oct 16, 2018
4634 Views
.circle { height: 100px;
width: 100px;
background-color: #ffe0b3;
border-radius: 50%;
}
.oval { height: 50px;
width: 100px;
background-color: #ffcc80;
border-radius: 50%;
}
.ellipses { height: ...
Anamika Gupta
Oct 11, 2018
2684 Views
To change Input Placeholder Color you need to set the style for Pseudo Elements of CSS. Placeholder style CSS require different Pseudo Elements for different browsers.
See the following example of CSS:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #999999;
}
:-moz-placeholder ...
Sheetal Kumar
Oct 10, 2018
2543 Views
When you are designing a page you need to align some elements in the center or middle vertical. Then you have to use one from the following methods.
1. Using Table Property
Table property has the feature table-cell to align the element in middle by CSS.
display: table-cell;
vertical-align: ...
Sheetal Kumar
Oct 09, 2018