Categories
Code

How to Center a DIV with Flexbox

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

Categories
Code

Caret (Arrow) Symbol in CSS

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.

Categories
Code

HR with Centered Text

hr-text

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;
  }
}
Categories
Code

Center a DIV with Pure CSS

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

Centre DIV with CSS



  
    
    Center DIV
    
  
  
    
Center DIV
Categories
Code

Basic Modal Window Popup with Pure CSS

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

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;
}
Categories
Code

Create the Loading Dots Animation with CSS & Javascript

If you happen to a click a link pointing to the Apple apps store on your desktop, the browser opens a temporary web page with a message saying “Connecting to the Mac App Store..” and then redirects to the actual page. It tries to open the Apps Store or iTunes software on your desktop and while the program loads, the dots in the message animate indicating that a task is in progress.

These dots are animated using simple CSS and JavaScript. It runs in forever loop and in every iteration, the number of dots is incremented by 1 and resets at 3. So it goes from 0, 1, 2 and then back to 0, 1, 2 and so on.

Connecting to the Mac App Store.

Categories
Code

Text with Transparent Background in CSS HTML

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

Categories
Code

Black & White Image Turns Colored on Mouse Hover

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.

Categories
Code

Create Triangles in Pure CSS

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

CSS Triangles

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.

Categories
Code

Background Video with CSS

The YouTube Fan Fest website is a good example of a web page that uses background video to add life to an otherwise boring page. The HTML5 video autoplays in the background in a loop. The video is however hidden when the website is viewed on a mobile device and a static background image is used instead.

Here’s the HTML code:

 
    
  

The site uses CSS media queries to hide the video element on mobile devices (device width < 768 pixels).



Categories
Code

Facebook Blue Background in CSS

Our Facebook Page just touched the magical 150k mark and, to celebrate, I created a little page in HTML & CSS that has the Facebook Like button in the absolute center while the page background is filled with a blue gradient, very similar to the color scheme used in the official Facebook logo.

Facebook Like button on Blue Background
Facebook Like button on Blue Background

Here’s the code for styling the page:


.. and here’s the actual HTML that puts the LIKE button in the center of the blue Facebook page.


  
Categories
Code

Turn an Entire DIV into a Clickable Link

If you have been to a Pinterest like site that uses the grid masonry style layout, you may have noticed that one can hover over any region inside the box and its clickable.

A typical DIV is written using the following markup

Box Title

The Quick Brown Fox Jumped Over The Lazy Dog

Webpage URL

There’s a outer DIV and it has elements like the title, description and a link. The requirement is that when someone hovers their mouse over the DIV, it should point to the hyperlink that’s contained inside the DIV.

This can be done in two ways – using CSS or using jQuery.

The CSS approach – Make the Whole DIV clickable



Categories
Code

CSS Image Captions with Gradients and Transparent Backgrounds

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>



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 */
);
Categories
Code

Rounded Images with CSS Shadows

You can take any rectangular image and apply the following CSS style to transform that image into a circular one with drop shadows and borders without editing the original images.

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.


Categories
Code

CSS Box with Shadows

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec lorem ipsum. Integer non lorem urna. Nullam ornare mauris vel risus iaculis ullamcorper. Vivamus eros enim, vestibulum a sollicitudin vitae.

Phasellus et diam magna, quis tincidunt tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin est dolor, varius sit amet iaculis non, accumsan eget lectus. Nunc cursus posuere elit. Donec scelerisque tristique sem eu aliquet.

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.
Categories
Code

Simple CSS Based Buttons for Web Pages and Newsletters

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.

  
  
  
  
  
  
  
  
 
  
Categories
Code

Star Ratings in CSS and HTML

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>
Categories
Code

Use Google Chrome as a CSS Editor

Paul Irish of the Google Chrome team explains how you can use dev tools in Google Chrome to edit CSS files directly in the browser. This is very similar to Firebug in Firebox but Chrome also preserves a history of your CSS edits.

You’ll also learn how to use the JavaScript Console in Google Chrome.