CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 2 Comments on CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Style the Border in HTML with the Help of CSS 3 Border Style

Previously we have seen the Transform Operations using CSS3. In this article i will depict the New Border Properties in CSS 3. With the help of CSS 3, we can perform following two operations on border :

  1. Rounded Corner/ Border
  2. Border Shadow

Live Demo – Click Here Continue reading “CSS 3 Tutorial – Rounded Corner and Shadow Border effect”

Complete CSS 3 Tutorial – Transform Operations

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with Leave a comment on Complete CSS 3 Tutorial – Transform Operations

Complete CSS 3 Tutorial – Transform Operations – rotate, translate, scale, skew and matrix methods with Live Demo and source code

Cascading Style Sheet (CSS) is the language used by all the web languages like ASP.Net, PHP, JSP or Velocity (Basically HTML) to control the display style of the elements without changing the code. With the help of CSS we can control the border width, color, background color, background image, font and so on.

With the help of CSS 3 other than just style now we can even animate, translate and do lots of stuff which were not possible by the CSS 2 and needed the help of other JavaScript library like JQuery UI.

In this tutorial we are going to learn different transform operations supported by the CSS 3.

The Transform operations are supported by IE 9, Mozilla, Google Chrome, Safari and Opera.

Live Demo – Click Here.

Continue reading “Complete CSS 3 Tutorial – Transform Operations”

CSS – label control ignores the width style

Author posted by Jitendra on Posted on under category Categories HTML, Tech Tips and tagged as Tags with Leave a comment on CSS – label control ignores the width style

CSS – label control ignores the width attribute in style

Label tag does not work with css attribute “width” on some browsers like Chrome and Mozilla.

Simplest solution is :
before applying css for width, make sure “float:left” is written for label control.

Label elements are in-line style elements, so technically Chrome and Firefox are interpreting the CSS properly by not obeying my width declaration. In-line elements do not accept width attributes. The workaround is to force the label element to become a block level element by floating it.

 

Create Pure CSS based Menu – Step by Step Tutorial

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with 2 Comments on Create Pure CSS based Menu – Step by Step Tutorial

Tutorial on creating step by step pure CSS based Menu without any javaScript and Why CSS Hover property is not working in Internet explorer

After a long time i am going to write the article on CSS and HTML.  In this tutorial i am going to create a pure CSS based Menu with description of lots of CSS property and problems faced by the web developer. One advantage of having CSS based Menu rather than  JavaScript based Menu is that it is very light weight and cross browse compatible. I have used CSS based Menu in my website http://www.JitendraZaa.com

Live Demo – Pure CSS based Menu

Lets consider below HTML code on which we want to create a Menu.

Continue reading “Create Pure CSS based Menu – Step by Step Tutorial”

Complete CSS Selector Tutorial for the beginners

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , with 1 Comment on Complete CSS Selector Tutorial for the beginners

Complete CSS Selector Tutorial for the beginners

Below table displays that in how many ways we can select any element in CSS to style them.

Selector
Description
*Any Element
AElement of Type "A"
A.redColorElement "A" whose class is "redColor"
A#IndiaElement "A" which have id as "India"
A[bar]Element "A" with attribute "bar"
A[bar="Mum"]Element "A" which have attribute as "bar" whose value is exactly equal to "Mum"
A[bar~="Mum"]Element "A" whose "bar" attribute value is a list of whitespace-separated values, one of which is exactly equal to "Mum"
A[bar^="Mum"]Element "A" whose "bar" attribute value begins exactly with the string "Mum"
A[bar$="Mum"]Element "A" whose "bar" attribute value ends exactly with the string "Mum"
A[bar*="Mum"]Element "A" whose "bar" attribute value contains the substring "Mum"
A:link, A:visitedElement "A" being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
A:active, A:hover, A:focusElement "A" during certain user actions
A::first-linethe first formatted line of an "A" element
A:targetElement "A" being the target of the referring URI
A::first-letterthe first formatted letter of an Element "A"
A::beforegenerated content before an Element "A"
A::aftergenerated content after Element "A"
A:nth-child(n)Element "A", the n-th child of its parent
A:nth-last-child(n)Element "A", the n-th child of its parent, counting from the last one
A:nth-of-type(n)Element "A", the n-th sibling of its type
A:nth-last-of-type(n)Element "A", the n-th sibling of its type, counting from the last one
A:first-childElement "A", first child of its parent
A:last-childElement "A", last child of its parent
A:first-of-typeElement "A", first sibling of its type
A:last-of-typeElement "A", last sibling of its type
A:only-childElement "A", only child of its parent
A:only-of-typeElement "A", only sibling of its type
A:emptyElement "A" that has no children
A:rootElement "A", root of the document
A:enabled, A:disableda user interface element "A" which is enabled or disabled
A:checkeda user interface element "A" which is checked (for example a radio-button or checkbox)
A:not(s)Element "A" that does not match simple selector s
A BElement "B" descendant of Element "A"
A > BElement "B" child of Element "A"
A + BElement "B" immediately preceded by Element "A"
A~BElement "B" preceded by an Element "A"

Read more from w3 org.

Drop a line if you have any feedback or question.

Telerik Controls – CSS Lost on Page Postback

Author posted by Jitendra on Posted on under category Categories ASP.NET and tagged as Tags , , with 1 Comment on Telerik Controls – CSS Lost on Page Postback

Telerik Controls – CSS Lost on Page Postback in Chrome and Mozilla firefox

After long time i am writing this tips on my blog.
This is very small but usefull trick about telerik controls.

Telerik controls like “Tree View”, runs fine in Internet explorer but it fails loading CSS in Mozilla or chrome. To overcome this, use below line of code in Page_Load method.

protected void Page_Load(object sender, EventArgs e)
{
RadTreeView1.EnableAjaxSkinRendering = true;
}

I hope this would help. 🙂

Add CSS Programatically in ASP.NET

Author posted by Jitendra on Posted on under category Categories ASP.NET, Web Technology and tagged as Tags , with Leave a comment on Add CSS Programatically in ASP.NET

Tutorial on adding the CSS file dynamically in ASP.NET and C# / VB.Net

We Can set (Register) the Javascript file in ASP.NET but there is no such method for the CSS. So i have decided to write the article on how to set the CSS path dynamically in ASP.NET and C#.

Continue reading “Add CSS Programatically in ASP.NET”

Vertically middle align the DIV tag using CSS

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with Leave a comment on Vertically middle align the DIV tag using CSS

Source code and Methods to Middle align the text in DIV tag in HTML

In this article, i will emphasize on the way of vertically align the text in DIV tag of HTML.

First note i want to share is that, DIV tag is not for the purpose to contain the texts. It is utilized mainly for the placing controls and components.

Below is two methods which will work on all browsers to vertically align the text in DIV  tag.

Steps for Method 1:

  1. Specify the parent container as position:relative or position:absolute.
  2. Specify a fixed height on the child container.
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.

Continue reading “Vertically middle align the DIV tag using CSS”

Create Gradient Header using CSS

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags with 2 Comments on Create Gradient Header using CSS

Create a Gradient effect in heading tag of HTML using simple CSS trick

Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout.

Create attractive headers in HTML using CSS
Create attractive headers in HTML using CSS

Heading tags (H1 through to H6) are given more weight by search engines than regular body copy. So they should be used wisely to reinforce the page’s overall keyword theme……By SEO

I have used header tags and applied some css effects, it easy to write with 10-12 line of css and html Output will look like image shown.

First we need to add a div tag to our html page to put header on it.

Css for div:

#container {
	background: #6699FF;
	margin: auto;
	width: 500px;
	height: 700px;
	padding-top: 30px;
	font-family: helvetica, arial, sans-serif;
	}

We will use this as

Css for Header Tag..

h1 {
	 background: red;             /*Background color to header*/
	 background: -moz-linear-gradient(top, red, FFFFFF);
              /*from to colors, I have used simple name it can be replaced by color codes*/
	 background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));
	 padding: 10px 20px;
	 margin-left: -20px;
	 margin-top: 0;
	 position: relative;
	 width: 70%;
       /*from droping box shadow at the bottom of header*/
	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
                 box-shadow: 1px 1px 3px #292929;
	color: #454545;
	text-shadow: 0 1px 0 white;
}

Arrow class for dropping shadow.

.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;
}

Now just create a html Page and put a header and you have done assuming that you have written css in separate file named jstyle.css.
Example:

<html >
<head>
    <link rel="Stylesheet" type="text/css" href="jstyle.css" />
	<title>CSS Header</title>
</head>
<body>
	 <div id="container">
		<h1> H1 - Heading <span class="arrow"></span> </h1>
</body>
</html>

Live Demo of CSS Header

Note: This will not work on browsers which does not support CSS3.

About Author:
Jayant Bramhnakar
Sr. Web Developer
Sahyadri Technologies Pvt. Ltd(Satara)
jayantbramhankar@gmail.com
jayant@sahyadritechnologies.com

ClearType in IE

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , with Leave a comment on ClearType in IE

Recently, during development i encountered in interesting issue related to internet explorer.

There is one property in IE known as cleartype, which results in different display of font.

you can see in below snap :

clear type font style in IE
clear type font style in IE

The Browse button at left side has shadow effect in font or we can say Cleart type is enable for that control.

the control at right side is normal Button control of HTML. you can see difference very clearly.

Remove ClearType property from IE:

To remove clearType property, we just need below trick in CSS.


<style type="text/css">
body {
filter:none
}
</style>

By using property filter:none we can remove the cleart type behavior of IE.

Text without clear type
Text without clear type