Profile cover photo
Profile photo
bhavesh khatarani
404 followers
404 followers
About
bhavesh's posts

Post has attachment

Post has attachment
Animate float labels using jQuery and CSS3
on focus of textbox will move & set as field set.

http://jsfiddle.net/bhavesh43/op9c8nre/3/
Photo

Post has attachment
Gradient Background Demo using CSS3

http://jsfiddle.net/bhavesh43/gt3tr/
Photo

ALL DEVICE MEDIA QUERY

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Post has attachment
Photo

I tend to opt for <button> tags rather than <input type="submit" /> but, whichever you prefer, the standard style follows your OS conventions. It can be a little uninspiring…


css code.
-------------


button
{
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: #ccc ;
background-color: #555;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#888, #555);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}

button:hover, button:focus
{
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}

@-webkit-keyframes pulsate
{
0%   { color: #ddd ; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff ; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd , 0 0 8px #fff ; }
100% { color: #ddd ; text-shadow: 0 -1px 0 #000; }
}

@keyframes pulsate
{
0%   { color: #ddd ; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff ; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd , 0 0 8px #fff ; }
100% { color: #ddd ; text-shadow: 0 -1px 0 #000; }
}

button:active
{
color: #fff ;
text-shadow: 0 -1px 0 #444, 0 0 5px #ffd , 0 0 8px #fff ;
box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
animation: none;
}

Post has attachment

Post has attachment

Post has attachment

Post has attachment
Wait while more posts are being loaded