html Archives - csshint - A designer hub https://csshint.com/category/html/ Sun, 30 Jul 2023 18:06:24 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Hamburger menu sidebar https://csshint.com/hamburger-menu-sidebar/ Sun, 30 Jul 2023 18:06:24 +0000 https://csshint.com/?p=8448 How to create Hamburger menu sidebar using HTML CSS And JS. Designed by Profesor08 a codepen user. See the Pen Hamburger menu sidebar by Profesor08 (@Profesor08) on CodePen. HTML <div class="nav-container" tabindex="0"> <div class="nav-toggle"></div> <nav class="nav-items"> <a class="nav-item" href="#">Home</a> <a class="nav-item" href="#">About US</a> <a class="nav-item" href="#">Product</a> <a class="nav-item" href="#">Contact US</a> </nav> </div> CSS (SCSS) $toggleSize: […]

The post Hamburger menu sidebar appeared first on csshint - A designer hub.

]]> How to create Hamburger menu sidebar using HTML CSS And JS. Designed by Profesor08 a codepen user.

HTML

<div class="nav-container" tabindex="0">
  <div class="nav-toggle"></div>

  <nav class="nav-items">
    <a class="nav-item" href="#">Home</a>
    <a class="nav-item" href="#">About US</a>
    <a class="nav-item" href="#">Product</a>
    <a class="nav-item" href="#">Contact US</a>
  </nav>
</div>

CSS (SCSS)

$toggleSize: 40px;
$toggleMargin: 10px;
$toggleLine: 4px;
$toggleColor: red;

.nav-container {
  position: relative;
  display: inline-block;
  max-width: $toggleSize + $toggleMargin;
  max-height: $toggleSize + $toggleMargin;
  overflow: visible;
  outline: none;
  
  //&:focus-within, &:focus {
  &.is-active {
    .nav-toggle {
      &:before, &:after {
        box-shadow: none;
      }
      
      &:before {
        transform: rotate(-45deg);
      }
      
      &:after {
        transform: rotate(45deg);
      }
    }
    
    .nav-items {
      transform: translate(0, 0);
    }
  }
  
  .nav-toggle {
    $offset: $toggleSize * 0.5;
    
    position: relative;
    width: $toggleSize;
    height: $toggleSize;
    margin: $toggleMargin;
    z-index: 2;
    
    &:hover {
      cursor: pointer;
    }
      
    &:before, &:after {
      content: "";
      position: absolute;
      top: #{$offset - $toggleLine / 2};
      left: 0;
      transform: translate(0, 0);
      width: 100%;
      height: $toggleLine;
      background: $toggleColor;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    
    &:before {
      box-shadow: 0 #{$offset / 1.5} 0 0 $toggleColor;
    }
    
    &:after {
      box-shadow: 0 #{-$offset / 1.5} 0 0 $toggleColor;
    }
  }
  
  .nav-items {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 300px;
    max-width: 50vw;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    padding: 80px 20px 20px 10px;
    transition: transform .3s ease;
    transform: translate(calc(-100% - 50px), 0);
    background: #EFEFEF;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px 0;
    align-content: start;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    
    .nav-item {
      background: darken(#EFEFEF, 5%);
      padding: 10px;
      transition: background-color .3s ease;
      
      &:hover {
        cursor: pointer;
        background: darken(#EFEFEF, 10%);
      }
    }
  }
}

JS

const nav = document.querySelector(".nav-container");

if (nav) {
  const toggle = nav.querySelector(".nav-toggle");
  
  if (toggle) {
    toggle.addEventListener("click", () => {
      if (nav.classList.contains("is-active")) {
        nav.classList.remove("is-active");
      }
      else {
        nav.classList.add("is-active");
      }
    });
    
    nav.addEventListener("blur", () => {
      nav.classList.remove("is-active");
    });
  }
}

 

Output

Hamburger menu sidebar

Hamburger menu sidebar

The post Hamburger menu sidebar appeared first on csshint - A designer hub.

]]> Bootstrap 5 – Responsive Login Form https://csshint.com/bootstrap-5-responsive-login-form/ Sun, 30 Jul 2023 17:56:52 +0000 https://csshint.com/?p=8442 How to create Responsive Login Form using Bootstrap 5. Designed by Meb Zone a codepen user. See the Pen Bootstrap 5 – Responsive Login Form by Web Zone (@skcals) on CodePen. HTML <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap 5 - Login Form</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" /> </head> <body class="main-bg"> […]

The post Bootstrap 5 – Responsive Login Form appeared first on csshint - A designer hub.

]]> How to create Responsive Login Form using Bootstrap 5. Designed by Meb Zone a codepen user.

Navigation Menu expand On Click

HTML

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5 - Login Form</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" />
</head>

<body class="main-bg">
  <!-- Login Form -->
  <div class="container">
    <div class="row justify-content-center mt-5">
      <div class="col-lg-4 col-md-6 col-sm-6">
        <div class="card shadow">
          <div class="card-title text-center border-bottom">
            <h2 class="p-3">Login</h2>
          </div>
          <div class="card-body">
            <form>
              <div class="mb-4">
                <label for="username" class="form-label">Username/Email</label>
                <input type="text" class="form-control" id="username" />
              </div>
              <div class="mb-4">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" />
              </div>
              <div class="mb-4">
                <input type="checkbox" class="form-check-input" id="remember" />
                <label for="remember" class="form-label">Remember Me</label>
              </div>
              <div class="d-grid">
                <button type="submit" class="btn text-light main-bg">Login</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS

:root{
  --main-bg:#e91e63;
}

.main-bg {
  background: var(--main-bg) !important;
}

input:focus, button:focus {
  border: 1px solid var(--main-bg) !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--main-bg) !important;
  border-color: var(--main-bg) !important;
}

.card, .btn, input{
  border-radius:0 !important;
}

 

Output

Bootstrap 5 – Responsive Login Form

Bootstrap 5 – Responsive Login Form

The post Bootstrap 5 – Responsive Login Form appeared first on csshint - A designer hub.

]]> HTML CSS image hover effects https://csshint.com/html-css-image-hover-effects/ Sat, 22 Apr 2023 10:42:26 +0000 https://csshint.com/?p=8341 Learn Html CSS image hover effects. Designed by Naoya a codepen user. See the Pen Demo: CSS image hover effects by Naoya (@nxworld) on CodePen. HTML <h1>CSS Image Hover Effects</h1> <p>← <a href="https://www.nxworld.net/css-image-hover-effects.html" target="_blank">View the article</a></p> <h2>No Effect</h2> <div class="column"> <div> <figure><img src="https://picsum.photos/300/200?image=244" /></figure> <span>Hover</span> </div> <div> <figure><img src="https://picsum.photos/300/200?image=1024" /></figure> <span>Hover</span> </div> <div> <figure><img src="https://picsum.photos/300/200?image=611" […]

The post HTML CSS image hover effects appeared first on csshint - A designer hub.

]]> Learn Html CSS image hover effects. Designed by Naoya a codepen user.

HTML CSS image hover effects

HTML

<h1>CSS Image Hover Effects</h1>
<p>← <a href="https://www.nxworld.net/css-image-hover-effects.html" target="_blank">View the article</a></p>

<h2>No Effect</h2>
<div class="column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo01">1. Zoom In #1</h2>
<div class="hover01 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo02">2. Zoom In #2</h2>
<div class="hover02 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo03">3. Zoom Out #1</h2>
<div class="hover03 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo04">4. Zoom Out #2</h2>
<div class="hover04 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo05">5. Slide</h2>
<div class="hover05 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
<div class="hover06 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo07">7. Blur</h2>
<div class="hover07 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo08">8. Gray Scale</h2>
<div class="hover08 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo09">9. Sepia</h2>
<div class="hover09 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo10">10. Blur + Gray Scale</h2>
<div class="hover10 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo11">11. Opacity #1</h2>
<div class="hover11 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo13">13. Flashing</h2>
<div class="hover13 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo14">14. Shine</h2>
<div class="hover14 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo15">15. Circle</h2>
<div class="hover15 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

CSS

body {
     color: #333;
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
}
h1,
h1+p {
     margin: 30px 15px 0;
     font-weight: 300;
}
h1+p a {
     color: #333;
}
h1+p a:hover {
     text-decoration: none;
}
h2 {
     margin: 60px 15px 0;
     padding: 0;
     font-weight: 300;
}
h2 span {
     margin-left: 1em;
     color: #aaa;
     font-size: 85%;
}
.column {
     margin: 15px 15px 0;
     padding: 0;
}
.column:last-child {
     padding-bottom: 60px;
}
.column::after {
     content: '';
     clear: both;
     display: block;
}
.column div {
     position: relative;
     float: left;
     width: 300px;
     height: 200px;
     margin: 0 0 0 25px;
     padding: 0;
}
.column div:first-child {
     margin-left: 0;
}
.column div span {
     position: absolute;
     bottom: -20px;
     left: 0;
     z-index: -1;
     display: block;
     width: 300px;
     margin: 0;
     padding: 0;
     color: #444;
     font-size: 18px;
     text-decoration: none;
     text-align: center;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     opacity: 0;
}
figure {
     width: 300px;
     height: 200px;
     margin: 0;
     padding: 0;
     background: #fff;
     overflow: hidden;
}
figure:hover+span {
     bottom: -36px;
     opacity: 1;
}



/* Zoom In #1 */
.hover01 figure img {
     -webkit-transform: scale(1);
     transform: scale(1);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover01 figure:hover img {
     -webkit-transform: scale(1.3);
     transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 figure img {
     width: 300px;
     height: auto;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover02 figure:hover img {
     width: 350px;
}

/* Zoom Out #1 */
.hover03 figure img {
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover03 figure:hover img {
     -webkit-transform: scale(1);
     transform: scale(1);
}

/* Zoom Out #2 */
.hover04 figure img {
     width: 400px;
     height: auto;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover04 figure:hover img {
     width: 300px;
}

/* Slide */
.hover05 figure img {
     margin-left: 30px;
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover05 figure:hover img {
     margin-left: 0;
}

/* Rotate */
.hover06 figure img {
     -webkit-transform: rotate(15deg) scale(1.4);
     transform: rotate(15deg) scale(1.4);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover06 figure:hover img {
     -webkit-transform: rotate(0) scale(1);
     transform: rotate(0) scale(1);
}

/* Blur */
.hover07 figure img {
     -webkit-filter: blur(3px);
     filter: blur(3px);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover07 figure:hover img {
     -webkit-filter: blur(0);
     filter: blur(0);
}

/* Gray Scale */
.hover08 figure img {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover08 figure:hover img {
     -webkit-filter: grayscale(0);
     filter: grayscale(0);
}

/* Sepia */
.hover09 figure img {
     -webkit-filter: sepia(100%);
     filter: sepia(100%);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover09 figure:hover img {
     -webkit-filter: sepia(0);
     filter: sepia(0);
}

/* Blur + Gray Scale */
.hover10 figure img {
     -webkit-filter: grayscale(0) blur(0);
     filter: grayscale(0) blur(0);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover10 figure:hover img {
     -webkit-filter: grayscale(100%) blur(3px);
     filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.hover11 figure img {
     opacity: 1;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover11 figure:hover img {
     opacity: .5;
}

/* Opacity #2 */
.hover12 figure {
     background: #1abc9c;
}
.hover12 figure img {
     opacity: 1;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover12 figure:hover img {
     opacity: .5;
}

/* Flashing */
.hover13 figure:hover img {
     opacity: 1;
     -webkit-animation: flash 1.5s;
     animation: flash 1.5s;
}
@-webkit-keyframes flash {
     0% {
          opacity: .4;
     }
     100% {
          opacity: 1;
     }
}
@keyframes flash {
     0% {
          opacity: .4;
     }
     100% {
          opacity: 1;
     }
}

/* Shine */
.hover14 figure {
     position: relative;
}
.hover14 figure::before {
     position: absolute;
     top: 0;
     left: -75%;
     z-index: 2;
     display: block;
     content: '';
     width: 50%;
     height: 100%;
     background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
     -webkit-transform: skewX(-25deg);
     transform: skewX(-25deg);
}
.hover14 figure:hover::before {
     -webkit-animation: shine .75s;
     animation: shine .75s;
}
@-webkit-keyframes shine {
     100% {
          left: 125%;
     }
}
@keyframes shine {
     100% {
          left: 125%;
     }
}

/* Circle */
.hover15 figure {
     position: relative;
}
.hover15 figure::before {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 2;
     display: block;
     content: '';
     width: 0;
     height: 0;
     background: rgba(255,255,255,.2);
     border-radius: 100%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     opacity: 0;
}
.hover15 figure:hover::before {
     -webkit-animation: circle .75s;
     animation: circle .75s;
}
@-webkit-keyframes circle {
     0% {
          opacity: 1;
     }
     40% {
          opacity: 1;
     }
     100% {
          width: 200%;
          height: 200%;
          opacity: 0;
     }
}
@keyframes circle {
     0% {
          opacity: 1;
     }
     40% {
          opacity: 1;
     }
     100% {
          width: 200%;
          height: 200%;
          opacity: 0;
     }
}

 

The post HTML CSS image hover effects appeared first on csshint - A designer hub.

]]> HTML Table Background Color https://csshint.com/html-table-background-color/ Sun, 09 Apr 2023 10:18:49 +0000 https://csshint.com/?p=8271 In This article we explains the methods for changing the background colors of a table. Below are some examples of applying background color to a table in HTML. Background Color for the Whole Table <!DOCTYPE html> <html lang="en"> <head> <title>Background Color for the Whole Table </title> </head> <body> <table style="width:100%;text-align:left;background-color:yellow;"> <tr> <th>Table Header</th> <th>Table Header</th> […]

The post HTML Table Background Color appeared first on csshint - A designer hub.

]]> In This article we explains the methods for changing the background colors of a table.

Below are some examples of applying background color to a table in HTML.

Background Color for the Whole Table

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Background Color for the Whole Table
    </title>

</head>
<body>
<table style="width:100%;text-align:left;background-color:yellow;">
   <tr>
      <th>Table Header</th>
      <th>Table Header</th>
   </tr>
   <tr>
      <td>Table cell</td>
      <td>Table cell</td>
   </tr>
   <tr>
      <td>Table cell</td>
      <td>Table cell</td>
   </tr>
</table>

</body>
  
</html>

Output:

Background Color for the Whole Table

Background Color of a Table Row

If you want to change another color then You can also change the background color of an individual table cell. Here, we add a different background color to the first row, which happens to be the table header row.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Background Color of a Table Row
    </title>
</head>
<body>
<table style="width:100%;text-align:left;background-color:yellow;">
   <tr style="background-color:#000; color:#fff;">
      <th>Table Header</th>
      <th>Table Header</th>
   </tr>
   <tr>
      <td>Table cell</td>
      <td>Table cell</td>
   </tr>
   <tr>
      <td>Table cell</td>
      <td>Table cell</td>
   </tr>
</table>

</body>
</html>

Output:

Background Color of a Table Row

HTML table background color with the border attribute Using Classes

Here’s an example of setting the table’s background color and other properties using a CSS class.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Example of Table Background Color with border 
    </title>
 <!-- CSS -->
<style>
.myTable { 
  width: 100%;
  text-align: left;
  background-color: #fff;
  border-collapse: collapse; 
  font-family: 'Nunito', sans-serif;
  }
.myTable th { 
  background-color: #333;
  color: white; 
  font-weight:bold;
  font-size:18px;
  }
.myTable td, 
.myTable th { 
  padding: 10px;
  border: 1px solid #ddd; 
  }
</style>
</head>

 
  
<body>
<!-- HTML -->
<table class="myTable">
   <tr>
      <th>Header</th>
      <th>Header</th>
   </tr>
   <tr>
      <td>Table cell</td>
      <td>Table cell</td>
   </tr>
   <tr>
      <td>Table cell</td>
      <td>Table cell</td>
   </tr>
</table>
</body>
</html>

Output:

table with border

The post HTML Table Background Color appeared first on csshint - A designer hub.

]]> 30+ Tailwind CSS Card Examples https://csshint.com/tailwind-css-card-examples/ Tue, 28 Feb 2023 17:19:40 +0000 https://csshint.com/?p=7896 Hello guys, In this collection, I have listed Top 30 best blog card designs made with Tailwind CSS. Check out these awesome CSS blog card design examples which are available on Codepen. Tailwind CSS card Author: zoltanszogyenyi Made with: HTML & Tailwind CSS Demo Link: Source Code / Demo Tags: Simple Blog CSS card Demo […]

The post 30+ Tailwind CSS Card Examples appeared first on csshint - A designer hub.

]]> Hello guys, In this collection, I have listed Top 30 best blog card designs made with Tailwind CSS. Check out these awesome CSS blog card design examples which are available on Codepen.

Responsive card list

Responsive card list in grid made using Tailwind CSS

Author: EgoistDeveloper
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: Tailwind CSS responsive card list

Demo / Code Get Hosting


Tailwind CSS Blog Card Block – 2nd

Author: Componentity
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: Tailwind CSS Blog Card with Badge

Demo / Code Get Hosting

Overlapping Product Card

Overlapping Product Card

A product card with price & overlapping image. Inspiration from Steve Schoger’s book Refactoring UI.

Author: harsh07bharvada
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: Overlapping Product Card

Demo / Code Get Hosting

E-commerce Product card made using Tailwind CSS

Tailwind CSS E-commerce Product card

E-commerce Product card made using Tailwind CSS

Author: Anonymous
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: E-commerce Product card

Demo / Code Get Hosting

Profile Card with Header Image

Profile Card with Header Image – Tailwind Component

Profile Card is like a business card to help customers, users can know the basic information of your introduce in the website. It is use Tailwind CSS to create this beautiful profile card tailwind component.

Author: kopi
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: Profile Card with Header Image

Demo / Code Get Hosting


Tailwind Profile Card (light/dark)

Author: LoSti
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: profile card

Demo / Code Get Hosting


Tailwindcss profile card

Author: David Pella
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: profile card

Demo / Code Get Hosting


Team Member card – Tailwind CSS

Author: Cruip
Made with: HTML & Tailwind CSS
Demo Link: Source Code / Demo
Tags: Team Member card

Demo / Code Get Hosting

The post 30+ Tailwind CSS Card Examples appeared first on csshint - A designer hub.

]]> 22+ CSS Reveal Animations https://csshint.com/css-reveal-animations/ Sun, 22 Jan 2023 11:15:15 +0000 https://csshint.com/?p=7840 Latest Collection of 100% free HTML and CSS reveal animation code examples from Codepen and other resources. Image reveal – noise Author Samritha S Made with HTML / CSS Demo / Code Get Hosting Text clip heading reveal Author Zach Saucier Made with HTML / CSS (SCSS) Demo / Code Get Hosting Hero Image Reveal […]

The post 22+ CSS Reveal Animations appeared first on csshint - A designer hub.

]]> Latest Collection of 100% free HTML and CSS reveal animation code examples from Codepen and other resources.

CSS Image reveal with filter && clip-path

CSS Image reveal with filter && clip-path 😎

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

Demo / Code Get Hosting

Pure CSS | FadeIn Text with bars

Pure CSS | FadeIn Text with bars | KeyFrames & Scss

Author

  • Kaio Almeida

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

Image Reveal with SVG & Blend Modes

“Scribble” Image Reveal with SVG & Blend Modes

Author

  • Dudley Storey

Made with

  • HTML / CSS

Demo / Code Get Hosting

The post 22+ CSS Reveal Animations appeared first on csshint - A designer hub.

]]> How to create Social Media Icons using HTML CSS ? https://csshint.com/how-to-create-social-media-icons-using-html-css/ Sat, 01 Oct 2022 15:29:08 +0000 https://csshint.com/?p=7800 Today In this article, we are learning how to Create Social Media icons using HTML And Css. Note: You can add Social Media icons as images( SVG, PNG ) or Font icon like, bootstrap icon, material icon and Font awesome icon. In this article, i will show you how to crate social media icon using […]

The post How to create Social Media Icons using HTML CSS ? appeared first on csshint - A designer hub.

]]> Today In this article, we are learning how to Create Social Media icons using HTML And Css.

Note: You can add Social Media icons as images( SVG, PNG ) or Font icon like, bootstrap icon, material icon and Font awesome icon. In this article, i will show you how to crate social media icon using font awesome. let’s started.

Step 1: first we need to add (Font Awesome Icons) the following CDN link insidesection.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Step 2: Add HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<h2>Social Media Buttons Examples</h2>

<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
      
</body>
</html>

Step 3: Add CSS:

<style>
.fa {
    padding: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    font-size: 30px !important;
    width: 70px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
</style>

Output:

How to include Social Media Icons using HTML CSS

The post How to create Social Media Icons using HTML CSS ? appeared first on csshint - A designer hub.

]]> 10+ Tailwind FAQ https://csshint.com/tailwind-faq/ Wed, 13 Jul 2022 07:22:04 +0000 http://csshint.com/?p=7470 Latest Collection of 100% free Tailwind FAQ code examples from Codepen and other resources. FAQ page Author Mehmet Sağır Made with HTML / CSS / JS Demo / Code Get Hosting Tailwind CSS Accordions Style Author tailgrids Made with HTML / CSS / JS Demo / Code Get Hosting Pretty accordion with decent animation Author […]

The post 10+ Tailwind FAQ appeared first on csshint - A designer hub.

]]> Latest Collection of 100% free Tailwind FAQ code examples from Codepen and other resources.

The post 10+ Tailwind FAQ appeared first on csshint - A designer hub.

]]> 22+ CSS Dropdown Menus https://csshint.com/css-dropdown-menus/ Mon, 31 Jan 2022 09:30:38 +0000 http://csshint.com/?p=7102 Latest Collection of 100% free HTML CSS dropdown menu code examples from Codepen. Gooey Dropdown Menu Author Mark Eriksson Made with HTML / CSS (SCSS) Demo / Code Get Hosting Navigation with Sub-Navigation Author Cassidy Williams Made with HTML / CSS (SCSS) Demo / Code Get Hosting Drop Down Menu Author Mark Made with HTML […]

The post 22+ CSS Dropdown Menus appeared first on csshint - A designer hub.

]]> Latest Collection of 100% free HTML CSS dropdown menu code examples from Codepen.

Gooey Dropdown Menu

Gooey Dropdown Menu


Gooey Dropdown Menu

Author

  • Mark Eriksson

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

Navigation with Sub-Navigation

Navigation with Sub-Navigation


Navigation with Sub-Navigation

Author

  • Cassidy Williams

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

dropdown in html

dropdown in html


Dropdown dark/light – pure css

Author

  • Ivan Grozdic

Made with

  • HTML / CSS

Demo / Code Get Hosting

The more menu

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

Demo / Code Get Hosting

Molten menu

Author

  • Zealand

Made with

  • HTML / CSS

Demo / Code Get Hosting

#CodePenChallenge: Menu

Author

  • Marco Besagni

Made with

  • HTML / CSS (Sass)

Demo / Code Get Hosting

Menu – Gradient Menu

Author

  • Halida Astatin

Made with

  • HTML / CSS (Sass)

Demo / Code Get Hosting

html css drop down menu.gif

html css drop down menu.gif


MainMenu #CodePenChallenge

Author

  • Mohamed Ayman

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

Responsive navigation menu Pure CSS

Author

  • Jenning

Made with

  • HTML / CSS (Sass)

Demo / Code Get Hosting

Fancy Menu #CodePenChallenge

Author

  • Jesus Rodriguez

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

CodePen Challenge: Menu

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

Recursive Hover Nav ( Only CSS )

Author

  • sean_codes

Made with

  • HTML / CSS

Demo / Code Get Hosting

Cool Dropdown Menu Effects Pure Css

Author

  • Ruslan Pivovarov

Made with

  • HTML (Pug) / CSS (SCSS)

Demo / Code Get Hosting

Pure Css dropdown menu

Author

  • Sathish kumar

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

CSS Dropdown Menu

Author

  • Rlski

Made with

  • HTML / CSS

Demo / Code Get Hosting

Simple Pure CSS Dropdown Menu

Author

  • Connor Brassington

Made with

  • HTML (Pug) / CSS (SCSS)

Demo / Code Get Hosting

Dropdown Menus

Author

  • Kevin

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

Zigzag dropdown menu concept

Author

  • Catalin Rosu

Made with

  • HTML / CSS

Demo / Code Get Hosting

PureCss dropdown menu with following subnav

Author

  • Robert Borghesi

Made with

  • HTML / CSS (SCSS)

Demo / Code Get Hosting

Simple, CSS only, responsive menu

Author

  • John Urbank

Made with

  • HTML / CSS

Demo / Code Get Hosting

A simple Dropdown Menu

Author

  • Mike Rojas

Made with

  • HTML/Pug / CSS/SCSS

Demo / Code Get Hosting

The post 22+ CSS Dropdown Menus appeared first on csshint - A designer hub.

]]> 12 CSS Play/Pause Buttons https://csshint.com/html-css-play-pause-button/ Mon, 08 Nov 2021 11:40:40 +0000 http://csshint.com/?p=6764 Latest Collection of 100% free HTML and CSS play/pause button examples from Codepen. Play Button Author Luke Meyrick Made with HTML, CSS (SCSS) Demo / Code Get Hosting bouncing play button Author mi-ca Made with HTML, CSS, Javascript Demo / Code Get Hosting Related Articles Bootstrap snippets 12+ CSS 3D Button Design Example 10 HTML […]

The post 12 CSS Play/Pause Buttons appeared first on csshint - A designer hub.

]]> Latest Collection of 100% free HTML and CSS play/pause button examples from Codepen.

HTML CSS play pause button

HTML CSS play pause button


Play Button

Author

  • Luke Meyrick

Made with

  • HTML, CSS (SCSS)

Demo / Code Get Hosting

HTML CSS play pause button 2

HTML CSS play pause button 2


bouncing play button

Author

  • mi-ca

Made with

  • HTML, CSS, Javascript

Demo / Code Get Hosting

HTML CSS play pause button 3

HTML CSS play pause button 3


play button

Author

  • Ivan Villa

Made with

  • HTML, CSS(SCSS)

Demo / Code Get Hosting

play button

Author

  • Mahtamun Hoque Fahim

Made with

  • HTML, CSS

Demo / Code Get Hosting

neumorphism play button

Author

  • souravb786

Made with

  • HTML, CSS

Demo / Code Get Hosting

emircom play button animation

Author

  • Shivam Bale

Made with

  • HTML, CSS

Demo / Code Get Hosting

💛 Funky 💜 Play button

Author

  • Aurélien Grimaud

Made with

  • HTML, CSS(Sass)

Demo / Code Get Hosting

Play pause button

Author

  • Mikael Ainalem

Made with

  • HTML, CSS

Demo / Code Get Hosting

Flashing play button

Author

  • Da Vinci

Made with

  • HTML, CSS

Demo / Code Get Hosting

A play button animation

Author

  • Eric Brewer

Made with

  • HTML, CSS(SCSS), JavaScript

Demo / Code Get Hosting

Taylors play button

Author

  • Arnold Longequeue

Made with

  • HTML, CSS (SCSS)

Demo / Code Get Hosting

The post 12 CSS Play/Pause Buttons appeared first on csshint - A designer hub.

]]>