Adberv

Flat Button Design CSS

On 1:08 AM By adberv

Flat Button Design CSS

In modern web design, flat design has easily become a trend because it is really simple, elegant, professional and easy to implement in responsive designs. They are commonly used in login forms, register forms or even in control forms that needs data submission.

In this post, we'll make a flat button design using using purely CSS!

Step 1: Create your button inside the <body> tag


<body>
 <input type='button' class='Green' value='Green'>
</body>

Step 2: Apply CSS to input[type='button'] and to its :active selector


input[type='button']{
 position: relative;
 vertical-align: top;


 color: white;
 text-align: center;
 border: 0;
 cursor: pointer;
 padding: 5px 20px;
 margin-right: 10px;
 margin-bottom: 10px;
 width:100px;
}
input[type='button']:active{
 top: 1px;
 outline: none;
 -webkit-box-shadow: none;
 box-shadow: none; 
}

Step 3: Apply class CSS code to specific color. For instance, green.


.Green{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #27ae60;
 border-bottom: 2px solid #219d55;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #219d55;
 box-shadow: inset 0 -2px #219d55; 
}

Step 4: Save the file and preview your work in your browser. You should end up with the same result like this:

And there it is! You can play around its background properties as well. I highly suggest you use pastel colors.

Here are the codes for the other colors:


.Blue{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #5C97BF;
 border-bottom: 2px solid #4B77BE;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #4B77BE;
 box-shadow: inset 0 -2px #4B77BE; 
}


.Red{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #D64541;
 border-bottom: 2px solid #CF000F;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #CF000F;
 box-shadow: inset 0 -2px #CF000F; 
}


.Purple{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #BF55EC;
 border-bottom: 2px solid #9A12B3;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #9A12B3;
 box-shadow: inset 0 -2px #9A12B3; 
}


.Yellow{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #F5D76E;
 border-bottom: 2px solid #F7CA18;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #F7CA18;
 box-shadow: inset 0 -2px #F7CA18; 
}


.Orange{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #EB974E;
 border-bottom: 2px solid #F9690E;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #F9690E;
 box-shadow: inset 0 -2px #F9690E; 
}


.Gray{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #95A5A6;
 border-bottom: 2px solid #6C7A89;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #6C7A89;
 box-shadow: inset 0 -2px #6C7A89; 
}


.Pink{
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 background: #D2527F;
 border-bottom: 2px solid #DB0A5B;
 cursor: pointer;
 -webkit-box-shadow: inset 0 -2px #DB0A5B;
 box-shadow: inset 0 -2px #DB0A5B; 
}

This Flat Button CSS Design can also be used to submit buttons as well. This is a hassle-free styling buttons - one can avoid using <div> and javascript just to retain submit functionality and having a stylized button at the same time. By this, we just used pure CSS so, the buttons and submit buttons will work as normal.

If you use this to your project or website, please inform us through our comment section.

Login Form using OOP in PHP

On 10:45 AM By adberv

Login Form using OOP in PHP

Most of the web applications involves users, and by that, a login form is usually needed. Login forms receive username and password inputs, verifies access, and in most cases determines the privileges of the user, commonly called as user level.

This is a sample login web application I made using OOP in PHP. This has the basic functions of logging in, logging out, remember me and change password.

Since I'm using OOP, I used PDO to access my database. PDO returns results as an object and it is much easier to use when you are using OOP.

Notes:

When a user successfully logs in with the Remember Me checked, the system generates a unique cookie that will expire in a certain amount of time (see config.php and cookie.php) and the value will be saved to user_session. When the user logs out, the user_session is unset.
In hashing, the system generates a 12-bit random character and appends it to the password the user inputted, then the system will apply SHA-256 one-way hash. The system will now save 2 values in the database: the user_password and user_salt. When the user logs in, the system will simply attach the saved user_salt then append it to the user input, apply the hash and check if the user_password matches with it.

Package for login form in PHP contains:

classes:

Config.php - contains the abstraction of the configurations set in core/init.php.

abstraction is where you make a command more readable and easy to execute and use. Doing this involves parameters and return values.

Cookie.php - contains the creation and deletion of cookie that is to be set when user opts to remember login session.

setcookie is used to create a cookie, with a set name and expiry, on the local machine.

DB.php - contains all the abstracted database query functions (in PDO).

this is where I abstracted all my database queries so that it can be easily implemented and this also prevents connecting to the database multiple times.

Hash.php - contains the function that generates the hash and salt for password.

hashing is making a text unreadable. There are many hash encryption available now. One of which is the SHA-256 bit hash.

Input.php - the abstracted $_POST and $_GET function.
Redirect.php - function for redirection to certain pages
Session.php - the abstracted $_SESSION functions, and the flash messages.
Token.php - generates unique token for every form, avoiding cross-site request forgery(CSRF)
User.php - class used if a object user needs to be created.
Validate.php - function used to validate a certain field.

core:

init.php - contains all the initializations, configurations need to be loaded in the system

functions:

sanitize.php - function used to further validate input fields.

pages:

AddUser.php - page containing the form for adding a user
ChangeName.php - page containing the form for changing user's name.
index.php - home page
login.php - page containing the form for logging in.
logout.php - page for logout.

The advantage of using OOP in a web application is it can be easily expanded to whatever functions you want to add parameters, return values and properties without editing most of the codes. Also, OOP is easy trace and troubleshoot for bugs - functions and properties are grouped by objects so, bugs are easy to locate and fix.

Download here.

Shot Clock, Game Clock and Scoreboard using PIC16F877a and LM016L

On 3:12 PM By adberv

Shot Clock, Game Clock and Scoreboard using PIC16F877a

A basketball shot clock, game clock and scoreboard circuit and program made using 2 PIC16F877a and 2 LCD (LM016L) displays.

For scoring, a selector switch is used to score home or away teams. Increments can be by 1, 2 or 3. A decrement by 1 switch is also available if score needs to be reduced. The quarter switch changes the QTR display.

In the clock, SET GAME switch can be used to set the game clock. POSSESSION switch on the other hard can be used if the there is a change in possession. In this case, game clock stops and shot clock resets to 24. DEAD BALL switch can be used if there is a dead ball situation. In this case, the game clock pauses and shot clock retains. Finally, a 14-SECOND SHOT CLOCK switch can be used if shot clock needs to be set to 14 seconds. FOUL switch can be used to increment fouls.

For scoreboard function, it is just an increment function to the score of the selected team selected by the TEAM selector switch.

For the game clock workaround, it is controlled by DEAD BALL switch. When the clock runs out, the QTR switch will reset the clock back to the set number of minutes.

For the shot clock, DEAD BALL, 14-SECOND and RESET switch are available. DEAD BALL simply breaks the increment function of the game clock. 14-SECOND just re-sets the game clock to 14 and RESET on the other hand re-sets it to 24 seconds.

The foul switch simply increments the number of fouls of the selected team using the TEAM SELECTOR. If it reaches 6 and above, it will display PNTY. The fouls would reset if the QTR switch is pressed.

This circuit uses LCDs as output, but if you want to use 7-segments, it is also possible. Just use decoders for those segments and tweak the code for pin assignments and you'd still get the same functionality of the shot clock, game clock and scoreboard.

The program was done in PIC Simulator and the circuit was made and simulated in PROTEUS.

Download here.

SVG Pie Chart using PHP

On 2:06 PM By adberv

SVG Pie Chart using PHP

SVG, or Scalable Vector Graphics are widely used for dynamic shapes and icons in web applications. They are usually implemented because it is a vector graphic - meaning it can be scaled in any size without losing its quality. Also, charts and other graphical data representation can be easily implemented with SVG because it is very dynamic. You can basically draw any shapes by just providing certain parameters.

A dynamic SVG Pie Chart made using PHP. It accepts 10 names and corresponding values then it will automatically generate a pie chart (with legend). The program uses the path command for SVG.

The key here is you first decide where would be the point of origin. This will involve a little bit of trigonometry. After that, everything will be just like plotting points to a Cartesian coordinate system. Supply the start point and end point for the path, and it will automatically create the shape.

Technically, the code you really need to focus on is:


foreach($_POST['value'] as $value){
 if($value==""||$value==0){
  $x++;
  continue;
 }
 $angle=deg2rad((($value+$prev)/$total)*360);
 $end_point[0]=round(200-((cos($angle))*180),2);
 $end_point[1]=round(200-((sin($angle))*180),2);
 
 if((rad2deg($angle))<180){
  $path=0;
 }
 else{
  $path=1;
 }
 
 //for same start and end points
 if($start_point[0]==$end_point[0]&&$start_point[1]==$end_point[1]){
  $end_point[1]=$end_point[1]+0.001;
  $stroke=0;
 }
 else{
  $stroke=3;
 }
 //breakpoint
 echo "<path d='M200,200 L".$start_point[0].",".$start_point[1]." A180,180 0 ".$path.",1 ".$end_point[0].",".$end_point[1]." z'
   style='fill:#".$color[$x].";stroke:white;stroke-width:".$stroke."; mask:url(#hole) '/>    

 "; 
 $start_point[0]=$end_point[0];
 $start_point[1]=$end_point[1];
 $prev=$prev+$value;
 $x++;
}

First, calculate for the angle of the certain point: $angle=deg2rad((($value+$prev)/$total)*360);

So initially, when you plot the point, you start at the origin, which is (0,0) - the center of the circle.

By Pythagorean Theorem, you can solve for adjacent side, which is from 0 to y axis, by: $end_point[0]=round(200-((cos($angle))*180),2);

And solve for the base, which is from 0 to x: $end_point[1]=round(200-((sin($angle))*180),2);

Now you have the 3 points: the origin, the end_point[0] and end_point[1], that being said, we now have a triangle. This is basically the segment of our pie chart, but we need to draw the hypotenuse in a curve, so it will look like a segment of the circle.

After that, you need to determine if the angle is greater than 180. Why? Because if the angle is greater than 180, we would let the path draw the LONGEST path from end_point[1] to end_point[0]. Else, it should use the shortest path.

Now the path command will draw the path from origin, end_point[0] and end_point[1].

And since we are on a loop, the formula will just repeat for each values in the array.

This pie chart can chart more values easily by just extending the array where the data are saved. You can just add textboxes or more values to the array and it will automatically be interpreted in a chart.

Most of the chart functions now are using SVG because it can be easily implemented even with simple PHP code. You just have to be familiar with the properties and parameters the certain SVG command have.

Download here.

Feel free to ask questions if you are confused or if you want to modify the program.

Computer Engineering T-Shirt Design

On 1:50 PM By adberv

Computer Engineering T-Shirt Design

A T-Shirt design I made for our Computer Engineering organization. The target concept is to incorporate fields in our course and make it look doodle-ish and flat.

Doodle art became famous and trendy in shirt designs these days because it is really catchy and plain, and it is not overdone with too much detail. I recommend you use pastel colors so it will not become really distracting to the eye when the design is printed in the tshirt.

Design was made in Adobe Photoshop.

The shirt was made available in green, black and gray.

School Lanyard Design

On 11:10 AM By adberv

School Lanyard Design

Big and bulk lanyards have become a trend in most universities and sometimes, it is department-specific. Students get to sport not just their alma mater, but their course as well.

A lanyard I designed for University of Mindanao College of Hospitality Education's Tourism Management Department.

The target design is to highlight the department's and university's name. The color scheme suggested was pink and black.

This was done in Photoshop.

Cubism Art Tutorial in Photoshop

On 10:54 AM By adberv

Cubism is an early-century art wherein cubes or polygons are used to portray an image. Applying this kind of art brings nostalgic feel to a photo.

In Photoshop, we can attain this kind of art using Pen Tool and average tracing skills.

Steps to Make a Cubism Art Tutorial in Photoshop

This tutorial will guide you on how to make a Cubism Art in Photoshop

1. Open your base picture in Photoshop and make the image larger (won't matter if it pixelize 'coz the output will be a vector) via Image>Image Size. Set the value of either height or width to 2000px+. Let the other dimension recompute the value so it wouldn't lose its aspect ratio.

2. Trace the base parts. NOTE. DO NOT USE CURVES so that cubism will be portrayed.

3. Posterize your reference picture via Image>Adjustments>Posterize. Set the value around 4-8 (Values will depend on the quality of the image. The higher, the more color and detail it will show). This will serve a guide to where the depths are, and the details to be shown.

4. Start tracing the detail of the skin. I suggest you start at the bottom or at the edges, where the darker colors are usually present. NOTE. USE ONLY 3-4 SIDES, UNLESS IT IS A DETAIL. Doing such will make it make "cubism"-ic. Use the posterized reference image for the color. (Make separate layers for all the shapes)

5. Continue tracing. Vary sizes. Use the posterized image as guide.

6. Finish the skin.

7. Proceed to face's details (eyes, brows, lips). NOTE that you can use multiple shapes for one detail to emphasize its depth.

8. Trace the lips.

9. You can now add details to the hair, cap and shirt.

10. Shirt's detail.

Add further details to the ears and shirt and you're done! You can also overlay an canvass' texture go give it a nostalgic feel.

Thanks for reading!

TOP THREE FUNNY UKAY-UKAY SIGNS

On 9:01 AM By adberv

No. 3: You'll find many of these in side-streets where a simple misspelling turns to be a humor. Though this one doesn't make any major errors, it still lands in the 3rd spot. By the way, have you been in an ukay-ukay? The most repeated line is "Bago Abri" which means newly opened stocks and take note that this line will be there until the night ends.

No. 2: How sweet it is to wear these long-sleeved shirts! I wonder how much sugar they put in the fabric?

No. 1: These one is the best by far. The price definitely is catching to the side-walkers but wait, there's more. The stall owner decided to raise the marketing level up to the maximum. It reads "EXCLUSIVELY FOR BEAUTIFUL WOMEN". Every lady will surely get a peek into the these products.