Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Saturday, November 9, 2013

Creating custom HTML tags which support all Major Browsers

No comments: Posted by Anonymous at 11:07 AM
Do you know that we can create custom HTML elements/tags? when i got to know about it i was like WOW! that will be kinda awesome and hard. But later when i researched about it i found it's really easy for anyone to create custom HTML elements. You don't need to do thousands of lines of coding.





For creating a HTML element/tag you just need to write the name of it like the standard HTML element/tag.
For example:
<computer brand="Acer" price="28,900" ratings="4" id="pc">Acer Aspire R7</computer>
 you are done by creating a custom HTML element. But this will only support all major browsers, excluding Internet Explorer.

To make the custom HTML tag work with Internet Explorer you'll just need to write a single line of Javascript.
<script type="text/javascript">
   document.createElement("computer");
</script>
this will create an HTML element named as "computer".
Another point to note is, by default a custom element has a display inline. But you can change that with CSS.
<style type="text/css">
   #pc {
      display:block;
   }
</style>
Liked the post ? subscribe us with your email to get upcoming tutorials directly in your inbox:


To learn more: http://www.x-tags.org/

Thursday, September 12, 2013

Fade effect on hover using CSS3

No comments: Posted by Anonymous at 11:17 AM

These day's many websites, blogs have fade effects in their links which is trigger when user hover their mouse on the link and it's mostly implement using Javascript. In this article we'll do that using CSS3.
CONTINUE READING »

Wednesday, August 14, 2013

Simple and awesome CSS3 button design.

1 comment: Posted by Anonymous at 4:30 AM
Their are many websites which shares the code for creating new and awesome CSS3 buttons not only buttons their are also many other websites which shows some awesome styles for HTML/HTML5 element as well as inputs. In this post i'm sharing two button styles which is usually use for designing submit buttons.

When i was new to CSS3 what i used to do is to go on many CSS3 generators website and generate a button and try to understand the code what they have used. You can also try that after reading this post.

 CSS: Style properties for button.
input[type=submit] {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}

input[type=submit]:hover {
	background-color:#dfdfdf;
}

input[type=submit]:active {
	position:relative;
	top:1px;
}
CSS: Style properties for button.
input[type=submit] {
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 17px;
	  padding:10px 15px;
	  text-decoration: none;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  -webkit-box-shadow: 0px 1px 5px #696969;
	  -moz-box-shadow: 0px 1px 5px #696969;
	  box-shadow: 0px 1px 5px #696969;
	  text-shadow: 1px 1px 3px #666666;
	  border: solid #3972b0 1px;
	  background: -webkit-gradient(linear, 0 0, 0 100%, from(#4bb007), to(#59d104));
	  background: -moz-linear-gradient(top, #4bb007, #59d104);
	  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
	  display:inline-block; /* IE is so silly */
}
input[type=submit]:hover {
	  background: #4bb007;
}
Have a look at the live demo also you can download the source file:

Saturday, July 6, 2013

Adding effects in Image using CSS3

2 comments: Posted by Anonymous at 11:54 AM
Adding effects in image using CSS3 sounds cool, because many of you might be using photoshop or picasa or instagram or any other image editing application. So let's use CSS3 to add effects in image.


Before you start read this carefully:
The filter property in CSS3 from which we'll add effects is only supported to -webkit- it means only Google Chrome, Safari supports this CSS3 property.
Also i have tried to use -moz- to render that effects in Firefox but it didn't worked. So after some research about it i got to know that it only supports -webkit-.

Okay, first let's start.

CSS: Changing image opacity using CSS3 property:  -webkit-filter:opacity(100%);
  .image_opacity {
       -webkit-filter: opacity(100%); /*Changing image opacity*/
  }

CSS: Adding Negative effect in image using CSS3 property: -webkit-filter:invert(100%);
  .image_negative {
       -webkit-filter: invert(100%); /*Adding negative effect*/
  }

CSS: Adding Black & White(Gray scale) effect using CSS3 property: -webkit-filter: grayscale(100%);
  .image_b_w {
      -webkit-filter: grayscale(100%); /*Adding gray scale effect*/
  }

CSS: Making images blur using CSS3 property: -webkit-filter: grayscale(100%);
  .image_blur {
     -webkit-filter: grayscale(100%); /*Making image blur*/
  }

CSS: Adding saturate effect using CSS3 property: -webkit-filter: saturate(200%);
  .image_saturate {
     -webkit-filter: saturate(200%); /*Adding saturate effect*/
  }

CSS: Playing with RGBA using CSS3 property: -webkit-filter: hue-rotate(100deg);
  .image_hue {
    -webkit-filter: hue-rotate(100deg); /*Playing with RGBA*/
  }

CSS: Adding Sepia effects using CSS3 property: -webkit-filter: sepia(100%);
  .image_sepia {
     -webkit-filter: sepia(100%); /*Adding sepia effect in image*/
  }

CSS: Adjusting Brightness in image using CSS3 property: -webkit-filter: brightness(140%);
  image_bright {
     -webkit-filter: brightness(140%); /*Adjusting brightness in image*/
  }

CSS: Adjusting Contrast of image using CSS3 property: -webkit-filter: brightness(140%);
  image_contrast {
     -webkit-filter: contrast(110%); /*Adjusting Contrast of image*/
  }

We have used almost many main effects and now one more awesome thing, we can combine it all together using CSS3 property: -webkit-filter: sepia(50%) invert(100%) opacity(50%);

CSS: Combining it, all together CSS3 property: -webkit-filter: sepia(50%) invert(100%) opacity(50%);
  .image_combine_effect {
    -webkit-filter: sepia(50%) invert(100%) opacity(50%); /*Example combining of effects*/
  }

For more information about the filter property read this documentation here: http://www.w3.org/TR/2013/WD-filter-effects-20130523/

And yes, the reason for using -webkit- before every property is to render the property in -webkit- browsers like Google Chrome, Safari.
And if you want to archive this effects using PHP then PHP's GD library is made for you. Articles coming soon for GD library. 
Subscribe to: Posts (Atom)

Copyright 2014-2015 TheCodePress. An Ashwin Pathak Creation.