CSS – N77 Design | NickClaeboe.com https://www.nickclaeboe.com Atlanta Web, Graphic & Flyer Design • Design Portfolio & Rates for Nick Claeboe Custom Design Work Wed, 03 Mar 2021 15:29:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://www.nickclaeboe.com/wp-content/uploads/2016/05/favicon-60x60.png CSS – N77 Design | NickClaeboe.com https://www.nickclaeboe.com 32 32 Learn Flexbox CSS Layout https://www.nickclaeboe.com/2020/06/08/learn-flexbox-css-layout/ Mon, 08 Jun 2020 11:47:58 +0000 http://www.nickclaeboe.com/?p=8816 Flexbox is AMAZING! As you might imagine based on its name, it’s very flexible. In a nutshell, flexbox is a css layout framework for displaying and positioning parent elements and their children.

Flexbox can be a bit intimidating at first, but like most new things, the more you use it, the easier it gets.

The most challenging part of flexbox for me was getting the containers and flex items straight, but as soon as you do, it’s endless possibilities for your page layout and design. One of the very best resources I’ve found to reference flexbox, is css-tircks.com complete guide to Flexbox.

I’ve been using Flexbox more and more in my daily design and loving it.

Also, check out W3C Candidate Recommendation on CSS Flexible Box Layout Module Level 1

]]> Smooth Scrolling CSS jQuery Trick Hack Code Tutorial https://www.nickclaeboe.com/2016/07/04/smooth-scrolling-css-trick-hack-code-tutorial/ Mon, 04 Jul 2016 20:13:04 +0000 http://ec2-54-186-150-17.us-west-2.compute.amazonaws.com/?p=369

While coding websites for several different clients, I’ve repeatedly had the need to a smooth scroll anchor function. Through several hours of searches and digging, I found something, that was actually in a comment somewhere, that executed the scroll function perfectly. Just a few lines of code and viola! It’s very light weight and uses a bit of css and jquery.

Place the code below right before the closing head tag “</head>”

<!-- SMOOTH SCROLL PLACE IN HEAD -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<!-- End of SMOOTH SCROLL -->

And now with the following code, place it just after the opening <body> tag.

<body>
tag ==> <div name="top"> </div>
<p>somethings</p>
ANCHOR LINK ==>    <a href="#top"> Go to top </a>

Try it out for yourself and enjoy the results.

]]> How to build a spam-free contact form without captchas https://www.nickclaeboe.com/2014/06/28/how-to-build-a-spam-free-contact-form-without-captchas/ Sat, 28 Jun 2014 21:16:59 +0000 http://dev.nickclaeboe.com/?p=155

This is a great tutorial I’ve used to fight back again spam on some of the website that I design. Most site use a captcha system to deter spam but that can kill your conversions sometimes. With the method in this tutorial, you can set up a spam-free contact for without captchas. It uses simple css, javascript and html. You’ll need to have a basic understanding of all three of these to complete this tutorial.

How to build a spam-free contact form without captchas: Read More…

]]>