Centering a div element on a web page is easy with Flexbox. The element is centered both vertically and horizontally and the method uses no JavaScript.

Flexbox is supported in all modern browsers (including mobile) but if your site visitors are still using one of the older versions of Internet Explorer, the CSS approach may be better.

  
I am the center

C^ret is an online tool that helps you create a caret (or an arrow symbol) in pure CSS. The caret can be pointing in any direction, the border width, the color can be changed and the code is generated as you move the slider.

Here’s a snippet for a downward pointing arrow. For more, see lugolabs.com/caret.

This HTML/CSS snippet creates an HR element with text in the middle of the line. The text is supplied in the data-* attribute of the HR element.

  
You can divide with any text you like.
  
For instance this...
  

  
...this...
  

  
...even this!

body {
  text-align: center;
  background: #fcfcfa;
  color: #818078;
  font-family: Futura, sans-serif;
}

.container {
  max-width: 50%;  
  margin: 40px auto;
}

.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: .5;
  &:before {
    content: '';
    // use the linear-gradient for the fading effect
    // use a solid background color for a solid bar
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;

    padding: 0 .5em;
    line-height: 1.5em;
    // this is really the only tricky part, you need to specify the background color of the container element...
    color: #818078;
    background-color: #fcfcfa;
  }
}

This CSS Snippet will place the DIV at the centre of a page. The div is centered both horizontally and vertically without requiring any jQuery or JavaScript. Credit: RawCode.io

  
    
    
    
  
  
    

      Center DIV
    
  

This HTML link will open a modal popup that itself can be formatted using HTML and CSS. The modal window is written in pure CSS and requires no JavaScript or jQuery plugins.

The opacity of the Modal dialog is set to 0 (invisible) but the :target pseudo-class makes it visible with a lightbox style effect.

The HTML:

Open Modal

  

    close ×
    
CSS Modal
    
The quick brown fox jumped over the lazy dog.
  

The CSS:

.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}

The text would be barely visible if you color it white and place it on a background image that is predominantly white in color. You can however use CSS to add a transparent light-dark background between the text and the image and it would be perfectly visible.

Also see: Font Colors for Video Captions

The quick brown fox jumped over the lazy dog

You can use CSS to display a colored image as black & white on a web page and the image turned colored when someone hovers the mouse over the picture.

Here’s the HTML and CSS code.

You can create triangle in your HTML web pages in pure CSS without requiring any JavaScript or images.

This one creates an isosceles triangle pointing downwards. Should come handy for creating speech bubbles.

And here’s another CSS snippet that generates a right angle triangle.

You can combine 4 different-colored triangles and create a square box.

You can add a semi-transparent white on black caption to your images using simple CSS. The opacity of the caption background can be changed by modifying the alpha parameter in background-color’s rgba attribute.

<style>
.image {
  width:600px;
}
.image .black {
  position: relative;
  left: 0;
  bottom: 60px;
  width: 100%;
  padding: 10px 20px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid:DXImageTransform.Microsoft.gradient
          (startcolorstr=#7F000000,endcolorstr=#7F000000) 9;
 }
  
.image .black a { 
  color: white;
  font-size: 18px;
  text-decoration: none;
  outline: none;
  font-family:georgia;
}
  
.image .black .follow {
  margin-top: 5px;
  position: absolute;
  right: 10px;
  top:30px;
  font-size: 12px;
  font-family:verdana;
}

</style>


  
  

    
      Image Caption
    
    
      Image Credit →
    
  

Instead of transparent backgrounds, you can even have fading gradients that transition from black to white much like the lower thirds in videos. Add this snippet to the CSS.

background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, rgba(0,0,0,0.0)), /* Top */
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);

/* Gecko */
background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
);

To get started, simple replace the background-image URL in the DIV with your own image. Perfect for display the author photos in your blog’s sidebar. The height and width attributes of the .circle class may have to be adjusted based on the size of the profile image.

This is a live demo of a CSS box with shadows – it should render as expected in most modern browsers while it will display a standard 1px border in older browser.

This is the actual CSS and HTML code that renders the shadowed box – it is written in pure CSS3 and requires no images.

 

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Phasellus nec lorem ipsum. Integer non lorem urna. 
   Nullam ornare mauris vel risus iaculis ullamcorper. 
 

If you are looking to add simple CSS based buttons to your web pages or email newsletters, here are some ready-to-use styles for you.

The color palettes of these buttons are derived from popular websites like Google Plus, Gmail, Facebook, Dropbox, etc. The button have rounded corners but you can modify the border-radius property to change the roundness or remove the radius for flat buttons. Also, change the value of “href” attribute to point the button to any web page or mailto email address.

  

  

      
      Google Red with White Text
    
  

  

  

      
      Gmail Gray with Black Text
    
  

  

  

      
      Facebook Blue with White
    
  

  

  

      
      Google Blue Button
    
  

  

  

      
      Facebook Like Button
    
  

  

  

      
      Dropbox Blue Button
    
  

  

  

      
      Google Chrome Blue Button
    
  

  

  

      
      Windows Phone Red Button
    
  

 

  

      
      Amazon Yellow and Black
    
  

  

  

      
      Google Nexus Green Button
    
  

Looking to add star ratings to your web articles without image sprites? Here’s a sample CSS snippet that uses Data URIs to insert images as seen on the Chrome website.

<style type="text/css">
  .star {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAQAAADI+WwIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAACXZwQWcAAAALAAAACgCF+qVAAAAAhUlEQVQI103NMQqCABgF4C+Fxg7QHDQ0JkFnaKqlKJBu4Np9hEDoBq2doCYP0B4UBKLYUKZvex+P/+9N/dJ3FXl9S9CopbF9U1pOkAgb3irVanOMlGqldeBoo9CmspMFOFmp/hzLmtuXzvrWvpwJFVJvLLqci8Qmzl8OhzBwcMdD6ilXfwAd9B9f78yTCQAAAABJRU5ErkJggg==);  
  }

  .unstar {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAQAAADI+WwIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAACXZwQWcAAAALAAAACgCF+qVAAAAAo0lEQVQI1z2NMQrCQBRE32YxGFDwBGJnYZkll0ilpDISLO28k4lFwN7CTsTKSisbK8ELCJFI/BZJdn41j/kzSqiVuZ3r1yzeAAanoajpcOwsW2dxf+0yWGe6CaVzNmgY4VHyQKAiVsIlUlvc9otK4lXugNnJjKqlkpi86X6exIZfNztZBGhKUgr4hBZ3A3UX4ye/CYdeWHch7MOzJ9R3jFLt8we7izGyoi32iQAAAABJRU5ErkJggg==);
  }

  .half-star {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAQAAADI+WwIAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAJdnBBZwAAAAsAAAAKAIX6pUAAAACTSURBVAjXTY0xCsJAEEVfdiEgpPAWFpYTvMRWSioDwdIuh7GydbEIeAM7sU1lo42tR1CEdSzMJk4178H/H7qTVK4+A0URTNTMmZhVhEHXMK69/UEiS3Z0sOGOQqBMQAr2pABbgKDlujHQHlgQYpdWeRO7z/0Cj8swOcPyxvOEl/vXN/K2+kw5Zq4PipNR/E+Ft8IX7yMjsFUGo0cAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAAElFTkSuQmCC);
  }

  .rating {
    float: left;
    width: 11px;
    height: 10px;
  }
</style>

CSS Star Ratings

That’s the basic CSS style. The .rating class properly aligns the individual stars while the .star and .unstar classes render the stars. For example, if you are display a rating of 3.5 out of 5 stars, the corresponding HTML code would be:

 <span class="rating star"></span>
 <span class="rating star"></span>
 <span class="rating star"></span>
 <span class="rating half-star"></span>
 <span class="rating unstar"></span>