Everything 4 PC: Css3

Showing posts with label Css3. Show all posts

July 8, 2015

Importance of responsiveness of an application in this digital era

Almost every person who uses technology now a days will definitely be using at least two digital devices with different screen sizes. There are a hell lot of devices with different screen sizes available out there in the market. So, it's very important for a developer to make sure that all his applications will respond to the different devices with different screen sizes.

Why to make it Responsive?

There a lot of reasons why you need to keep your application responsive and fit neatly in all screen sizes. It helps your application to look awesome in the small screens also. More people can access your application. You can earn more traffic.

What happens if the application is not responsive?

Now a days people are using more handy mobile devices over big chunky screens. Mobile devices are very flexible to use and you can access the internet from any where and any time and you can carry it in your pockets. This make the users to use mobile phone more than laptops or desktops.

If you as a developer don't develop your application which can run same as it do in the big screen devices you are loosing almost 60% of the traffic everyday.

How to make it responsive?

This is the era where there are hell lot of libraries and frameworks that makes the life of a developer very easy. There are so many developers who are developing awesome libraries and frameworks for developers. I list the most used one's below how you can make it responsive.

BOOTSTRAP - Awesome library built by the twitter employees which is now trending technology for the responsive websites.
CSS3 Media Queries - This is the most awesome feature added in the CSS3. And the Bootstrap which I mentioned above is also built with the help of CSS3 Media Queries feature.

These are the main technologies that are trending for the responsiveness in present days. But, we need to see what next!

July 6, 2015

CSS hiding elements using Display property and Visibility property

In this post we will see how we can hide the elements using CSS properties. There are generally two properties we can use to hide the HTML elements.

Display
Visibility

These are the two properties available to hide elements using CSS. Many people think these two properties do the pretty much the same thing but, there is slight difference between those two properties. we will discuss them with code below.

html

<p>Lorum ipsum and some dummy text</p>

<div id="element1"></div>

<p>Lorum ipsum and some dummy text</p>

<div id="element2"></div>

<p>Lorum ipsum and some dummy text</p>

css

#element1 {

width: 200px;

height: 200px;

visibility: none;

}

#element2 {

width: 200px;

height: 200px;

display: none;

}

I recommend you to copy and past the above code and check the result and play around with it. Let me first explain you the difference between these two properties.

When you use display property and hide the element, it will pretty much hide the whole elements which means it will totally removes the element from the page and the elements below will get adjusted automatically.

But, when you use visibility property to hide the elements, it will just make the element invisible but the white space for that element will be still there.

March 28, 2015

Create Awesome Signup Form with simple CSS

Form are the main components in any websites. Forms are interface between the user and the server. If there are no forms then there is no interaction between the user and the server. There are a plenty of form element types in HTML. Here I will take a few of them and create a simple Sign up form. So let's get started.

formelements.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="formelements.css">
</head>
<body>
<div id="container">

<form method="post" action="formelements.html">
<label>SignUp</label><br><br>
<input type="text" placeholder="Username" class="textBox"/><br>
<input type="email" placeholder="Email" class="textBox" /><br>
<input type="password" placeholder="Password" class="textBox" /><br><br>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Male</span>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Female</span><br>
<input type="checkbox" class="checkBox" /> <span class="outsideText">I agree to the terms and
conditions of this website. This is some dummy lorem Ipsum text.</span><br>
<input type="submit" value="Sign up" id="submitBtn" />
</form>

</div>

</body>

</html>

formelements.css
form {
width:500px;
padding:8px;
border:1px solid #cccccc;
}
label {
font-size:24px;
font-family:calibri;
color:red;
text-shadow:2px 2px 1px #cccccc;
padding:6px;
font-weight:700;
}
.textBox {
width:320px;
padding:10px;
font-size:18px;
font-family:calibri;
outline:none;
border:4px solid #00bbaf;

}
.outsideText {
font-size:18px;
font-family:calibri;
}
#submitBtn {
width:160px;
padding:6px;
background:orange;
border:1px solid orange;
color:#ffffff;
font-size:18px;
font-family:calibri;
margin-top:6px;

}

The form looks in this way

Here due to image resolution the image looks pretty much dim. Trust me if you copy and paste the code and check in your screens it looks more pretty, Again play with all the different styles above, try changing the values. If any doubts don't hesitate to comment below. I am always ready to clear your queries.

How to restrict users to make a selection in the website

It's very simple to restrict the users to make a selection in the web page. Generally if you have some text rendering website in which you don't want to allow your users to select and copy the text from your web page then you use this simple code in your website.

body {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

user-select is a CSS property used to restrict the user selection in the website. You can also restrict the users to select the particular parts of your web page also just by putting that same code lines in that part of styling. Again those different suffixes are for cross browser compatibility issues. -webkit- is for chrome, safari etc and -moz- for Mozilla and -ms- for internet explorer and -o- is for Opera and simple one is for other remaining browsers.

If any query please comment below. I am very happy to answer your queries.

Stay tuned for more tips and tricks.

March 27, 2015

How to Install Bootstrap?

Before knowing how to use the Bootstrap let me explain what is bootstrap, when and why we use it.

What is Bootstrap?
Bootstrap is a CSS and JavaScript library developed by two employees in the Twitter. It follows Mobile first approach to give the 100% responsiveness to the web applications in different screen resolutions. You just need to write code once and that it self adjust for different screen sizes. In 2014 Bootstrap is the Git Hub's top project according to Wikipedia.

Why and When we need to use Bootstrap?
Bootstrap is used for building responsive web applications with very less code. We just need to write code once and Bootstrap will take care about different screen sizes.

Installing Bootstrap into your code
Step 1. Open http://www.getbootstrap,com which is the official website for the Bootstrap
Step 2. Click on the Getting Started link in the Navigation Bar.
Step 3. Click on Download Bootstrap button on the left side. You will get download files in Zip file format.
Step 4. Extract the files you will see three folders named css, fonts, js.
Step 5. Open css folder and copy bootstrap.min.css file and bootstrap-theme.min.css file and paste in your working folder and include them in your files in the head section as a external style sheet.
Step 6. Open js folder and copy the bootstrap.min.js file and paste in your working directory and include this js file in your body section inside script tags. Other thing is you need to compulsory include jquery to use bootstrap js file functionalities. to do that.
Step 7. Open www.jquery.com and click on download button in the navigation bar.
Step 8. now scroll down a little bit you will find jquery latest series something like jquery 2x series. Now click on the latest file and download link with name production in it. extract the zip file and get the jquery-min.js and include in the working file before bootstrap js file.

Now your document look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tile of website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery-min.js"></script>

</head>
<body>

<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

That's it now you are ready to write the responsive code. Stay tuned to this blog I will explain some of the important things we use in bootstrap very soon.

If you have any doubts please comment below or you can mail us at ething4pc@gmail.com.

March 22, 2015

CSS3 Media Queries

In the present days if you are a web developer, while developing, you need to concern about all the different screen sizes available in the market. There are hell lot of devices which are different screen resolutions creating a big headache for the developers. To accomplish this task generally what developers do is, using JavaScript and render different style sheets for different screen resolutions. But, still it's will become very big code and files become very large size. To avoid this there are Media Queries in CSS3. You just need to write them in your css file they will be written like this.

/*SmartPhone (Portrait and Landscape)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){

your styling goes here
}

/*SmartPhones (Landscape)*/
@media only screen and (min-width:321px){

your styling goes here
}

/*SmartPhones (Portrait)*/
@media only screen and (max-width:320px){

your styling goes here
}

/*Ipads (Portrait and Landscape)*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px){

your styling goes here
}

/*Ipads Landscape*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {

your styling goes here
}

/*Ipads Portrait*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {

your styling goes here
}

/*Desktops and laptops*/
@media only screen and (min-width:1224px){

your styling goes here
}

/*Large screens*/
@media only screen and (min-width:1824px) {

your styling goes here
}

I recommend you to research about them and learn more. If you don't want to use this there is another option out there that is BOOTSTRAP. Bootstrap is the Css and JavaScript library created by two employees in Twitter. This is the best option to create responsive webpages. you check out their documentation at www.getbootstrap.com

Pages

July 8, 2015

Importance of responsiveness of an application in this digital era

July 6, 2015

CSS hiding elements using Display property and Visibility property

March 28, 2015

Create Awesome Signup Form with simple CSS

How to restrict users to make a selection in the website

Create Buttons with different tags in html

March 27, 2015

How to Install Bootstrap?

March 22, 2015

CSS3 Media Queries