Flex – Vertical Centering

Need a good method to vertical centre elements, then look no further, flex is the way!

There are other techniques that do work for vertical centring such as using table and table-cell with the good old vertical-align: middle, but they never seem to work when you need them.

The current landscape of vertical centring options ranges from negative margins to display:table-cell to ridiculous hacks involving full-height pseudo-elements. Yet even though these techniques sometimes get the job done, they don’t work in every situation. What if the thing you want to centre is of unknown dimensions and isn’t the only child of its parent? What if you could use the pseudo-element hack, but you need those pseudo-elements for something else?

With Flexbox, you can stop worrying. You can align anything (vertically or horizontally) quite painlessly with the align-items, align-self, and justify-content properties.

Unlike some of the existing vertical alignment techniques, with Flexbox the presence of sibling elements doesn’t affect their ability to be vertically aligned.

The HTML


<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

The CSS


.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

And there you have it, vertical centre? No problem now.

It’s good to share

CSS Media Queries for Standard Mobile Devices

A major component of responsive design is creating the right experience for the right device. With that many different devices on the market, this can be a large task. We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

You may think that you should never base your breakpoints on devices, and this is a fair point; Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control and so here are mobile specific media queries you can use to target particular devices:-

Phones and Handhelds

iPhones


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Galaxy Phones


/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

Google Pixel


/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

HTC Phones


/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

Windows Phone


/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) {

}

/* Portrait */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px)  
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) 
  and (orientation: landscape) {

}

Tablets

iPads


/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

Galaxy Tablets


/* ----------- Galaxy Tab 2 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* ----------- Galaxy Tab S ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

Nexus Tablets


/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* ----------- Nexus 9 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

Kindle Fire


/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

It’s good to share

Line On Sides – Headers –

Today I will show you how to create a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centered text. An easy thing to mock up as image, but a much more difficult thing to pull off in CSS because of the variable nature of text (length, size, etc).

If the background was a solid color, this would be fairly easy. Apply the lined background to the subhead and center a span in the middle with a bit of padding and a background color to match the solid background. We don’t have a solid background color here. Perhaps some trickery using the same background image but fixing the background position would work, but I didn’t go there.

Instead, I used the ::before and ::after pseudo elements to create the left and right set of lines. The text is still in a span, which is relatively positioned. The right set is a pseudo element on that span which starts 100% from the left with a bit of margin to push it away, and vice versa for the left set. Both are of a fixed height and use border-top and border-bottom to create the lines. Thus no backgrounds are used and the insides of everything is transparent.

The length of the lines is long enough to always break out of the parent container, and they are cut off by hidden overflow on that parent.


.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

It’s good to share

How to change the Bootstrap Navbar Breakpoint

Have you ever wanted to change the default Bootstrap navbar breakpoint? I’m sure you’re probably here because either your navbar collapse is either happening too soon (at to wide of a screen width), or too late (where the navbar links start to wrap at wider widths).

By default, Bootstrap collapses (vertically stacks) the navbar at 768px. You can easily change this threshold using a simple CSS media query. For example, here we change the breakpoint threshold to 992 pixels, causing the navbar to collapse sooner.

<code class="language-CSS">
@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}

Here is a demo on JSFIDDLE.

Older Versions

If you're using a version of Bootstrap before 3.1 then this is the code you will need to change the navbar breakpoint:-

<code class="language-CSS">
@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Here is a demo on JSFIDDLE.

Bootstrap 4

Bootstrap 4 is still in the beta versions, and provides classes to make changing the navbar breakpoint easier. Now the Bootstrap 4 navbar breakpoint can be changed using the navbar-toggleable-* classes. Use the hidden-* utility classes to show/hide the toggle button.

For example, here's a navbar that collapse at the small screen (sm) breakpoint of 768 pixels. Notice the navbar-toggleable-sm class in the collapsing DIV.

<code class="language-HTML">
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> ☰ </button> <a class="navbar-brand" href="#">Navbar sm</a>
    <div class="collapse navbar-toggleable-sm" id="collapsingNavbar2">
      <ul class="nav navbar-nav">
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
      </ul>
      <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
      </ul>
    </div>
  </div>
</nav>

Here is a demo on JSFIDDLE.

It’s good to share

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here.

Today we are going to show you an easy way to do this, this solution will achieve the following:-

formatting-lists

The reason this is happening is because the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a JSFIDDLE of the above in action.

It’s good to share

Replace an image in an using CSS

Today we are going to show you a nice little feature using CSS box-sizing as an image replacement technique.

I stumbled across this when I was asked to replace an on of the sites we built with another image hosted elsewhere. Sounds easy right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.

Okay so let’s say we have the following HTML:-


<head>
  <title>Your Page Title</title>
</head>
<body>
  <!-- .header would be across site on other pages with different children, so no background image adding -->
  <div class="header">
    <img class="banner" src="//exampledomain.com/banner.png">
  </div>
</body>

This is simple to do with JavaScript, but I wanted to see if there was another, more simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.


/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://exampledomain.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

It worked perfectly and here are some reasons why:-

  • It works on just about any element, even empty ones like or

  • Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+) http://caniuse.com/#feat=css3-boxsizing
  • Refrains from using SEO unfriendly display: none or other properties

That last point seemed important, as it works really well for text replacement too without any adjustment.

It’s good to share

How to create a scroll down animation icon using CSS

So you have seen on websites that typically have a full screen header with an indicator to scroll down to view the rest/more of the content, if your here you probably already have and your on the lookout for a nice way to represent this. Well you have come to the right place. In today’s tutorial we have a scroll down icon created as an SVG using just HTML & CSS and it look’s pretty awesome if I do say so myself.

Here is a JSFIDDLE of what we are going to be creating.

So let’s being:-

HTML


<div class="scrolldown-wrapper">
	<div class="scrolldown">
		<svg height="30" width="10">
			<circle class="scrolldown-p1" cx="5" cy="15" r="2" />
			<circle class="scrolldown-p2" cx="5" cy="15" r="2" />
		</svg>
	</div>
</div>

CSS


body {
  background: #000;
}

/* Scroll Down */

.scrolldown-wrapper {
	left: 50%;
	position: absolute;
	text-align: center;
	bottom: 0;
	transform: translate(-50%, -50%);
}
  
.scrolldown {
	border: 2px solid #FFFFFF;
	border-radius: 30px;
	height: 46px;
	margin: 0 auto 8px;
	text-align: center;
	width: 30px;
}

.scrolldown-p1,
.scrolldown-p2 {
	animation-duration: 1.5s;
	animation-name: scrolldown;
	animation-iteration-count: infinite;
	fill: #FFFFFF;
}
  
.scrolldown-p2 {
	animation-delay: .75s;
}

@keyframes scrolldown {
	0% {
		opacity: 0;
		transform: translate(0, -8px);
	}
	50% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 8px);
	}
}

If you want to adjust the positioning of the icon, simply edit the .scrolldown-wrapper class and adjust the bottom position (e.g. changing bottom: 10%; will move the icon 10% of the viewport height from the bottom).

You can also adjust the speed of the animation by adjusting either .scrolldown-p1 or .scrolldown-p2 classes.

Pretty simple and lightweight right?

Any questions feel free to drop us a comment.

I hope you’ve enjoyed today’s tutorial.

It’s good to share

How to create a responsive Pinterest style layout with CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). I really love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


<div class="container">
	<div id="list" class="section">
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 26em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 18em;"></div>
		<div class="item" style="height: 16em;"></div>
		<div class="item" style="height: 12em;"></div>
	</div>		
</div>

CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

It’s good to share

CSS – Offsetting a HTML anchor point

If you’ve ever used anchors in HTML pages you probably already know what the issue is. Sometimes when you add an anchor point above the div you want it to scroll down to, when you click the link you quite often find it’s cutting off some of the section you want to have within the viewport. You can use jQuery or JavaScript to resolve this issue but I find using a small amount of CSS does the job!

Okay so here is the super easy solution, first add a class to your link:-


<a class="anchor" id="top"></a>

You can then position the anchor and offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -200px will position the anchor up 200px:-


a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}

And there you have it, you now have control of the anchor point scroll to position, just tweak the ‘top’ attribute to suit your needs!

It’s good to share

How to build a custom Countdown Timer is JavaScript [coming soon page]

Have you ever seen the countdown timers to a specific date on a ‘Website Coming Soon’ page, or a countdown to an upcoming event? You know, the one’s that update every second until it reaches the ‘deadline’. Well in this tutorial we are going to show you how to make the following:-

countdown-timer

Or you can see a working JSFIDDLE here.

So here we go:

HTML


<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

CSS


body {
  text-align: center;
  background: #169fe6;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #FFFFFF;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv {
  font-family: sans-serif;
  color: #FFFFFF;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div {
  padding: 10px;
  border-radius: 3px;
  background: #3f72a3;
  display: inline-block;
}

#clockdiv div > span {
  padding: 15px;
  border-radius: 3px;
  background: #FFFFFF;
  display: inline-block;
}

.smalltext {
  padding-top: 5px;
  font-size: 16px;
}

#clockdiv span {
   color: #1a1a1a;
}

JavaScript


function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date('12/25/2016');
initializeClock('clockdiv', deadline);

It’s good to share