CSS Snippets

Example - Using Background Gradients

These add a nice touch to the design of certain elements.

(1) Gradient Example (to bottom)

100

(2) Gradient Example (to right)

100

(3) Gradient Example (Using More than 2 Colors)

100

You can see how this adds something extra to the design, making it more visually dynamic.

Code Box:



HTML:

(1) Gradient Example (to bottom)
<div class="gradient-example">100</div>

(2) Gradient Example (to right)
<div class="gradient-example-2">100</div>

(3) Gradient Example (Using More than 2 Colors)
<div class="gradient-example-more-colors">100</div>



CSS:

<style>
.gradient-example, .gradient-example-2, .gradient-example-more-colors{
    background: linear-gradient(to bottom, #354c69, #002757);

    width:25%;
    min-height:100px;
    
    padding:20px;
    padding-top:7%;
    
    border-radius:3px;
    
    font-size:35px;

    text-align:center;
    

    border-color:red;
    color:white;
    
    box-shadow: 0 8px 6px -6px black; /* 1 side only shadow */
    
    margin: 0 auto;
}

.gradient-example-2{
    background: linear-gradient(to right, #354c69, #002757);
}

.gradient-example-more-colors{
    background: linear-gradient(to top, gray, lightgray, lightgray, white);
    color: black;
}
</style>

Example - Using Box Shadows

These add a nice touch to the design of certain elements.

(1) Outer Drop Shadow Example

100

(2) Inner Drop Shadow Example

100

They add an accent to the element that gives it a soft shadow that looks great.

Code Box:



HTML:

(1) Outer Drop Shadow Example:
<div class="box-shadow-example-circle">100</div>

(2) Inner Drop Shadow Example
<div class="box-shadow-example-circle-inner">100</div>



CSS:

<style>
.box-shadow-example-circle, .box-shadow-example-circle-inner{
    
    box-shadow: 3px 3px 5px 6px #ccc;

    width:35px;
    border-radius:50%;
    padding:20px;
    font-size:20px;
    position:relative;
    display:inline-block;
    top:-2px;
    left:0px;
    margin-left:20px;
    margin-right:10px;
    border-color:red;
    background:darkred;
    color:white;
}

.box-shadow-example-circle-inner{
    box-shadow: inset -3px -2px 14px #ffffff;
}
</style>

Example - Pure Css Tooltip

This css tooltip can have anything in it. Text, Images, Anything.

A Text Only Tooltip:

HOVER OVER ME (Text Tooltip)

An Image Tooltip:

HOVER OVER ME (Image Tooltip)

It is versatile so you can use it whenever you need something like this.

Code Box:




HTML:

<div class="your-class-here tooltip-trigger" style="">
<h3>Some thing can go here</h3>
  <div class="tooltip-content">
    <p style="width:100px;">A text tooltip here / Image tooltip below:</p>
    <img src="images/blank-image.jpg" alt="Tooltip Image" style="width:100px;height:auto;">
  </div>
</div>




CSS:

<style>
/* pure css tooltip - html content */

.tooltip-trigger {
  position: relative;
  display: inline-block;
}
.tooltip-trigger p{
    color:white;
}
.tooltip-content {
  position: absolute;
  top: 80%;
  left: 50%;
  
  min-width: auto; /* optional */
  min-height:auto; /* optional */
  
  color: white;
  font-size:16px;
  line-height:16px;
  
  transform: translateX(-50%);
  
  padding: 10px;
  
  background-color: #333;
  border-radius: 4px;

  opacity: 0;
  visibility: hidden;
  
  transition: opacity 0.2s, visibility 0.2s;
  
  z-index: 999;
}
.tooltip-content p {
    color:white;
    margin: 2px 0;
}

.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* set opacity to 1 to troubleshoot tooltip location */
.tooltip-trigger .tooltip-content {
  opacity: 0;
}
</style>


- NOTES -

FOR POSITIONING:
Replace "your-class-here" (below) with the class you will use to better position
the width of your inner tooltip html.
< - notes ->