936 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
1040 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
887 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
2432 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
1865 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
1796 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
1835 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
1873 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
3957 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
2129 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
1976 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
Page 1 of 1 Pages       Total Records 11
  • First
  • Prev
  • 1
  • Next
  • Last