Box Shadow Generator Using Angularjs - Open Source Tools
close
Box Shadow Generator Using Angularjs - Open Source Tools

Box Shadow Generator Using Angularjs - Open Source Tools

Box Shadow Generator Using Angularjs - Open Source Tools

Hello and welcome gyz today we are going to make an app using javascript and angularjs library.

This tool will help you to generate box shadows according to your requirements with simple slider you can make and customise shadows. You will get live preview and code generated in real-time.

How are you designers today we are going to build Box Shadow Generator Using Angularjs

As you know the HTML directory is vital for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.


Create New directory because we are going to work in that directory give it a name Box Shadow Generator Using Angularjs and save all the files in it as they are said in the steps below.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
http://cdnjs.cloudflare.com/ajax/libs/angular.js

Save It As Box Shadow Generator Using Angularjs/index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="css/style.css"><div ng-app="boxShadow" ng-controller="ShadowGenerator"><header><div><span>box-shadow</span>{{updateCSS().replace('box-shadow','')}}</div></header><div class="content"><aside class="controls"><div class="form-control"><label>x-offset: {{xOffset}}px</label><input type="range" min="-50" max="50" ng-model="xOffset" /></div><script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script><script  src="js/index.js"></script> 
In the html code provided some attributes are used that are not html attributes basically that attributes are for angularjs library to get and give results.
Without CSS our this script (Box Shadow Generator Using Angularjs) will never look angelic. So here we are, our HTML directory is ready now we have to customize our HTML and it can be done using CSS.

So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Box Shadow Generator Using Angularjs/css/style.css :

*{box-sizing:border-box}body{font-family:Arial, sans-serif;background-color:#242930;color:#fff}header{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;background-color:#242930;font-size:1.2em;height:100px;border-bottom:1px solid #343434}header span{color:#FF5722}.content{max-width:960px;margin:0 auto}.controls{padding:20px 10px;float:left;width:35%}.result{display:flex;align-items:center;justify-content:center;position:relative;top:-100px;z-index:1;min-height:100vh;float:left;width:65%;background-color:#fff;color:#242930}.victim{width:150px;height:150px;background-color:#FF5722}input[type=range]{-webkit-appearance:none;width:100%;margin:8px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d;background:rgba(92, 92, 92, 0.78);border-radius:25px;border:1px solid rgba(0, 5, 0, 0.44)}input[type=range]::-webkit-slider-thumb{box-shadow:0px 0px 0px #5c5c5c, 0px 0px 0px #696969;border:1.1px solid #00001e;height:20px;width:20px;border-radius:50px;background:#fefefe;cursor:pointer;-webkit-appearance:none;margin-top:-9px}input[type=range]:focus::-webkit-slider-runnable-track{background:rgba(191, 191, 191, 0.78)}input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d;background:rgba(92, 92, 92, 0.78);border-radius:25px;border:1px solid rgba(0, 5, 0, 0.44)}input[type=range]::-moz-range-thumb{box-shadow:0px 0px 0px #5c5c5c, 0px 0px 0px #696969;border:1.1px solid #00001e;height:20px;width:20px;border-radius:50px;background:#fefefe;cursor:pointer}input[type=range]::-ms-track{width:100%;height:4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:rgba(0, 0, 0, 0.78);border:1px solid rgba(0, 5, 0, 0.44);border-radius:50px;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d}input[type=range]::-ms-fill-upper{background:rgba(92, 92, 92, 0.78);border:1px solid rgba(0, 5, 0, 0.44);border-radius:50px;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d}input[type=range]::-ms-thumb{box-shadow:0px 0px 0px #5c5c5c, 0px 0px 0px #696969;border:1.1px solid #00001e;height:20px;width:20px;border-radius:50px;background:#fefefe;cursor:pointer;height:4px}input[type=range]:focus::-ms-fill-lower{background:rgba(92, 92, 92, 0.78)}input[type=range]:focus::-ms-fill-upper{background:rgba(191, 191, 191, 0.78)}#cp{width:1px;height:1px;visibility:hidden;opacity:1;position:absolute}label[for="cp"]{display:block;width:100%;height:20px;margin-top:15px;cursor:pointer}.form-control{padding:15px;border-bottom:1px solid #343434}.form-control input{margin-top:15px}@media (max-width:700px){.content,.controls,.result{width:100%}.result{top:0;min-height:400px}}

This is css code you can customize it and change the things you want.

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

I have used @media rule in the above css code for making this project responsive for all kind of devices.


In the above code some color codes are used that are listed below you can change them as required.

  • #242930


  • #fff


  • #242930


  • #343434


  • #FF5722


  • #242930


  • #FF5722


  • #000000


  • #0d0d0d


  • #5c5c5c


  • #696969


  • #00001e


  • #fefefe


  • #5c5c5c


  • #696969


  • #00001e


  • #fefefe


  • rgba(0, 0, 0, 0.78)


  • rgba(0, 5, 0, 0.44)


  • #0d0d0d


  • #5c5c5c


  • #696969


  • #00001e


  • #fefefe


  • rgba(92, 92, 92, 0.78)


  • rgba(191, 191, 191, 0.78)


  • #343434



  • So we have written HTML directory and customised it and now we will add some functionality in this project (Box Shadow Generator Using Angularjs) to make it work as we want it to be.

    To make this project (Box Shadow Generator Using Angularjs) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project (Box Shadow Generator Using Angularjs) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Box Shadow Generator Using Angularjs/js/index.js :

    var app = angular.module("boxShadow", []);
    app.controller("ShadowGenerator", function($scope) {
    $scope.xOffset = 10;
    $scope.yOffset = 10;
    $scope.blur = 10;
    $scope.spread = 0;
    $scope.opacity = 100;
    $scope.mode = "";
    $scope.hex = "#000000";
    $scope.rgba = function() {
    var
    hex = $scope.hex.replace("#",""),
    r = parseInt(hex.substring(0,2), 16),
    g = parseInt(hex.substring(2,4), 16),
    b = parseInt(hex.substring(4,6), 16),
    result = "rgba("+r+","+g+","+b+","+$scope.opacity/100+")";
    return result;
    };//rgba
    $scope.updateCSS = function() {
    return "box-shadow: "+$scope.mode + " "+$scope.xOffset+"px "+$scope.yOffset+"px "+$scope.blur+"px "+ $scope.spread + "px " + $scope.rgba() +";";
    };//updateCSS
    });
    This is javascript code which will not work if angularjs library is not added.

    Ending :

    So here we are, We have done and our project Box Shadow Generator Using Angularjs is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Box Shadow Generator Using Angularjs
      • css
        • style.css
      • js
        • index.js
      • index.html

    Download Project (Box Shadow Generator Using Angularjs) File :

    Box Shadow Generator Using Angularjs.zip
    File Size 2.48 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.
    Thank you !




    Disqus Codes

    No comments

    Notifications

    Disqus Logo