CSS Tricks

Cool Wood Tile Backgrounds

Date: 02/28/2017, Author: Lostwake, Category: CSS Tricks

Here is the link, lots of images what are very high quality: http://www.mb3d.co.uk/mb3d/Wood_Exterior_and_Planks_Seamless_and_Tileable_High_Res_Textures.html

 

Found this site as well: http://www.texturemate.com/content/free-texture-seamless-metal-2010092601

Bootstrap Carousel That Fades Insteade of Slides

Date: 12/21/2016, Author: Lostwake, Category: CSS Tricks

Source: http://www.1squarepear.com/adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides/

Demo: http://www.1squarepear.com/_docs/bootstrap_carousel_fade.html

 

Make a normal bootstrap carousel and add this to your css code:

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

Un-Minify Your HTML, CSS, or Javascript

Date: 10/26/2015, Author: Lostwake, Category: CSS Tricks

Recently I needed to Un-minify some old code I had on a website because I did not have the original file. So I searched online and found this super cool website that does a very nice job.

The site is called: http://unminify.com/

Display Social Icons Using a Single Image and CSS Sprites

Date: 10/15/2015, Author: Lostwake, Category: CSS Tricks

First, get your Icon Image or use the one I am using for this blog:

Next, figure out the size of the icons on this image. The one above is 52px by 52px.

To make this work you will need to use the following css to get the icons.

Make An Entire Div Clickable

Date: 10/13/2015, Author: Lostwake, Category: CSS Tricks

I have come across this problem more than once so here is a simple solution to making an entire div clickable.