Create Different Shapes using CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML.
I am going to show you how to create different shapes in CSS
Simple shapes-
Square:

.square {
width: 100px;
height: 100px;
background: red; }

Circle

.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px; }

Triangle:

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red; }

Complex Shapes-

Star

.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative; }

.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px; }

Finally The Smiley Face Using CSS :

Create following divs on Page

<div class="smileyface">
<p class="eyes lefteye"></p>
<p class="eyes righteye"></p>
<div class="smile">
<div class="corner"></div>
<div class="corner right"></div>
</div>
</div>

Create following styles in Style Tag


div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
behavior:url(CSS/Corner.htc);/*Gives Corner shapes in IE */
}

p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
behavior:url(CSS/Corner.htc);/*Gives Corner shapes in IE */ }

p.eyes.lefteye {
left: 75px;
}

p.eyes.righteye {
right: 75px;
behavior:url(CSS/Corner.htc);/*Gives Corner shapes in IE */ }

div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
behavior:url(CSS/Corner.htc);/*Gives Corner shapes in IE */ }

div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
behavior:url(CSS/Corner.htc);/*Gives Corner shapes in IE */ }

div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
behavior:url(CSS/Corner.htc);/*Gives Corner shapes in IE */
}

Google +

Google has just unveiled Google+, its ambitious answer to Facebook.
It seems Google is eager to make a big impact in the social media sector as in the mail, search, photo and document storage domains.
The Google+ project is the company’s social initiative that brings friend streams, group video chat and group texting to Google’s millions of users.
On Google Plus there are only four silos (Home, Photos, Profile, Circles) to click on. Here one cannot find games nor Farmville! It is simple and in Google’s fashion with lot of white space. The ‘Stream' is the equivalent of FB's scroll newsfeed, and there are similar options — to share, edit, host photos and videos, and delete them.
Unlike Facebook, Google Plus allow people to share things with you even if you're not following them. Thus, you'll want to check your Incoming feed now and then to see whether you're missing out on anything interesting from someone you don't follow.
Use the Your Circles option while sharing. Google Plus's Circles system is great for letting you use your Plus account to set barriers between the various groups of people you want to share things with. If most of what you share on Google Plus isn't especially privacy-sensitive, however, use the Your Circles sharing option to automatically share items with all of your circles and avoid the trouble of clicking each individual circle.

Google+ is a bold and dramatic attempt at social front. There’s a reason why Google calls this a “project” rather than a “product” — they don’t want people to think of this as the final product, but as a constantly-evolving entity.
At the moment, Google+ cannot compete with the king of social, but Google doesn’t seem to be in a hurry to take on Mark Zuckerberg’s giant quite yet.