Arrow with PureCSS

Click to Enlarge

Have you ever thought or seen a arrow in website which is not an image but created with the help of css ? So now,
we are going to learn how to make a arrow with purecss.
You can see arrows crafted with PureCSS3 in image above.

Arrow Left

.arrowleft {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:transparent #444 transparent transparent; }

Arrow Right

.arrowright {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:transparent transparent transparent #444; }

Arrow Top

.arrowtop {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:transparent transparent #444 transparent; }

Arrow Bottom

.arrowbottom {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:#444 transparent transparent  transparent; }

You can adjust arrow size with increase and decrease the size of border property which is now 20px.
If you want arrow placed at angle then you can use trasform property.

Over to You

If you wish to learn different shapes except arrow then drop your wishes in  Wish box.
If this article enjoy you a bit then feel free to leave a comment.
If you have any problem, your comment will have answer, just don't spam otherwise dustbin is there waiting for your spammy comment.

More about → Arrow with PureCSS

Sticky Notes With PureCSS

Sticky notes are simple way to announce something to your website using a creative post-it note,

Here is some examples that will let you learn how to make those sticky notes even more gorgeous...,

Cool Jeans Pocket

This is cool sticky note as shown in demo below, Created with PureCSS, No jQuery or js. Let's have a look at this note below,

Lorem ipsum dolor sit amet, a hac nec mauris tincidunt, lacus curabitur justo quis, ad ac vitae. Vestibulum posuere rutrum neque et dui enim. Libero pede non eros rhoncus phasellus.

{ background:linear-gradient(top,#000,#333); width:200px; height:250px; color:white; padding:10px;border:1px dashed white;box-shadow:0 0 0 3px #000,0 5px 3px grey; transform:rotate(-10deg); background-size:2% 2%; border-radius:5px; }

Yellow Post-It

This postit has yellow background and a transparent color, you can create this with any background!, Try it by changing background...

Lorem ipsum dolor sit amet, a hac nec mauris tincidunt, lacus curabitur justo quis, ad ac vitae. Vestibulum posuere rutrum neque et dui enim. Libero pede non eros rhoncus phasellus.

{ background:yellow; width:200px; height:250px; color:rgba(0,0,0,.3); padding:10px;box-shadow:10px 10px 0 #000; border-radius:5px; }

Minimal Post-it

This is nice, simple and attractive post-it

Lorem ipsum dolor sit amet, a hac nec mauris tincidunt, lacus curabitur justo quis, ad ac vitae. Vestibulum posuere rutrum neque et dui enim. Libero pede non eros rhoncus phasellus.

{ background:linear-gradient(top,#e2e2e2,#e6e6e6); width:200px; height:250px; color:black; padding:10px;box-shadow:0 0 10px grey; border-radius:5px; }

These are demos with css, But this css doesn't have prefixes for cross-browser support, You may add for using cross-browser.

Recommendations

Recommend any design idea if you have one, Drop your idea in "Wishbox".

More about → Sticky Notes With PureCSS

Crafting PureCSS Buttons

Buttons using css3 is common now but to have your blog reputation more your blog must have unique content, unique design, unique concept, unique title and a responsive yet stylish buttons. So I crafted some of all rounder buttons,

Advantages:

# Look stunning in all backgrounds.
# Adjustable width.
# Responsive background.
# And fantastic text-shadow.
# Double bordered.

Disadvantages:

# The only disadvantage of this button is you can't use it with pure black color.

Let's Start Crafting

F irst have a view of some buttons created for example

Now start Crafting These buttons!!!

First Copy the CSS

.button
{
  display:inline-block;
  background:red;
  padding:0 15px;
  text-align:center;
  font-size:3em;
  background-image:linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);
  background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);
  background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 35%,transparent 35%);  border-radius:30px;
  moz-border-radius:30px;
  color: rgba(0,0,0, 0.4);
  text-shadow:0 1px 0 rgba(0,0,0,.1),0 2px 0 rgba(0,0,0,.1),0 3px 0 rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.1);
  border:10px double rgba(255,255,255,.7);
  margin:20px auto;
}
.red
{
  background:red;
   background-image:linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);}
.pink
{
  background:pink;
   background-image:linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
   background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);}
.minimal
{
  background:#999;
  background-image:linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
  background-image:-moz-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
  background-image:-ms-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,.2) 50%,transparent 50%);}

Now copy this HTML

<button class="button red">Button-text-red-button</button>
<button class="button pink">Button-text-pink-button</button>
<button class="button minimal">Button-text-minimal-button</button>

Now You're Done Crafting(Copying :D) Buttons!
Found any design related queries / problem,
Then ask me in comment!!!

More about → Crafting PureCSS Buttons