One-Sided Box-Shadows with CSS

July, 8 2018 in Web Design

Learn Front-End Development


The Basic Box-Shadow

When most people use box shadows, they use a shadow with three length parameters and a color value–usually a color in rgba or red, green, blue, and alphpa (the alpha channel being the opacity of the color). An example is something like the following:


<style>
.box {
width: 100%;
height: 200px;
background: #33FCFF;
border: none;
}

.box-1 {
box-shadow: 2px 3px 4px rgba(0,0,0,0.5); 
}
</style>


<div class="box box-1"></div>

Box-Shadow on One Side

The goal here is to achieve a more realistic box-shadow effect. In order to create a shadow that would, in theory, have a light source coming from a singular point, the shadow would need to only exist on one side of the box. For instance, the bottom of the box.

In order to accomplish this goal, we have to first understand the properties of CSS's box-shadow rule. The box-shadow rule accepts four length parameters and a color. The order of these is:

1. Horizontal offset
2. Vertical offset
3. Blur radius
4. Spread radius

When creating a box-shadow on one side only, we have to focus on the last value, the spread radius. The spread radius decreases the overall size of the box-shadow both horizontally and vertically. If you were to have a spread radius of -4px, the box's shadow would be reduced by 8 pixel–4 pixels horizontally and 4 pixels vertically. So, with this in mind, if we apply a negative spread radius whose absolute value is equal to the value of the blur radius, we would get a box shadow that is the exact same dimension as the element it is applied to. Therefore, if we apply a positive value to the elements vertical offset, we would get a shadow at the bottom of our box.


<style>                     
.box-2 {
box-shadow:  0 6px 4px -4px rgba(0,0,0,0.7); 
}
</style>                          

<div class="box box-2"></div>

Box-Shadow on Two Adjacent Sides

The goal here is to achieve a shadow on two adjacent sides of the box. In order to do this, we can either apply the basic shadow like in the first example on this page or we can do this with a slight variation to the box-shadow on one side as shown above.

For this effect, we don't want to shrink the shadow to account for blurring on both sides, but only one of the sides. Therefore, the spread radius will not have an opposite value as the blur radius, but will have half of that. The shadow will also need to be moved both vertically and horizontally, so both their values will need to be greater or equal to half of the blur radius as we want to make sure the shadow is hidden on the other two sides.


<style>
.box-3 {
box-shadow: 3px 3px 6px -3px rgba(0,0,0,0.7); 
}
</style>                          

<div class="box box-3"></div>

Box-Shadow on Two Opposite Sides

As of now, there isn't a great way to create a box-shadow on two opposite sides of the box. In order to accomplish this, we have to use the "Box Shadow on One Side" effect with two shadows.


<style>
.box-4 {
box-shadow: 5px 0 5px -5px rgba(0,0,0,0.7),
-5px 0 5px -5px rgba(0,0,0,0.7);
}
</style>                          

<div class="box box-4"></div>

Useful jQuery Tips and Tricks - Part 1

July, 8 2018 in Web Design

Learn Front-End Development


Check if an Element Has a Specific Attribute

This technique can be useful in many areas of front-end development. Using this technique, we can check whether a specific element in the DOM has an attribute or not. Remember, some browsers return 'false' while other browsers return 'undefined', so make sure you check for both.

Click Me


<script>
var hasAttr = $(this).attr('title');

// For some browsers, 'hasAttr' returns undefined; for others, 'hasAttr' is false.
if (typeof hasAttr !== typeof undefined && hasAttr !== false) {
alert('It has a title!');
}
else {

}
</script>


<a title='Does this element have a title'>Click Me</a>

Adding/Removing Classes on Hover

This technique is very useful, and we find that we end up using this at least once in almost every web design and development project we work on.

Hover over me!

<script>                     
$('.bg-grey').hover(function(){ 
$(this).addClass('text-purple');
},
function(){ 
$(this).removeClass('text-purple');
});
</script>                          

<div class="bg-grey"></div>

Click Once and Unbind Handler

This can be a very useful technique to use when you want to attach an event handler and unbind it immediately after the event has fired. For instance, say you want a user to click on an element and then have the element unbound by that click event. Use jQuery's 'one' function

Click Me


<script>
$('#one_click').one('click', function() {
alert('This can only happen once');
});
</script>                          

<a id='one_click'>Click Me</a>

AJAX – Load Section of a Page

AJAX is a revolutionary front-end development tool for making server request asynchronously. Sometimes, when we load a page, we want to only load a partial section of that page. In order to do this, use the URL followed by a space with a reference to the selector.

Click Me


<script>
$('#load_page').one('click', function(){
$("#load_here").load("path/ #load_this");
});
</script>                          

<a id='load_page'>Click Me</a>
<div id="load_here"></div>

Strategy for Broken Images

When operating large sites with countless images, there is a good chance that an image may be missing/broken somewhere throughout the site, meaning the path to that image does not exist for whatever reason. In order to fix this, we can do one of two things. We can either replace all broken/missing images with a standard 'missing image' image that lets users know that it is broken, or we can simply remove them from the DOM altogether.

We use AJAX for this technique and check for all broken images on document.ready. When looping through the images, we check for the existence of the image's src attribute. If the image's src attribute generates a successful response, we don't do anything at all, however, if the server responds with an error, we replace the image with the standard 'missing image' image as shown below.


<script>
$("img").each(function() {
var _this = $(this);
	
$.ajax({
url:$(this).attr('src'),
type:'HEAD',
async: false,
error:
function(e){
if (e.status == '404') {
$(_this).attr('src','path/to/image');
}
}
});
});
</script>                          


<img src='/path/to/broken/link'>