Posts

Showing posts from August, 2015

How to create a fix dimension ( width * height) textarea

-
In Html, give text area and we can set width and height but site user can move the textarea. This solution Is available in css. We can use resize attribute to create a fix text area. So, let’s see example HTML File Is : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>krButani</title> <style> .text { } textarea { /* Possible Type is Following: 1. None = no - resize textarea 2. vertical = only vertical resize. 3. horizontal = only horizontal resize. 4. Both = horizontal - vertical resize. */ -moz-resize:none; -webkit-resize:none; resize:none; } </style> </head> <body> <div class="text"> </div> <textarea name="elem" id="elem" rows="5" cols="50"></textarea> </body> </html> Now You can create a better textarea. Next time we meet
Post a Comment
Read more

Use of +/~ sign in css

-
Image
In css3 + or ~ sign is new attribute. It is work to apply css attribute in just after upcoming HTML Elements. For Example HTML file is: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>krButani</title> <style> /* Here, Rad color apply last p tag. you can also use ~ sign like, ul ~ p */ ul + p { color:red; } ul ~ p { color:red; } </style> </head> <body> <p>Butani</p> <ul> <p>Butani</p> <li>killer</li> </ul> <p>Working</p> </body> </html> Output is :
Post a Comment
Read more

First-line and First-letter Pseudo attribute in css

-
Image
In css, give two most useful pseudo attribute that are: 1. First-line : it is effect in first line of given paragraph. 2. First-letter: it is effect in first letter of given paragraph. For Example HTML File is : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>krButani</title> <style> p.texts { width:500px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; } /* This is apply to first line */ p.texts:first-line { Color:green; font-size:24px; } /* This is a apply to first letter. */ p.texts:first-letter { Color:red; font-size:72px; } </style> </head> <body> <p class="texts"> Premananda was a "vyakhyan-kar", a traveling storyteller, who narrated his subject in song form and then perhaps elaborated on the lines in prose. His style was so fluent that the long poems runnin
Post a Comment
Read more

Use of Not pseudo class in css

-
Image
In css new pseudo class is “not”. It define the to apply all attribute but given parameter not apply it. “Not” is new css attribute so it is not work with internet explorer. For Example HTML file is: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>krButani</title> <style> .cons { color:#FF0000; } /* div:not(.cons) means the all div element which class is not .cons that apply green color. */ div:not(.cons) { color:green; } </style> </head> <body> <div class="cons"> MakeChanges </div> <div class="des"> MakeChanges </div> </body> </html> Output is :
Post a Comment
Read more

How to create a responsive font in css ( without @media )

-
Image
In Responsive website design big problem to create font responsive. Responsive Font is many way you can create it. In this tut. I am learning create a responsive font without using @media attribute. Now Show Example Html file is : <html> <head> <title>krButani</title> <style> .FDemo { margin : 30px; padding:20px; font-size:5vw; /* offset You can set View port the view port type is Follow : 1. vw = viewport width 2. vh = viewport height 3. vmin = relative to the shortest dimention( width or height ) 4. vmax = relative to the logest dimention( width or height ) one other dimention is rem ( Re embedded ) It's all the dimension can not support internet explorer. */ font-family:Verdana, Arial, Helvetica, sans-serif; background:#54A93F; border:3px solid #fff; box-shadow:0px 0px 3px #999; border-radius:5px; } </style> </head> <body> <div class="FDe
Post a Comment
Read more

How to use border radius in css

-
Image
Add rounded border to an html elements. In border radius is define 4 angles differently. Default value is 0 and it cannot inherit child elements. You can give border radius 4 angle that are follow syntax: Border-radius: 1px 2px 3px 4px; - First dimension (1px) is display top left corner. - Second dimension (2px) is display top right corner. - Second last dimension (3px) is display bottom right corner. - Last dimension (4px) is display bottom left corner. You can also give separate dimension like Follow: Border-top-left-radius: 1px; Border-top-right-radius: 2px; Border-bottom-left-radius: 3px; Border-bottom-right-radius: 4px; You can also give two dimension that follow: Border-radius:0px 1px; - First dimension set top left and bottom right dimension. - Last dimension set bottom left and top right corner radius. Here, you can use for older browser prefix is moz and webkit Example HTML FILE is : Output is :
Post a Comment
Read more

Use of * as a child attributes in css

-
Image
In css We know about asterisk(*) is use to apply all HTML Elements. But it is use as In my main div tag to all child elements. Let’s Start Example : Html file is : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>krButani</title> <style> /* Here Container All attribute apply css */ .Container *{           display:inline-block;           margin:10px;           border:1px solid;           width:100px;           height:100px; } </style> </head> <body> <div class="Container"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> Output is :
Post a Comment
Read more