Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

How it’s done

Cutting to the chase, here is the CSS for the most simple possible top-to-bottom linear gradient:

.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;

/* fallback image */
background-image: url(images/fallback-gradient.png);

/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10+ */
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

You could add the non-prefixed version too, but since that’s not yet supported in anything I typically opt out of that, in case there are last minute changes to spec.

And once more with better formatting and without the comments:

.gradient-bg {
   background-color: #1a82f7; 
   background-image: url(images/fallback-gradient.png); 
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);
}

Demo

The post How to Create Gradient in CSS3 appeared first on Tuto-rial.

PSD to HTML

Learn how to take a .psd computer file and switch it into a complete CSS structured HTML website . This content includes some important considerations when transforming PSD to HTML.

You have the customer’s PSD mockup produced, now you are to flip PSD to HTML. It’s so easy for an established webmaster or a developer. To start with we begin by examining the structure, and if we are over with the chopping aspect all that is required is to put the decorations in position. The encoding aspect in PSD to HTML should include how to bring every one of the sections all together, in such a way that they are readable over all the internet explorer along with under all options.

The structure for all the internet sites are generally the same. Every single website features headlines and the bottom aspect. Although nowadays, a number of like to have an individual space for the logo design aspect and personal for the headlines aspect, some styles have both the sections combined together to type a headlines that may have all the feaures in position. The top navigational hyperlinks can be prevented according to the present specifications in the consumer, or according to the customer’s flavoring and specifications. Then is the main part of the body. Here you are able to position pictures as well as written text checklist the organization’s goods and services. The Pillar One and Pillar Two are the side coffee shops, bookstores, and can have the backlinks placed. All those makers who adhere to hand value design possess a complete management with regard to developing the structure. Yet nowadays, there are tailored styles available which doesn’t needs much difficult term, only the smart work to turn PSD to HTML. Lastly, there is the bottom aspect. This will use a copyrights claims, pictures mistreatment claims, and backlinks for convenience of use by the guests.

PSD to HTML5

While transforming PSD to HTML, certain factors are to keep in mind. The designers desire interpreting the features in a particular person CSS computer file using.css expansion. This is much like an user interface, in which you have a complete use of alter a website. It is vital to understand whether the website structure is a set one, or a liquid size structure wherever each column may expand. Other factors to take into consideration are to know whether or not the consumer is designed to integrate Display relieve or Display movements, video clips, etc to make its website search eye-catching. If so is the case, then a PSD to HTML programmers propose not such as platforms in the website. Your website should be completely div structured as it allows working the site quicker plus more effectively.

For more information about PSD to DRUPAL visit our website.

The post Turn PSD to HTML and also CSS appeared first on Tuto-rial.

Get a top quality flat iron – for flat irons, you certainly don’t want low cost. You want top quality. 1 improper swipe of a flat iron will indicate that you’re heading to end up going to have to wear a hat till your hair grows back again. Also, examine the brand. Some models will die out fast and do a dirty task, even though much more trustworthy and branded models, like the Karmin G3 Salon Pro line, will get the task done and previous for several years on conclude.

Twin voltage stylers are specifically developed to be utilized by folks who are in frequent require for traveling for their organization reasons. Some girls would have frizzy, wavy and unmanageable hair that wants to be styled daily. Dual voltage resources are like a boon for them as they can carry their styling rod simply and easily in their handbag to everywhere in the entire world. They come in small, small, gentle fat style so that you can have them effortlessly with you exactly where at any time you go. Thus, it guarantees that you maintain your good seems all the time, even when you are away from your home.Don’t wrap the cord close to the iron for storage since it will damage the cord. You can get a heatproof mat for putting the flat iron on your lavatory counter or dressing desk without having detrimental it. These are great since a lot of of these mats double as storage bags. Be positive to permit the hair iron awesome down before storing it. Most critical make confident to have a storage location for your iron that is out of the get to of children, pets, and much absent from h2o so no a single will get damage.

A flat iron is another extremely well-liked tool for straightening hair. The Sedu’s effectiveness is also appreciated also, using just 50 percent the volume of time to straighten hair as other well-known brands. This gadget can work to “antifreeze” the hair and this is one more purpose for its gain. Alongside with the Sedu flat iron, the Bion electronic, Solia, Hai Convertible, Chi flat iron and the Kenta flat iron are also amid the finest hair straighteners.

The solia tourmaline delivers a lot of positive aspects that revolve around the look and truly feel of your hair. How a lot of times have you acquired up earlier since you knew the flat iron was going to be utilized. This technique permits you to snooze in extended and even retain you from getting late for anything. It isn’t going to make any difference if you have a dinner date, a get together, or even work.

The Sedu flat iron is a single of the best specialist irons available to the public in the planet, and its reputation continues to rise as people reveal their activities. With the morning regimen sometimes minimize down by 50 percent an hour or a lot more, any person can profit from the reduction this beneficial iron can give. It is worth thought by any person with hair they considered to be unmanageable, and any person who needs for an less difficult, and less destructive way to straighten their hair.

The arms of the flat iron might become unfastened right after it’s been utilised several moments. On most models, you can tighten them. Take away the address plate from the hinge, tighten the screw in the hinge, and substitute the go over plate. It should work just like new. Most high quality irons should stay sturdy, but in the unlikely probability something transpires, these good quality items usually occur with a warranty, so check it out.

An option to also think about is the use of thermal hair straighteners, an perfect alternative for classic straighteners. Thermal straightening leaves your hair directly by utilizing scorching combs, dryers, curling and flat irons. Vidal Sassoon VS754 is a single of the finest on this industry. It has a ceramic grill and does an excellent task. Other highly ranked dryers include the Tremendous Solano by Solano global and CHI Ceramic Ionic hair dryers and the Conair ion shine – folding manage blow dryer 149QI.

the folica coupon and solia flat iron tourmaline delivers lots of positive aspects that revolve about the seem and experience of your hair

The post How to Straighten Your Hair Employing a Solia Flat Iron appeared first on Tuto-rial.

There are 2 method in css where you can make a div invisible. Its important to know how to hide a div or any given container dynamically, to improve the user interactions in modern web sites.

Method for Making a Div Invisible

1. Using Display Attribute in CSS
2. Using Visibility Attribute in CSS

Using Display Attribute in CSS

Invisible div can be created by setting the display attribute in css to none. In the following example div which has a id named divId will be set to invisible. Important thing here is after hiding, the div stays in the web page but no space is taken from the web page. You can make the div visible whenever needed by setting the display attribute to block.

#divId {
display: none;
}

Using Visibility Attribute in CSS

Another method of creating Invisible div is to set the visibility attribute in css to hidden. In the following example div which has a id named divId will be set to invisible. Important thing here is after hiding, the div stays in the web page and space will be taken from the web page. So in this situation even though you hide the div, area contained by the div will be shown as blank. You can make the div visible whenever needed by setting the visibility attribute to visible.

#divId {
visibility: hidden;
}

Jquery provides simple built in method to hide any element in the document. You can make the div invisible by using the hide() method. This method is simply equivalent to setting the css display attribute to none. Important thing in this function is that we can animate the div when hiding. Also you can make the div visible again by calling the show()method. Following examples shows how to use the hide() method.

Hiding the Div using Default Method

This will hide the div without any animation effects on the div.

$('#divId').hide();

Hiding the Div using an Animation

This method will animate the div when hiding. You can pass slow,pass or valid number to animate. Value of fast is 200 milliseconds and slow is 600 milliseconds.

$('#divId').hide('slow');

Download

The post How to Make a Div Invisible Using CSS and Jquery appeared first on Tuto-rial.

Feature boxes are used in web sites to show the features of a specific products or service in a user interactive way. Normally the feature is displayed with a image that shows the meaning of the feature, title and a small description. So i have created a built in short code for displaying feature boxes on your wordpress blog without needing any design knowledge. This is part of the IBlocks plugin tutorial series. You can see some feature boxes made using this tutorial contents below.

Defining the shortcode functions

In the following section I have given the functions needed to apply the shortcodes. Since we are not using any plugin for this shortcode, you have to manually put the following code into your functions.php file of your theme. If you are a technical person, use the IBlocks plugin.

function generate_css_iblocks($content) {
return "<style>
dl,dd,dt{
margin: 0;
padding: 0;
}
.small_img_features{
width:90%;
float:left;
height: 150px;
margin-bottom: 10px;
margin: 1%;
}
.small_img_features_image{
width:40px;
float:left;
}
.small_img_features_title{
width:95%;
color: #6D6C6C;
font-weight:bold;
font-size: 15px;
padding:5px;
}
.small_img_features_title img{
width: 64px;
height: 64px;
}
.small_img_features_content{
clear: both;
font-size: 14px;
padding: 5px 2%;
text-align: justify;
width: 90%;
}
</style>
".$content;
}
add_filter('the_content', 'generate_css_iblocks');
function list_box($atts, $content=null) {
$type = $atts['type'];
switch($type) {
case 'small_img_features':
$content = do_shortcode($content);
$content = small_img_features($atts,$content);
break;
}
return $content;
}
add_shortcode('list', 'list_box');
function small_img_features_styles($atts) {
$width    = isset ($atts['width']) ? "width:".$atts['width'].";" : '';
$height = isset ($atts['height']) ? "height:".$atts['height'].";" : '';
$back_color = isset ($atts['back_color']) ? "background-color:".$atts['back_color'].";" : '';
$border_color = isset ($atts['border_color']) ? "border:1px solid ".$atts['border_color'].";" : '';
$title_color        = isset ($atts['title_color']) ? "color:".$atts['title_color'].";" : '';
$title_width        = isset ($atts['title_width']) ? "width:".$atts['title_width'].";" : '';
$title_font_size    = isset ($atts['title_font_size']) ? "font-size:".$atts['title_font_size'].";" : '';
$title_margin        = isset ($atts['title_margin']) ? "padding:".$atts['title_margin'].";" : '';
$title_font_name    = isset ($atts['title_font_name']) ? "font-family:".$atts['title_font_name'].";" : '';
$content_color        = isset ($atts['content_color']) ? "color:".$atts['content_color'].";" : '';
$content_back_color    = isset ($atts['content_back_color']) ? "background-color:".$atts['content_back_color'].";" : '';
$content_width        = isset ($atts['content_width']) ? "width:".$atts['content_width'].";" : '';
$content_font_size    = isset ($atts['content_font_size']) ? "font-size:".$atts['content_font_size'].";" : '';
$content_font_name  = isset ($atts['content_font_name']) ? "font-family:".$atts['content_font_name'].";" : '';
$style['small_img_features']        = $width.$height.$back_color.$border_color;
$style['small_img_features_title']    = $title_color.$title_width.$title_font_size.$title_margin.$title_font_name;
$style['small_img_features_content']= $content_color.$content_width.$content_font_size.$content_font_name.$content_back_color;
return  $style;
}
function small_img_features($atts,$content) {
$styles = small_img_features_styles($atts);
$styles['small_img_features']            = ($styles['small_img_features'] != '') ? "style='".$styles['small_img_features']."'" : "" ;
$styles['small_img_features_title']        = ($styles['small_img_features_title'] != '') ? "style='".$styles['small_img_features_title']."'" : "" ;
$styles['small_img_features_content']    = ($styles['small_img_features_content'] != '') ? "style='".$styles['small_img_features_content']."'" : "" ;
return "<dl>
<dt>
<img style="vertical-align: middle; padding-right: 10px;" src="".$atts[" alt="" />".$atts['title']."</dt>
<dd>".$atts['content']."</dd>
</dl>
";
}

After adding the above code to functions.php file of your theme you can create and design different types of feature boxes using the syntax given below. First I’ll provide you the basic syntax of creating feature boxes. Then I’ll provide various examples of using feature boxes.

Syntax of Feature Boxes

You have to above code to your blog post content or page content to create a feature box.

[list type='small_img_features' image='http://www.tuto-rial.com/wp-content/plugins/iblocks/images/Hydropro5.png' title='SAMPLE TITLE' content='Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' /]

Important – You have to be precise in changing the values of optional parameters. Your blog layout might display incorrectly if you use values which are not suited. Play around with optional parameters and change the values until you get the correct design.

The post Creating Stylish Feature Boxes with WordPress Shortcodes appeared first on Tuto-rial.

Inserting Shortcodes to functions.php file

function generate_header_css($content) {
	return "<style>
/*
 * Box Headers
*/
.box_head_small{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}
.box_head_small_sub{
	float: left;
	width: 85%;
}
.box_head_small_sub h1{
	font-family: helvitica;
	font-size: 12px;
}
.box_head_mid{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}
.box_head_mid_sub{
	float: left;
	width: 85%;
}
.box_head_mid_sub h1{
	font-family: helvitica;
	font-size: 14px;
}
.box_head_large{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}
.box_head_large_sub{
	float: left;
	width: 85%;
}
.box_head_large_sub h1{
	font-family: helvitica;
	font-size: 16px;
}
<style>;
".$content;
}
add_filter('the_content', 'generate_header_css');
/*Testing Headers */
function header_box($atts, $content=null) {
	$type = $atts['type'];
	switch($type) {
		case 'box_head_small':
			$content = do_shortcode($content);
			$content = box_head_small($atts,$content);
			break;
		case 'box_head_medium':
			$content = do_shortcode($content);
			$content = box_head_medium($atts,$content);
			break;
		case 'box_head_large':
			$content = do_shortcode($content);
			$content = box_head_large($atts,$content);
			break;
	}
	return $content;
}
add_shortcode('header', 'header_box');
function box_head_small($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_small' style='".$style['part1']."'>
					<div class='box_head_small_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}
function box_head_medium($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_mid' style='".$style['part1']."'>
					<div class='box_head_mid_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}
function box_head_large($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_large' style='".$style['part1']."'>
					<div class='box_head_large_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}
function box_head_styles($atts) {
	$color = isset ($atts['color']) ? "color:".$atts['color'].";" : '';
	$background = isset ($atts['color']) ? "background-color:".$atts['background'].";" : '';
	$outline = isset ($atts['color']) ? "outline-color:".$atts['outline'].";" : '';
	$style['part1'] = $background.$outline;
	$style['part2'] = $color;
	return  $style;
}

<pre>[header type='box_head_small' color='#fff' background='#809FC5' outline='#162F4D'] Your Title [/header]

[header type='box_head_small' ] Sample Blog Post Title [/header]
 
[header type='box_head_medium'] Sample Blog Post Title [/header]
 
[header type='box_head_large']Sample Blog Post Title [/header]

function generate_header_css($content) {
	return "<style>
/*
 * Box Headers
*/
.box_head_small{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}
.box_head_small_sub{
	float: left;
	width: 85%;
}
.box_head_small_sub h1{
	font-family: helvitica;
	font-size: 12px;
}
.box_head_mid{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}
.box_head_mid_sub{
	float: left;
	width: 85%;
}
.box_head_mid_sub h1{
	font-family: helvitica;
	font-size: 14px;
}
.box_head_large{
	background-color: #EEE;
	color: black;
	font-size: 20px;
	height: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	outline: 1px solid #CFCFCF;
	padding: 1%;
	width: 98%;
}
.box_head_large_sub{
	float: left;
	width: 85%;
}
.box_head_large_sub h1{
	font-family: helvitica;
	font-size: 16px;
}
<style>;
".$content;
}
add_filter('the_content', 'generate_header_css');
/*Testing Headers */
function header_box($atts, $content=null) {
	$type = $atts['type'];
	switch($type) {
		case 'box_head_small':
			$content = do_shortcode($content);
			$content = box_head_small($atts,$content);
			break;
		case 'box_head_medium':
			$content = do_shortcode($content);
			$content = box_head_medium($atts,$content);
			break;
		case 'box_head_large':
			$content = do_shortcode($content);
			$content = box_head_large($atts,$content);
			break;
	}
	return $content;
}
add_shortcode('header', 'header_box');
function box_head_small($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_small' style='".$style['part1']."'>
					<div class='box_head_small_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}
function box_head_medium($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_mid' style='".$style['part1']."'>
					<div class='box_head_mid_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}
function box_head_large($atts,$content) {
	$style = box_head_styles($atts);
	return "<div class='box_head_large' style='".$style['part1']."'>
					<div class='box_head_large_sub'>
						<h1 style='".$style['part2']."'>" . do_shortcode($content) . "</h1>
					</div>
				</div>";
}
function box_head_styles($atts) {
	$color = isset ($atts['color']) ? "color:".$atts['color'].";" : '';
	$background = isset ($atts['color']) ? "background-color:".$atts['background'].";" : '';
	$outline = isset ($atts['color']) ? "outline-color:".$atts['outline'].";" : '';
	$style['part1'] = $background.$outline;
	$style['part2'] = $color;
	return  $style;
}

The post Simple Blog Header Designs Using WordPress Shortcodes – Box Headers appeared first on Tuto-rial.

Syntax of Bold Headers

There are 3 types of predefined normal bold headers. You can use gen_head_small ,gen_head_medium or gen_head_large in the type attribute to check these 3 different box headers. Your main shortcode will be [header]Your Title [/header]. I have used gen_head_small in the example given below.

[header type='gen_head_small' ] Your Title [/header]

[header type='gen_head_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header] 

[header type='gen_head_medium' color='#374651'] Sample Title [/header] 

[header type='un_text_small' ] Your Title [/header]

[header type='un_text_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header] 

[header type='un_text_medium' color='#374651'] Sample Title [/header] 

[header type='un_bar_small' ] Your Title [/header]

[header type='un_bar_small' font_name='comic Sans MS' font_size='16px'] Sample Title[/header] 

[header type='un_bar_medium' color='#374651'] Sample Title [/header] 

The post Simple Blog Header Designs Using WordPress Shortcodes – Text Headers appeared first on Tuto-rial.