Introduction
This chapter demonstrates about the W3CSS Trends Now a days every year web sites are updating with new techiniques and trends and following are the concepts covered in this chapter.
- Flat Design
- Cards
- Full Screen Input
Description
Now a days Every year websites are designing with the new techniques and trends in which flat design trend started with Windows phone 7 and Windows 8 in 2010. Which often uses colors from marketing and road signs, sticky notes. The code below demonstrates the Flat design as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<p>Flat Design often uses colors we know from marketing, road signs, and sticky notes:</p>
<div class="w3-row">
<div class="w3-quarter">
<div class="w3-container w3-red w3-center w3-padding-16"><p>Red</p></div>
<div class="w3-container w3-green w3-center w3-padding-16"><p>Green</p></div>
<div class="w3-container w3-blue w3-center w3-padding-16"><p>Blue</p></div>
<div class="w3-container w3-black w3-center w3-padding-16"><p>Black</p></div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-pink w3-center w3-padding-16"><p>Pink</p></div>
<div class="w3-container w3-teal w3-center w3-padding-16"><p>Teal</p></div>
<div class="w3-container w3-indigo w3-center w3-padding-16"><p>Indigo</p></div>
<div class="w3-container w3-brown w3-center w3-padding-16"><p>Brown</p></div>
</div>
<div class="w3-quarter w3-hide-small">
<div class="w3-container w3-orange w3-text-whie w3-center w3-padding-16"><p>Orange</p></div>
<div class="w3-container w3-cyan w3-text-white w3-center w3-padding-16"><p>Cyan</p></div>
<div class="w3-container w3-purple w3-center w3-padding-16"><p>Purple</p></div>
<div class="w3-container w3-grey w3-center w3-padding-16"><p>Grey</p></div>
</div>
<div class="w3-quarter w3-hide-small">
<div class="w3-container w3-yellow w3-center w3-padding-16"><p>Yellow</p></div>
<div class="w3-container w3-lime w3-center w3-padding-16"><p>Lime</p></div>
<div class="w3-container w3-khaki w3-center w3-padding-16"><p>Khaki</p></div>
<div class="w3-container w3-light-grey w3-center w3-padding-16"><p>Light Grey</p></div>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Now a days in every web sites designers are mostly using cards and these are available in different types in which most typical cards are rectangle with image and some text and cards are having some common structure for organizing headlines, images and text. Cards are available in small size and large size and with and without pictures. The code below demonstrates the cards as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<div class="w3-card w3-section">
<header class="w3-container w3-blue">
<h1>SPLessons</h1>
</header>
<div class="w3-container">
<p> SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>
</div>
<div class="w3-card-8 w3-section">
<div class="w3-container w3-blue">
<h2>splessons</h2>
</div>
<img src="splessons.jpg" alt="Trolltunga" style="width:50%">
<div class="w3-container w3-center">
<p>Support : support@splessons.com </p>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Now a days many web sites are using full screen inputs like signup page and login page instead of small part of web page. In order to build full screen developer must use overlay or model instead of redirecting a pages. The code below demonstrates the Full-screen input.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<img src="splessons.jpg" alt="splessons" class="w3-animate-opacity" style="width:100%;min-height:200px;max-height:400px;">
<div class="w3-container">
<h2>Welcome to SPLESSONS</h2>
<p> SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
<p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Register</button></p>
</div>
<form id="id01" action="form.asp" class="w3-modal w3-pale-yellow">
<button onclick="document.getElementById('id01').style.display='none'"
class="w3-btn w3-right w3-large w3-hover-red w3-clear">X</button>
<div class="w3-clear"></div>
<div class="w3-container">
<h2>Class Registration</h2>
<p>
<input class="w3-input" type="text" name="first" style="width:90%" required>
<label class="w3-label w3-validate">First Name</label></p>
<p>
<input class="w3-input" type="text" name="last" style="width:90%" required>
<label class="w3-label w3-validate">Last Name</label></p>
<p>
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label></p>
<p>
<input class="w3-radio" type="radio" name="gender" value="female">
<label class="w3-validate">Female</label></p>
<p>
<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label></p>
<p>
<button class="w3-btn w3-ripple w3-hover-green">Register</button></p>
</div>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When user click on the Register button then will enter into registration page which is an full screen input as shown in below image.
Key Points
- Now a days for every web pages developers are using full screen inputs.
- Cards are every where on the web today.
- Flat designs colors are taking from marketing, road signs and sticky notes.