2709 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
2914 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
2721 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
2972 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
2512 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
2298 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
2336 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
2389 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
4548 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
2610 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
2470 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