Stitched Look using CSS

In this Article, we are going to learn how to give Stitched effect using CSS. Firstly, we give Stitched effect to a simple box (i.e. any div), then we add some background-images and take this trick to the next level.

Let's Begin:

Example1:

HTML Structure: 

<div class="stitched">Stitched</div> 

 

CSS:

.stitched

{

background-color:darkred;

width:200px;

font-size:20px;

color:white;

padding:20px;

}

Here we set background-color, width, Font-size, etc. of div using .stitched class.

 

Preview:

.stitched

{

background-color:darkred;

width:200px;

font-size:20px;

color:white;

padding:20px;

border:2px dashed white;

border-radius:20px;

box-shadow:0px 0px 4px 4px darkred;

}

Now, we added border, border-radius and box-shadow to .stitched class. In box shadow, we only use blur and spread and set value to 4px (box-shadow syntax: box-shadow: h-shadow v-shadow blur spread color). 

 

Preview:

This one is the basic example of giving stitched effect. Now we are going to create another Stitched effect.

 

Example2: 

HTML Structure: 

 

<div class="pic">

   <div class="borderdiv">

   <div class="inner"><p class="text1">Stitched</p></div>

   </div>

</div>

Here, the outermost div (.pic) is used to set background-image, middle (.borderdiv) to set border and giving stitched look and innermost div (.inner) for text, etc.

 

CSS:

.pic

{

background-image:url("white_leather.png");

width:302px;

height:202px;

border-radius:5px;

}

Here, I set background-image, width, height and border-radius.

 

Preview:

.borderdiv

{

width:280px;

height:180px;

border: 2px dashed #aaa;

border-radius:10px;

position:relative;

top:9px;

left:10px;

box-shadow: 0 0 0 1px #f5f5f5;

}

Here, we set width and height less than the .pic so that it comes inside it. Then, we set Border, Border-radius and box-shadow to give effect of Stitched. Using Position, we adjust position inside the div (.pic).

 

Preview:

.text1

{

margin-top:60px;

text-align:center;

font-size:50px;

color:gray;

}

Here we adjust Font-size, color, align, etc.

 

 

Preview (Final):

I have created some other examples using the same technique. You can download it for viewing or using.

 

Preview:

You can also download the source code from the below link:

Hope you Like it. Thanks

Read More

Part:2:-Variable and Data Type

Part-2 Variable and Data type

Variable: 

A variable in program is specific piece of memory. Every variable in a program has a name. We use variable to store a data value in memory and retrieve the data that is stored in it.

Rules for giving a Name to variable:- (wrong declaration highlighted by red color)

a) A variable name only contains characters, digits and underscore. Variable names like oh! , Mike-Jack not allowed.

b) The first letter of variable name must be letter or underscore. Variable name must not be started with a digit like 8_oclock, 6_pack. Never try to start variable name with underscore because variable name started with underscore already declared in libraries which can cause quite confusion to understand.

c) No comma or blank space is provided within variable name.

d) Variable names are case-sensitive. If you declare length and Length are distinct.

e) Always try to give Variable name as short as possible and maximum of 31 characters. Giving large name will increase your typing effort.

f) You cannot provide C’s Keyword like main, switch as Variable name.

Data Type: 

Data type can be defined as type of data of variable. Whenever we declare a variable, we have to mention what kind of data it can hold or store. C offers Standard and minimal set of data type. Sometimes called as “Primitive Data Type”. 

For example:-

int num; //here int is Data Type

char name; //here char is Data Type

C language Data type can be classified into 3 type:-

1) Primary Data Type 2) Derived Data Type (e.g. Array, Pointer, Structure, Union) 3) User defined Data Type

Primary Data Type divided into four basic data types:-

Data Type	Description	Size(in byte)	Range
char	Character	1	-128 to +127
int	Integer	2 or 4	-32768 to +32767
float	Number with decimal point. Precision upto 6 digits	4	-3.4e38 to +3.4e38
Double	Number with decimal point. Precision upto 12 digits	8	-1.7e308 to +1.7e308

Size and Range of Data Type may vary according to the qualifiers. Data Type Qualifier can be divided into two part:-

1) Size Qualifier

2) Sign Qualifier

Size Qualifier: Size Qualifier alter the size of data type. There are 2 types of size qualifiers: short and long.

For Example:

Storage space or size of int data type is 4 byte for 32 bit processor. We can increase the range using long int whose size is 8 byte or decrease the size using short int whose size is 2 byte.

Sign Qualifier: Signed and unsigned keyword used to specify whether variable can store +ve number or +ve as well as –ve number.

Example:- unsigned int range is -32768 to +32767 whereas signed int range is 0 to 65,535

Example 2.1: Finding Size of Data Type using sizeof operator

#include <stdio.h>

#include <conio.h>

void main()

{

       printf("Size of char %d byte\n",sizeof(char));

       printf("Size of int %d byte\n",sizeof(int));

       printf("Size of float %d byte\n",sizeof(float));

       printf("Size of double %d byte\n",sizeof(double));

       getch();

}

On My system I get the following result

Constants:-

A Constant is used just like a variable, though its value never changes. For example: Value of π (pie) in trigonometry is fixed (constant) which is equal to 3.14159265.

We can declare constant in our program in two ways:-

1) Using #define    2) Using const keyword

Using #define:

#include <stdio.h>

#include <conio.h>

#define PI 3.14159f //defining name and value for PI

void main()

{

       float radius=2.2; //radius

       float circum=2*PI*radius; //variable storing circumference

       printf("Circumference of Circle=%f metre",circum); /*print the result on console or terminal*/

       getch();

}

Using const keyword:

#include <stdio.h>

#include <conio.h>

void main()

{

       const float PI=3.14159f; //declare PI using const

       float radius=2.2; //radius

       float circum=2*PI*radius; //variable storing circumference

       printf("Circumference of Circle=%f metre",circum); /*print the result on console or terminal*/

       getch();

}

When we use const keyword, we can specify a Data type for our constant where as in previous example (using # define), PI was just a sequence of characters that replace all the value of PI in your program.

Read More