Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts

Sunday, 26 May 2013

Three Stylish Customized Blogger Contact Forms


Yesterday, I posted a couple of articles about Blogger's new contact form widgets. First, I showed you how to add this widget to your Blog's sidebar, then I showed you how to add this form to a specific page of your blog.

It's time for me to share three stylish customized designs for Blogger's new contact form widget. All three designs are coded with some really simple CSS, and they look really great on your blog's sidebar and pages.

First, I'll showcase three stylish designs with their CSS, then I'll show how to add them on your blog.

Design #1:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

#ContactForm1_contact-form-email-message {
width: 245px;
height: 150px;
line-height: 150%;
}

#ContactForm1_contact-form-submit:hover, textarea:hover,
#ContactForm1_contact-form-submit:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

#ContactForm1_contact-form-submit{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
height:40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Design #2:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name {
background: url("http://4.bp.blogspot.com/-NM0doyerS-g/UEBl4hR2bjI/AAAAAAAALRA/uqslooN0RSw/s1600/form_name.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email {
background: url("http://2.bp.blogspot.com/-QpZy5KIQwE4/UEBl2NcTCCI/AAAAAAAALQ4/hkxq9uFqJP8/s1600/form_email.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email-message {
background: url("http://2.bp.blogspot.com/-5QAVbpECQr0/UEBl5bkQb1I/AAAAAAAALRI/unfOLRn-438/s1600/form_note.gif") no-repeat scroll 5px 6px rgb(255, 255, 255);
}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
margin: 0px;
width: 250px;
border: 1px solid rgb(221, 221, 221);
padding: 3px 5px 3px 25px;
}

#ContactForm1_contact-form-submit {
margin-top: 5px;
padding: 5px;
width: 100px;
background-color: rgb(225, 77, 77);
background-image:none;
border: 1px solid rgb(57, 21, 21);
border-radius: 5px 5px 5px 5px;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
line-height: 48px;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgb(0, 0, 0);
}

Design #3:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
border-color: rgb(0, 0, 0);
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
line-height: normal;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-email-message {
border-color: rgb(0, 0, 0);
padding-right: 5px;
min-height: 100px;
width:265px;
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
overflow: auto;
vertical-align: top;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-submit {
background-image:none;
background-color: rgb(0, 130, 135);
color: rgb(255, 255, 255);
font-family: 'Segoe UI','Open Sans',Verdana,Arial,Helvetica,sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
vertical-align: middle !important;
min-width: 90px;
min-height: 32px;
height: 32px;
border: 1px solid transparent;
color: white;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
text-align: center;
cursor: pointer;
padding: 4px 10px;
position: relative;
outline: medium none;
border-radius: 0px 0px 0px 0px;
}

How To Add Custom Style To Contact Form:

Adding these custom CSS codes into your blog is pretty simple. Some of you are just going to leave this part, since they know how easy it really is. For those who don't know, here you go:

  • Go To Blogger > Template > Edit HTML
  • Search for ]]></b:skin>:
  • Add your favorite form's CSS above ]]></b:skin>
  • Save your template...That's IT!

That was pretty easy! If you're using one of these styles, then please let me know you favorite for future styles. You guys are free to share these styles with your friends and fans, just don't forget to give us credits for our hard work. You can also share your custom styles in the comment section below...

Saturday, 13 April 2013

Easy Way To Create CSS Sprites



Idea of a sprite, a sprite is basically multiple graphics compiled into one image. It makes your website really fast. For example, CSS sprites compile an icon set into a single image, which saves a lot of space.

For newbies, it's really hard to create CSS sprite, so here is a service which makes it easy. Even professionals use this service to save their time, since photoshop takes much time to create sprites.

SpritePad is your free and easy-to-use web app for creating CSS spritemaps. With SpritePad you can create your CSS sprites within minutes seconds. Simply drag and drop your images and have them immediately available as one PNG sprite + CSS code.

You can visit SpritePad by clicking here.

Saturday, 2 March 2013

3D Flipping Menu For Blogger

Here is a pure css based menu with 3d flip concept. Menu items will flip on mouse hover. Menu is inspired from bunch of flipping menus, and is created by David Walsh. Seriously, David is one of my favorite web developers.

You can download or check a demo of this menu at this link. The HTML structure consists of a list with links. The animation centers around transitions and transforms.  The actual A element wont move -- the parent SPAN element will.

Adding This Menu To Blogger:

Finally, it's time for me to begin the tutorial, which is not much tricky. We're going to add this menu to blogger in two steps. Time for the first one:

  • Go To Blogger > Template > Edit HTML > Click on "Proceed"
  • Search for ]]></b:skin>
  • Post following css just above ]]></b:skin>:

        /* 3d flipping menu by BWidgets.com */
        .block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
            -ms-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

  • Save your template.
All done with first step....Now it's time for part - adding our html mark-up.

  • Go To Blogger > Layout > Add A Gadget > HTML/JavaScript
  • Paste following mark-up:

<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Demos
<span class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span>
</a></li>
<li><a href="#" class="three-d">
Deals
<span class="three-d-box"><span class="front">Deals</span><span class="back">Deals</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
</ul>

  • Save widget....All done!!!!

Customization:

Replace all # with your custom links. You can add another option on menu by adding following code above </ul> tag:

<span class="three-d-box"><span class="front">Title</span><span class="back">Title</span></span>

Having troubles? Don't forget to leave a comment....

Thursday, 28 February 2013

10 Stylish CSS Blockquotes For Blogger


Blockquote element defines "a section [within a document] that is quoted from another source". Earlier today, I spent several hours to find and create these 10 stylish blockquotes. Some are created by me and rest are from bunch of sites. Demo and download of this project is available at this link.

How To Add Blockquote Styling On Your Blog:

Before I post styling, you should know how to replace these stylish blockquotes with your template's default one.

Go To Blogger > Template > Edit HTML > Search for following code:

.post blockquote

 or

.post-body blockquote
Now replace whole CSS with our custom styles, you can find them in next heading. Here is an example of your template's default blockquote:

.post blockquote {
 Some CSS HERE
}

10 Stylish Blockquotes:

Below are our 10 CSS blockquotes examples and their code, which is quoted in it:

.post blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid lightblue;
}

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}

.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}

.post blockquote {
background-color: white; color: #845424;
background-image: url(http://3.bp.blogspot.com/-bXMrN8XbwAA/T8t0-FbIxeI/AAAAAAAAEhA/EUWwBWYwF4M/s1600/Orange.gif);
background-position: 0% 10px;
background-repeat: no-repeat repeat;
border-width: 2px;
margin: 0px 20px;
min-height: 30px;
padding: 20px 20px 10px 45px;
vertical-align: baseline;
}

.post blockquote {
background: #484B52 url(http://1.bp.blogspot.com/--pqu2SmmZEk/US-20cRpbtI/AAAAAAAAYx0/KabThwRB9LQ/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}

.post blockquote {
background: url(http://4.bp.blogspot.com/-ZB_YtAJMsVc/US-2yFQ33fI/AAAAAAAAYxs/6LirHiS4k3A/s1600/blockquote.png) no-repeat scroll 0px 0px transparent;
border: medium none;
margin: 5px 5px 50px;
padding: 25px 30px 5px 70px;
color: rgb(153, 153, 153);
font-style: italic;
}

.post blockquote {
background: url(http://3.bp.blogspot.com/-LkQquyIjzjk/US-2015OHjI/AAAAAAAAYx4/Vp_hszlvIWY/s1600/note.png) repeat-y scroll 0 0 transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 21px 45px 14px;
line-height: 1.65em;
font-famliy:georgia,sarif;
font-size:13px;
}

Thursday, 21 February 2013

CSS Lava Lamp Menu For Blogger


Yesterday, I found this excellent CSS menu, which bases on "Lava Lamp Menu" concept. Also, this menu is available for download or demo at this link. In September, we shared a jquey based Lava Lamp menu, which was based on jQuery.

This menu is available in three different styles, you can check a demo at this link. This menu is created by Paulina Hetman from Pepsized. This menu is coded so beautiful, and basic mark-up of all three menus are same.

First two menus are pure CSS based and third menu uses a heart and arrow image, which is adorable (Just kidding :p).

Add This Menu To Blogger:

  • Go To Blogger > Template > Edit HTML > Click on "Proceed."
  • Search for ]]></b:skin> and post following css just above it:

/* --- for all three examples ----*/

.nav {
  text-align: center;
  overflow: hidden;
  margin: 2em auto;
  width: 480px;
  position: relative; }
  .nav a {
    display: block;
    position: relative;
        float: left;
        padding: 1em 0 2em;
    width: 25%;
        text-decoration: none;
      color: #393939;
      -webkit-transition: .7s;
      -moz-transition: .7s;
      -o-transition: .7s;
      -ms-transition: .7s;
      transition: .7s; }
      .nav a:hover {
        color: #c6342e; }

.effect {
    position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

    .nav a:nth-child(1):hover ~ .effect {
      left: 12.5%; }
    .nav a:nth-child(2):hover ~ .effect {
      left: 37.5%; }
    .nav a:nth-child(3):hover ~ .effect {
      left: 62.5%; }
    .nav a:nth-child(4):hover ~ .effect {
      left: 87.5%; }

/* ----- line example -----*/

.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white;
  margin-left:-45px;
}

/* ----- dot example -----*/

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #c6342e;
  bottom: 40px; }
.ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 38px;
  left: 50%;
  margin-left: -2px;
  background: #c6342e;
  border-radius: 100%; }
.ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px;
    margin-left: -5px;
  background: #c6342e;
  border-radius: 100%; }

/* ----- heart example -----*/

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
  background: url('http://2.bp.blogspot.com/-vNDnhdTUg1w/USZo6Q-P5KI/AAAAAAAAYdk/fMkYbGPjVpY/s1600/heart.png') no-repeat; }
.ph-heart-nav .effect {
  position: absolute;
  bottom: 26px;
  background-position: 0 0;
  height: 8px;
  width: 62px;
  margin-left:-31px; }

.ph-heart-nav a:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  background-position: -62px 0;
  height: 20px;
  width: 11px;
  margin-left: -11px; }

.ph-heart-nav a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  background-position: -73px 0;
  height: 20px;
  width: 11px; }

  • Save Template....All done with template editing. Now, it's time to edit you layout.
  • Go To Blogger > Layout > Add A Widget > HTML/JavaScript
  • Paste any of the following code:

First Style:

    <div class="ph-line-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

Second Style:

    <div class="ph-dot-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

Third Style:

    <div class="ph-heart-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

  • Save your widget. Now visit your blog and see the css magic.... :)

Don't forget to leave your valuable comments.....:)

Wednesday, 23 January 2013

Stylish CSS Sprites Menu For Blogger

It's always hard to find a suitable menu for your blog. We're making that decision more hard for you by sharing another awesome menu... :p Remember, you can't change menu option, because it's an image based menu. Here we go:

  • Go To Blogger > Template > Edit HTML > Find ]]></b:skin>.
  • Just above ]]></b:skin> post following css:

/*Menu Stars BWidgets.com */
.bwidgets-nav {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bwidgets-nav ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bwidgets-nav ul li {
    background-image:url('http://2.bp.blogspot.com/-hEI0Ves3ZAc/UQA-WTYVaII/AAAAAAAAXww/hQUBL5F4ios/s1600/SpritesMenu.png');
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bwidgets-nav ul li a {
    display:block;
    height:100%;
    width:100%; }
.bwidgets-nav ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bwidgets-nav ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bwidgets-nav ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bwidgets-nav ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bwidgets-nav ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bwidgets-nav ul li:hover {
    z-index:1000; }
.bwidgets-nav ul li.sm1:hover {
    background-position:0 -75px; }
.bwidgets-nav ul li.sm2:hover {
    background-position:-125px -75px; }
.bwidgets-nav ul li.sm3:hover {
    background-position:-249px -75px; }
.bwidgets-nav ul li.sm4:hover {
    background-position:-373px -75px; }
.bwidgets-nav ul li.sm5:hover {
    background-position:-498px -75px; }
/*Menu Ends BWidgets.com */

  • Now save your template...
All done with this past, now it's time to add html mark-up of this menu on your layout.

  • Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code:

<div class="bwidgets-nav">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="#"></a></li>
</ul>
</div>

Replace all # in above code with your links.....Save It.......

Don't forget to leave a comment.... :)

Monday, 26 November 2012

CSS3 Credit Card Form


Earlier today i found this amazing CSS3 Credit Card Form. This form has been developed purely in CSS3 and does not include any images. In this article i'am sharing one Visa style form with you but there are more credit card forms and they all can be found here.

Let's get started with HTML:

<section class="credit-card visa gr-visa">
<div class="logo">Visa</div>
<form>
<h2>Payment Details</h2>
<ul class="inputs">
<li>
<label>Card Number</label>
<input type="text" name="card_number" pattern="[0-9]{13,16}" value="9842 9472 9457 9472" onclick="value=''" class="full gr-input" required />
</li>
<li class="expire last">
<label>Expiration</label>
<input type="text" name="expire_month" value="December (12)" onclick="value=''" size="10" class="month gr-input" required />
<input type="text" name="expire_year" value="2014" onclick="value=''" size="10" class="year gr-input" required />
<div class="clearfix"></div>
</li>
<li class="cvc-code last">
<label>CVC Code</label>
<input type="text" name="cvc_code" value="174" onclick="value=''" size="10" class="gr-input" required />
</li>
<div class="clearfix"></div>
</ul>
</form>
<div class="watermark">Visa</div>
</section>

After adding our html we'll add CSS coding:

/* === Basic reset === */
* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }
/* === General === */
body {
    font-family:Arial;
    font-size: 14px;
    background:#ddd;
}
.clearfix {
    clear:both;
}
/* === Credit Card === */
.credit-card {
    display:block;
    position:relative;
    width:93.75%;   /* This is 300px on 320px wide screen */
    max-width:500px;    /* Just to make sure that it doesnt get crazy on bg screens */
    min-width:300px;    /* And make sure that it contains at least some size */
    margin:30px auto;
    padding:20px;
    overflow:hidden;
    border-radius:6px;
    z-index:1;
}
.credit-card .inputs {
    list-style:none;
    margin-top:30px;
}
.credit-card .inputs li {
    margin-bottom:30px;
}
.credit-card .inputs li.last {
    margin-bottom:10px;
}
.credit-card .inputs li.expire {
    float:left;
    width:70%;
    margin-right:5%;
}
.credit-card .inputs li.expire input{
    float:left;
    width:35%;
}
.credit-card .inputs li.expire input.month{
    width:60%;
    margin-right:5%;
}
.credit-card .inputs li.cvc-code {
    float:left;
    width:25%;
}
.credit-card .inputs li.cvc-code input {
    width:100%;
}
.credit-card .watermark {
    position:absolute;
    z-index:10;
}
.credit-card form {
    position:relative;
    z-index:50;
}
.credit-card .logo {
    position:absolute;
    top:15px;
    right:20px;
    text-transform:uppercase;
    font-weight:bold;
}
/* === Visa === */
.visa {
    color:#fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}
.visa h2 {
    text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}
.visa .logo {
    color:rgba(255,255,255,0.9);
    font-size:2em;
    font-style:italic;
    text-shadow:0px 0px 3px rgba(17,123,173,0.9);
}
.visa .logo:after {
    content:' ';
    position:absolute;
    left:0px;
    top:5px;
    width: 0;
    height: 0;
    border-top: 10px solid orange;
    border-left: 10px solid transparent;
}
.visa .watermark {
    bottom:-100px;
    left:-50px;
    color:rgba(255,255,255,0.06);
    font-size:20em;
    font-weight:bold;
    font-style:italic;
}
/* === Forms === */
label {
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,0.6);
    text-transform:uppercase;
    font-size:1.1em;
    font-weight:bold;
    text-shadow:0px 1px 2px rgba(17,123,173,0.6);
}
input {
    display:block;
    padding:12px 10px;
    color:#999;
    font-size:1.2em;
    font-weight:bold;
    text-shadow:1px  1px 1px #fff;
    border:1px solid rgba(16,103,133,0.6);
    box-shadow:0px 0px 3px rgba(255,255,255,0.5), inset 0px 1px 4px rgba(0,0,0,0.2);
    border-radius:3px;
}
input.full {
    width:100%;
}

/* === Gradients === */
.gr-visa {
    background: #1db1cf; /* Old browsers */
    background: -moz-linear-gradient(top,  #1db1cf 0%, #1078ab 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1db1cf 0%,#1078ab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */
}
.gr-input {
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #d9d9d9 38%, #e5e5e5 82%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(38%,#d9d9d9), color-stop(82%,#e5e5e5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}

That's It....Don't forget to leave a comment!!!

Saturday, 24 November 2012

Resizing Web Page Elements With CSS3



Just a simple trick I wanted to show you guys. You can resize web elements with the CSS3 property resize: both. For images make sure it has width and height set to 100%.

Here is an example for you. First let's start with basic markup:


<div class="post">
BWidgets: Visit BWidgets.com for more!
<br><br>
Try resizing me or my media friend below.
</div>
<div class="post photo">
<img src="http://2.bp.blogspot.com/-LFU-85rj1jo/UHgF7RJNEbI/AAAAAAAAPLg/dmyZ0i7L5GA/s1600/Google+++Style+Subscription+Box+Widget+For+Blogger.jpg">
</div>

Now we'll put our CSS code in it:

body {
  width: 240px;
  height: 200px;
  margin: 0px auto;
  padding: 40px 0 0;
  background-color: #fff;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}
.post {
  margin: 0px 0px 40px;
  padding: 15px;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
  -moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
  overflow: hidden;
  resize: both;
}
.photo img {
  width: 100%; height: 100%;
}
Now see it in action... :)

Wednesday, 14 November 2012

Gmail Logo With CSS3


So today i'am sharing a post from hongkiat.com which is about creating Gmail logo with CSS3. First of all go and create a new html document on your computer and then paste following HTML markup on it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Gmail Logo with CSS3</title>
<style type="text/css">
Paste CSS3 here
</style>
</head>
<body>
<span class='gmail-logo'>
<span class='gmail-box'> </span>
</span>
<!-- sample usage, remove this comment
<a href='mailto:your@mail.com' class='gmail-logo'>
<span class='gmail-box'> </span>
</a>
 -->
<!--
Cheers and Regards
Hongkiat Lim < http://www.hongkiat.com
Indam < http://www.indaam.com
-->
</body>
</html>

As you can see in above code that i left a blank field for our CSS3 code so just replace below CSS with "Paste CSS3 here":

<!--
body{
/* min-height:1600px;
padding:200px 0;
*/}
/*
Css Logo created by Indam < http://www.indaam.com
Publish for http://hongkiat.com */
.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{
/* content:''; Bug in Opera */
/* add this, for : can using many tag */
margin:0;
padding:0;
background:transparent;
border:0;
outline:0;
display:block;
font:normal normal 0/0 serif;
}
.gmail-logo{
margin:110px auto;
background:rgb(201, 44, 25);
width:600px;
height:400px;
border-top:4px solid rgb(201, 44, 25);
border-bottom:4px solid rgb(201, 44, 25);
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.gmail-logo .gmail-box{
overflow:hidden;
float:left;
width:440px;
height:400px;
margin:0 0 0 80px;
background:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.gmail-logo .gmail-box:before{
position:relative;
content:'';
z-index:1;
background:white;
float:left;
width:320px;
height:320px;
border:100px solid rgb(201, 44, 25);
margin:-310px 0 0 -40px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.gmail-logo .gmail-box:after{
content:'';
float:left;
width:360px;
height:360px;
border:2px solid rgb(201, 44, 25);
margin:10px 0 0 40px;
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.gmail-logo:after{
content:'';
position:relative;
z-index:2;
content:'';
float:left;
margin-top:-404px;
width:600px;
height:408px;
display:block;
background:
-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
/* rgba(255, 255, 255, 0.3) 30%, */
rgba(255, 255, 255, 0.1) 100%);
background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
/* rgba(255, 255, 255, 0.2) 30%, */
rgba(255, 255, 255, 0.1) 100%);
background:-webkit-gradient(
linear, left top, left bottom, color-stop(0%,
rgba(255, 255, 255, 0.3)),
/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
color-stop(100%, rgba(255, 255, 255, 0.1)));
}
.gmail-logo:hover{
background:#313131;
border-color:#313131;
}
.gmail-logo:hover .gmail-box:before{
border-color:#313131;
/* margin-top:-305px; */
}
.gmail-logo:hover .gmail-box:after{
/* margin-top:-5px; */
border-color:#313131;
border-bottom-color:#fff;
border-right-color:#fff;
}
-->

That's It...... :)

Monday, 12 November 2012

Stylish CSS3 Login Form


Finally we're posting another form on BWidgets and probably it's our first form since i bought a top level domain for my blog. It's CSS3 based and it contain some amazing CSS3 animations and probably IE will hate this form. Tomorrow is Diwali in India so Happy Diwali to all visitors around the world.

Let's start it with basic HTML markup:

<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div> </div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
<div class="gradient"></div>

Well this was pretty simple and now it's time for final CSS3 touch:


@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/


/* Download Button (Demo Only) */
.download {
display: block;
position: absolute;
float: right;
right: 25px;
bottom: 25px;
padding: 5px;
font-weight: bold;
font-size: 11px;
text-align: right;
text-decoration: none;
color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:hover {
color: rgba(0,0,0,0.75);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:focus {
bottom: 24px;
}
/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
background: url(http://2.bp.blogspot.com/-VHP0EdpUQpo/UKCRnrj_6NI/AAAAAAAARVg/1LY1qSFlamc/s1600/gradient.png) no-repeat;
}
*/
.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
z-index: -2;
/* Fallback */
background-image: url(http://2.bp.blogspot.com/-VHP0EdpUQpo/UKCRnrj_6NI/AAAAAAAARVg/1LY1qSFlamc/s1600/gradient.png);
background-repeat: no-repeat;
/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 0 auto;
position: relative;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .content .input {
width: 188px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
margin-top: 25px;
}
.login-form .content .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: -1;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.user-icon {
top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(http://4.bp.blogspot.com/-b8khQr4WqKk/UKCRpkyjf3I/AAAAAAAARVw/Lt6jArk_wxM/s1600/user-icon.png) no-repeat center; }
.pass-icon {
top:201px;
background: rgba(65,72,72,0.75) url(http://1.bp.blogspot.com/-aFqSh5K4a4Q/UKCRohKYZxI/AAAAAAAARVo/usOtxNT8-IQ/s1600/pass-icon.png) no-repeat center;
}
.content input:focus + div{
left: -46px;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
/*******************
FOOTER
*******************/
.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;
background: #d4dedf;
border-top: 1px solid #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}
/* Login button */
.login-form .footer .button {
float:right;
padding: 11px 25px;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .footer .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/* Register button */
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
cursor: pointer;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}
.login-form .footer .register:hover {
color: #3f9db8;
}
.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}

That's It!!!

Sunday, 11 November 2012

Create An Exploding Logo With CSS3 And MooTools


Seriously guys this is best script i have ever seen in my life and for it's not a jquery script. It's a MooTools script and this tutorial was so big and complicated so i compiled four different scripts into one to make it look easy and small. All we need is MooTools, CSS3 and an image. I found this tutorial at David Walsh. Let's get started:

First we have to add basic html in your document:

<a href="/" id="homeLogo">David Walsh Blog</a>

Now after this we'll add CSS3 which will contain our image. The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:

a#homeLogo  {
  width:300px;
  height:233px;
  text-indent:-3000px;
  background:url(http://3.bp.blogspot.com/-b-m94vnqtVY/UJ9xJnPMTzI/AAAAAAAARSY/qR74wSUdXao/s1600/Logo.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(http://3.bp.blogspot.com/-b-m94vnqtVY/UJ9xJnPMTzI/AAAAAAAARSY/qR74wSUdXao/s1600/Logo.png);
  background-repeat:no-repeat;
}
.clear { clear:both; }

Now finally we'll add our magic script:

<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>

Our full document will look something like this:

<a href="/" id="homeLogo">David Walsh Blog</a>
<style>
a#homeLogo  {
  width:300px;
  height:233px;
  text-indent:-3000px;
  background:url(http://3.bp.blogspot.com/-b-m94vnqtVY/UJ9xJnPMTzI/AAAAAAAARSY/qR74wSUdXao/s1600/Logo.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(http://3.bp.blogspot.com/-b-m94vnqtVY/UJ9xJnPMTzI/AAAAAAAARSY/qR74wSUdXao/s1600/Logo.png);
  background-repeat:no-repeat;
}
.clear { clear:both; }
</style>
<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>

Popular Posts

 
Powered by Blogger.