When building a website it's all in the details. Adding custom fonts, borders and backgrounds can create a cohesive look throughout the site. You can even take your customization a bit further by making these elements color-changing to fit your carefully thought-out color scheme. Making elements color-changing on your website is surprisingly easy using CSS. There are two main parts to creating a color changing element including the element you're applying the animation to and the @keyframes rule. This CSS tutorial will give you an overview on how to create color-changing elements throughout your website.

Here's how to create color-changing fonts, borders and backgrounds using CSS:

Let’s say we want to apply the animation to a list of items, like so:

In this example we're going to be applying a different type of animation to each <li> element: the font color, border color, and background color. We'll need to create a different animation for each.

Let's break that down.

1. First, we gave the animation a name (Font, Border, Background, whatever you want to call it. It can be anything!).

2. Then we gave the animation a duration, in this case 15 seconds. This is how long it will take the animation to go from start to finish.

3. Next, we've specified a number of iterations, the number of times we want the animation to play (in this case, infinite).

4. Last, we gave a direction, which can be either alternate or reverse. This determines in what order the animation plays.

Adding colors to elements using CSS

Let's make our @keyframes rule for the first <li> element.

Awesome, right? Let's go through the different parts.

1. @webkit-keyframes Font - Here, "Font" is what we named our animation earlier.

2. Percentages and colors - These determine what state the animation will be in at at certain times. At 0% (the beginning), the font color will be the color crimson. It will then shift to orange at 20%, then goldenrod at 40%, and so on. The percentages can increase by any interval, I just happened to choose 20%.

Creating color-changing elements with CSS

Now for the other two. The only things we need to change are the animation names and the CSS styles.

And that's it! Now you can add a bit of pizazz and have color-changing elements on your website! There are a ton of other cool things you can do with animations, too that can really give your website dimension. However, make sure you pick and choose what animations will have the greatest impact on the design of your website so that you don't clutter your content. What are some of your favorite CSS animations to use in your web design? 

Using photos on a website is a great way to create credibility and connect users emotionally to your brand. You can now take it a step further and ensure the photos on your site have a similar look and feel without the need for Photoshop or Instagram filters. CSS image filters allow you to change the look and feel of your photos by simply making changes within your CSS file.

How important is it that your website photos are aesthetically similar? Any Instagram expert will tell you one of the best ways to gain followers is by establishing a ‘look’ to your posts. Accounts with consistent color themes attract and engage more users than those without. Even if Instagram isn’t a part of your brand strategy, you can still implement this idea on your website by using CSS image filters on your photos.

Here's How to Set CSS Image Filters on Your Website Photos

First, we’ve set up a page with a grid of photos using the following html:

<div class="content">
<img alt="" src="photo-1.jpg" />
<img alt="" src="photo-2.jpg" />
<img alt="" src="photo-3.jpg" />
<img alt="" src="photo-4.jpg" />
<img alt="" src="photo-5.jpg" />
<img alt="" src="photo-6.jpg" />
</div>

We’ll then set up our images to have a little space between them using margins:

.content img {
    margin: 3px;
}

These photos are great as-is. They follow a consistent theme and have similar lighting but let’s say we want to change the look of the images. We can use the CSS image filters property to change all the images in my grid to look completely different. In this case, I want to see how all of my images look as gray scale images using the following code:

.content img {
    filter: grayscale(100%);
    margin: 3px;
}

I use the function ‘grayscale’ set at 100% to completely desaturate my images.

I can take it a step further and add multiple filters to my photo. In this case I’ll bump up the contrast to make the shadows stand out and decrease the brightness to make my whites a slightly darker shade.

.content img {
    filter: grayscale(100%) contrast(170%) brightness(95%);
    margin: 3px;
}

If I wanted to add a little more color to my photos, I can decrease the value of my gray scale to 60%.

.content img {
    filter: grayscale(60%) contrast(170%) brightness(95%);
    margin: 3px;
}

I can even use CSS image filters to add a color filter to my images, further enhancing my look and feel. To do this, I need to add a parent element to my images in my html file.

<div class="content">
    <div class="photo"><img src="photo-1.jpg" /></div>
    <div class="photo"><img src="photo-2.jpg" /></div>
    <div class="photo"><img src="photo-3.jpg" /></div>
    <div class="photo"><img src="photo-4.jpg" /></div>
    <div class="photo"><img src="photo-5.jpg" /></div>
    <div class="photo"><img src="photo-6.jpg" /></div>
</div>


Next, I apply my CSS image filters to the parent element and set them to display 'inline-block' and change the position to 'relative'.

.content .photo {
    display: inline-block;
    filter: grayscale(60%) contrast(170%) brightness(95%);
    margin: 3px;
    position:relative;


I’ll use the pseudo element ‘before’ to add the filter color to my image:

.content .photo::before {
    background: rgba(224, 138, 157, 0.23);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


Now all of my images are slightly desaturated, have high contrast, and a warm, rosy hue overlaying them.

The Take Away

Creating your own look and feel for the images on your website is as easy as updating your CSS file. Having a similar color theme applied to the images in your website layout will be visually engaging for users. There are many ways to apply CSS image filters to your photos including using sepia, inverting your colors, and changing the hue. You can learn more about these filters here:

• https://css-tricks.com/almanac/properties/f/filter/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Beacons are small physical devices that broadcast wireless signals to mobile apps which can then react accordingly. In short, your mobile app will know when your phone moves closer to or further away from a beacon that is stuck on a wall (or anywhere else).

The term "beacon" is commonly used to refer to both the physical device itself as well as the technology standard and protocol that is used to communicate with them.

Beacons explained in 3 points

1. Each beacon transmits tiny wireless signals using a Bluetooth Low Energy (BLE) radio.
2. Smartphones are constantly scanning for these beacon signals. If your phone detects a nearby signal it can launch an app on your phone that responds accordingly.
3. Apps can display content relevant to your physical location, or update a display on the wall. For example, when you walk into a restaurant your phone could automatically display the current drink specials. Or, if you walk near a product in a store your phone could trigger a display on the wall to show you more detailed product information.

A beacon next to an iPhone 5s

Support for beacon technology is built-in to both iOS and Android. The "iBeacon" name was coined by Apple (but is also supported on Android) and Google is backing the "Eddystone" variation, but both are really just brand names for the underlying Bluetooth Low Energy (BLE) protocol used for communication. There are technical differences between iBeacon and Eddystone, but for the most part they operate the same way and both can be supported in a single app.

Hands-On Example of Beacons

Let's build a quick iOS mobile app that can "listen" for a beacon and display basic information like in/out of range and approximate distance from the beacon. These are the basic building blocks you'll need to build a more full-featured mobile app.

Here's what it will look like when we're done:

Our completed demo app on iOS

If you'd like to download the completed app, you can grab it from Github, otherwise, read on!

Requirements

1. At least 1 Beacon. Estimote beacons are very popular, and that's what we'll be using in this example.
2. An iOS device that supports Bluetooth 4.0 (iPhone 4S or later, iPad 3rd-gen or later). 
3. Recent version of Appcelerator Titanium SDK (5.5.1 as of this writing) and Appcelerator Studio.
4. Laptop with recent version of Mac OSX and Xcode installed

Create a new Titanium Alloy app

$ appc new -t titanium

Replace your index.xml with

<Alloy>
    <Window class="container" layout="vertical" top="40">
        <View layout="horizontal" height="35" width="98%">
            <Label>Monitoring</Label>
            <Switch id="monitoringSwitch" left="4" value="false" onChange="toggleMonitoring"/>
            <Button left="100" onClick="clearLog">Clear Log</Button>
        </View>
        <View layout="horizontal" height="SIZE" width="98%">
            <Label id="beaconLabel"></Label>
        </View>
        <ScrollView width="98%" height="FILL" backgroundColor="white">
            <Label id="label" width="FILL" height="SIZE"></Label>
        </ScrollView>
    </Window>
</Alloy>

Replace your index.tss with

".container": {
    backgroundColor:"white"
}
 
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}
 
"#label": {
    font: {
        fontSize: 12
    }
}
 
"#beaconLabel": {
    width: Ti.UI.FILL,
    height: Ti.UI.SIZE,
    font: {
        fontSize: 11
    }
}

Replace your index.js with

var TiBeacons = require('org.beuckman.tibeacons');
 
$.beaconLabel.text = "Beacon: " + Alloy.CFG.beacon.uuid + "\nMajor: " + Alloy.CFG.beacon.major + "\nMinor: " + Alloy.CFG.beacon.minor;
$.label.text = "Flip the switch to start monitoring for the Beacon";
monitorStartTimestamp = null;
 
Ti.Geolocation.requestLocationPermissions(Ti.Geolocation.AUTHORIZATION_ALWAYS);
 
function onEnterRegion(e) {
  Ti.API.info('ENTER region: ' + JSON.stringify(e));
  print('[Enter]');
 
  TiBeacons.startRangingForBeacons(e);
}
 
function onExitRegion(e) {
  Ti.API.info('EXIT region: ' + JSON.stringify(e));
  print('[Exit]');
 
  TiBeacons.stopRangingForBeacons(e);
}
 
function onDeterminedRegionState(e) {
  Ti.API.info('DETERMINED region: ' + JSON.stringify(e));
 
  print("[RegionState] " + e.regionState);
}
 
function onBeaconRanges(e) {
  Ti.API.info('RANGES: ' + JSON.stringify(e));
  if(e.beacons && (e.beacons.length > 0)) {
    print('[Range] ' + e.beacons[0].proximity);
  }
}
function onBeaconProximity(e) {
  Ti.API.info('PROXIMITY: ' + JSON.stringify(e));
  print('[Proximity] ' + e.proximity + "(" + e.fromProximity + ", " + e.accuracy + ", " + e.rssi + ")");
}
 
function toggleMonitoring() {
 
  if ($.monitoringSwitch.value) {
    monitorStartTimestamp = new Date();
    print("START monitoring and ranging");
    TiBeacons.startMonitoringForRegion({
      notifyEntryStateOnDisplay: "YES",
      uuid: Alloy.CFG.beacon.uuid,
      major: Alloy.CFG.beacon.major,
      minor: Alloy.CFG.beacon.minor,
      identifier: "Estimote"
    });
  } else {
    print("STOP monitoring and ranging");
    TiBeacons.stopMonitoringAllRegions();
    TiBeacons.stopRangingForAllBeacons();
  }
}
 
function clearLog() {
  $.label.text = "";
}
 
function print(s) {
  var now = new Date();
  var secondsPassed = ((now - monitorStartTimestamp) / 1000);
  var padding = "0000";
  $.label.text = (padding + Math.round(secondsPassed)).slice(-padding.length) + "s    " + (s + "\n") + $.label.text;
}
 
TiBeacons.addEventListener('bluetoothStatus', function(e){
  Ti.API.info('bluetoothStatus = ' + JSON.stringify(e));
});
 
TiBeacons.addEventListener("enteredRegion", onEnterRegion);
TiBeacons.addEventListener("exitedRegion", onExitRegion);
TiBeacons.addEventListener("determinedRegionState", onDeterminedRegionState);
 
TiBeacons.addEventListener("beaconRanges", onBeaconRanges);
TiBeacons.addEventListener("beaconProximity", onBeaconProximity);
 
 
TiBeacons.requestBluetoothStatus();
$.index.open();
 
if (!Ti.Geolocation.locationServicesEnabled) {
  alert('Please enable location services');
}

Update your config.json

For our demo we'll only be concerned with monitoring a single beacon. Edit your config.json file and enter the details of your beacon's UUID, major and minor versions. If you're using Estimote beacons you can find this information using the Estimote mobile app, or by logging into your account at https://cloud.estimote.com.

"global": {
  "beacon": {
    "uuid": "B9407F30-F5F8-466E-AFF9-25556B57FE6D",
    "major": 61020,
    "minor": 26147
  }
}

Download and install the TiBeacons module into your titanim project

The TiBeacons module provides the bridge between Titanium and the underlying beacon framework in iOS.

Download the ZIP and extract it into your project's modules folder.

Update your tiapp.xml file

We need to add a reference to the TiBeacons module:

<modules>
    <module platform="iphone">org.beuckman.tibeacons</module>
</modules>

We also need to add a few things to allow our app to use location services in iOS:

<ios>
  <plist>
    <dict>
      <key>UIBackgroundModes</key>
      <array>
          <string>location</string>
          <string>bluetooth-central</string>
      </array>
      <key>NSLocationAlwaysUsageDescription</key>
      <string>
          We use low-energy Bluetooth and iBeacons devices to provide relevant information to you.
      </string>
    </dict>
  </plist>
</ios>

Deploy to your iOS device

You'll need a real device to test this app, since beacons can't be tested using the iOS simulator at the moment. This means you'll need a valid Apple Developer account, certificate, and provisioning profile with your device's UUID.

Assuming you have all the certs and profiles in order, connect your phone and deploy the app using Appcelerator Studio.

As you walk around you should see the screen update frequently with the status of your beacon. It will show enter/exit events when you go in and out of range of the beacon. As you move around you should see the range change between unknown, far, near, and immediate.

NOTE: It can take up to 30 seconds for your phone to recognize that you are "out of range" of a beacon (and display the "exit" event). This is due to the beacon protocol itself, and cannot be adjusted. It's done this way to prevent false-positives (e.g. if the beacon signal is temporarily blocked but you are still in range)

Further Reading

• Estimote has a ton of great information on their site. You can also buy beacons from them, download their SDKs, and read more about beacon technology in general and how it can be used.
• Apple's iBeacon
• Google's Eddystone (open beacon format)
• Bluetooth low energy beacons (Wikipedia)